Sticky Elements

JavaScript

エレメントがくっついてくるアニメーション「Sticky Elements」

Sticky Elementsはエレメントにカーソルを乗せるとくっついてくるアニメーションを実装できるJSライブラリです。

上下左右の方向にくっついてきます。エレメントはある程度くっついたあとに元の位置へ戻ります。ちょっとしたアクションに取り入れるとおもしろそうですね。

Sticky Elements

デモ

エレメントにカーソルを持っていくと、ピタッと少しの間くっついてきます。ボタンやテキストなどいろんな場所に適用されています。

右側のControlにあるスライドバーで、アニメーションの調整ができるようになっています。

Horizontal stickinessで左右方向への調整、Vertical stickinessで上下方向への調整、Durationでくっついてくるスピードを調整することが可能です。

Sticky Elementsの使い方もシンプルなので気軽に実装できるのがいいですね。オプションもいくつか用意されており、stickiness、duration、pointerといった項目があります。

エレメントがカーソルにくっついてくると、思わず「おっ」となりますね。ボタンやテキストにちょっと注目してほしいときなんかに活用してみてはいかがでしょうか?

Sticky Elements

関連記事

  1. KGallery

    JavaScript

    縦や横に配置されたサムネイルから画像を選択できるjQueryの画像ギャラリー「KGallery」

    縦や横に配置されたサムネイルから画像を選択することができるjQuery…

  2. Dropit

    JavaScript

    シンプルでフレキシブルなドロップダウンメニュー「Dropit」

    Dropitはシンプルでフレキシブルなドロップダウンメニューを実装でき…

  3. DarkTooltip

    JavaScript

    色んなパターンのツールチップを実装できるjQueryプラグイン「DarkTooltip」

    DarkTooltipというjQueryプラグインを使えば、色んなパタ…

  4. FlexNav

    JavaScript

    見た目もシンプルでレスポンシブ対応のナビゲーションメニューを実装できるjQueryプラグイン「Fle…

    シンプルなデザインでレスポンシブにも対応したナビゲーションメニューを実…

  5. ContentTools

    JavaScript

    画面内でそのまま編集できるWYSIWYGエディタ「ContentTools」

    ContentToolsは画面内でそのままコンテンツを編集できるWYS…

  6. Yamm 3

    JavaScript

    メガメニューをBootstrap3で実装する「Yamm 3」

    Yamm 3はメガメニューをBootstrap3を使って実装することが…

最近の記事

  1. 赤いなつめ
  2. ペーストしてスタイルを合わせる
  3. Hermèsオレンジスポーツバンド
  4. GoPro HERO8 Black

アーカイブ

PAGE TOP