Sticky Elements

JavaScript

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

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

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

Sticky Elements

デモ

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

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

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

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

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

Sticky Elements

ajSliderシンプルでさりげないアニメーションが素敵なスライドショー実装「ajSlider」前のページ

iPhoneで3:2の比率で写真を撮影できるカメラアプリ「OneCam」次のページ3:2の比率で写真撮影できるOneCam

関連記事

  1. no-image

    JavaScript

    プレーンなJavaScriptによるレスポンシブなLightbox「jsOnlyLightbox」

    jsOnlyLightboxは、jQueryなどを必要としないプレーン…

  2. Blindify
  3. Ziehharmonika

    JavaScript

    かっこいいアコーディオンを実装できる軽量のjQueryプラグイン「Ziehharmonika」

    アニメーションがとてもクールでかっこいいアコーディオンを実装することが…

  4. Filterizr

    JavaScript

    ソートやシャッフルができるギャラリーを実装するjQueryプラグイン「Filterizr」

    Filterizrはソートやシャッフルができるレスポンシブに対応したギ…

  5. markerPen

    JavaScript

    Webページにマーカー機能を実装できるjQueryプラグイン「markerPen」

    markerPenはWebページにマーカーで描ける機能を実装することが…

  6. jQuery GoUp!

    JavaScript

    ページ上部にスクロール移動してくれる「jQuery GoUp!」

    jQuery GoUp!は、ページ上部にスクロール移動してくれるシンプ…

最近の記事

  1. 200-DGBG020
  2. Anker PowerPort 5-in-1 37.5W Hub
  3. α7C + FE28-60mm F4-5.6
  4. Apple Watch Series 6

アーカイブ

PAGE TOP