ScrollTrigger

JavaScript

スクロールの位置をベースにしたアニメーション「ScrollTrigger」

ScrollTriggerはユーザーがスクロールする位置をベースにしたアニメーションを実行できるJSライブラリです。アニメーションにはCSS3が使われており、クラスがトリガーになっています。またScrollTriggerは、Vanilla JSで書かれているとのこと。シンプルで美しく、そしてさりげないアニメーションをスクロールに基づいて実行させたいときに、活用してみたいですね。

縦横どちらのスクロールにも対応

デモ(縦)

スクロールしていくと、それに合わせてテキストが美しいフェードや動きとともに表示されます。違和感なく自然にテキストが画面に溶け込んでいく様がとってもオシャレですね。Webページに優雅な印象を与えたいときにはピッタリです。

デモ(横)

縦横どちらのスクロールでもアニメーションの実装が可能なので、Webサイトに合わせて柔軟に対応できますね。

使い方もシンプルでわかりやすく、オプションもいろいろ用意されているのでカスタマイズして使えるところもgoodです。toggle()、offset()、addWidth、addHeight、centerHorizontal、centerVerticalなどの項目があります。

オプションは「data-scroll」という属性を用いて設定でき、「data-scroll=”ここにオプション”)」といった感じで記述していきます。

そのほか、「data-scroll-showCallback」や「data-scroll-hideCallback」といったコールバックも指定可能なので、自分好みのスクロールアニメーションに仕上げていけると思います。

ScrollTrigger

関連記事

  1. spzoom

    JavaScript

    シンプルで使いやすい画像ズームを実装できるjQueryプラグイン「spzoom」

    spzoomはシンプルな操作性で使いやすい画像ズーム機能を実装できるj…

  2. no-image

    JavaScript

    水平スクロールでテキストが流れていくマーキー実装「hMarquee」

    hMarqueeは、水平スクロールでテキストが滑らかに流れていくマーキ…

  3. JavaScript

    指定したボックス要素にドロップシャドウをつけてくれるjQuery Shadow Plugin

    指定したボックス要素にドロップシャドウをつけてくれるjQuery Sh…

  4. syncscroll

    JavaScript

    2つ以上のスクロールエリアを同時にスクロールできる「syncscroll」

    syncscrollは2つ以上のスクロールエリアを同時にスクロールでき…

  5. Create a month picker jQuery plugin
  6. HR Navigation Responsive Menu

最近の記事

  1. EH-NA0B
  2. KPS-88
  3. Happy Plugs AIR1
  4. cheero Stream 10000mAh
  5. BOSE HOME SPEAKER 300

アーカイブ

PAGE TOP