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

Optiscroll縦横に対応したカスタマイズ性に優れたモダンなスクロールバー「Optiscroll」前のページ

さまざまなコンテンツをポップアップウィンドウで表示できる「ToxicBox」次のページToxicBox

関連記事

  1. jQueryTween

    JavaScript

    軽量で軽快なアニメーションをするjQueryプラグイン「jQueryTween」

    jQueryTweenは軽量で軽快なアニメーションを実装することができ…

  2. Image Tilt Effect

    JavaScript

    画像にチルトエフェクトをかけることができる「Image Tilt Effect」

    Image Tilt Effectは画像にチルトエフェクトをかけたちょ…

  3. xGallerify

    JavaScript

    サイズが異なる画像でもキレイに表示できるギャラリー実装「xGallerify」

    xGallerifyはギャラリーを作成するのに最適なjQueryプラグ…

  4. no-image

    JavaScript

    スマホなどに最適なテーブルを実装できる「Mobile-Friendly Table」

    Mobile-Friendly Tableはスマホなどのモバイルに最適…

  5. jQuery Navobile
  6. multi.js

    JavaScript

    検索機能がついたセレクトボックスを実装できる「multi.js」

    multi.jsは検索機能がついた使いやすいユーザーフレンドリーなセレ…

最近の記事

  1. 甘柿
  2. 冬用のふとん
  3. 田沢湖
PAGE TOP