Sticky Elements

JavaScript

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

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

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

Sticky Elements

デモ

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

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

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

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

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

Sticky Elements

関連記事

  1. jQuery RS Carousel

    JavaScript

    レスポンシブ対応のシンプルなカルーセルを実装できる「jQuery RS Carousel」

    レスポンシブ対応のシンプルなカルーセルを実装できるjQueryプラグイ…

  2. tsorter

    JavaScript

    テーブルにソート(並べ替え)機能を実装できる「tsorter」

    tsorterは、JavaScriptを用いてHTMLテーブルにソート…

  3. jQuery Section Navi Plugin
  4. desoSlide

    JavaScript

    サムネイル付きのナビが素敵なスライダーを実装できるjQueryプラグイン「desoSlide」

    desoSlideというjQueryプラグインを使えば、サムネイル付き…

  5. SPOILER ALERT!

    JavaScript

    画像やテキストにボカシを入れることができるjQueryプラグイン「SPOILER ALERT!」

    画像やテキストといった部分にボカシを入れることができるjQueryプラ…

  6. ptrLight

    JavaScript

    モバイル用のリフレッシュインジケーターを実装できる「ptrLight」

    ptrLightはモバイル用のリフレッシュインジケーターを実装すること…

最近の記事

  1. Olli
  2. 単語帳メーカー(Flashcard Maker App)
  3. 1Password 7
  4. 風に揺れる草

Facebookページ

PAGE TOP