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. CSS3 3D Text Plugin for jQuery
  2. TOAST UI Chart

    JavaScript

    多彩なチャートを描画できる「TOAST UI Chart」

    TOAST UI Chartは多彩なチャートをWebページに描画できる…

  3. JavaScript

    リスト化した要素を自分が指定した数に分割できるjQueryプラグイン「Easy List Split…

    リスト化した要素を自分が指定した数に分割できるシンプルだけど便利なjQ…

  4. JavaScript

    チルトシフト効果でミニチュア風の写真に仕上げてくれるjQueryプラグイン「tiltShift.js…

    指定した画像にチルトシフト効果をプラスしてミニチュア風にしてくれるjQ…

  5. no-image

    JavaScript

    トップに素早く戻れるボタンを実装できるjQueryプラグイン「TopButton」

    TopButtonはボタンをクリックするだけで画面トップに素早く戻れる…

  6. no-image

最近の記事

  1. VS-543AS
  2. タリーズ 本日のコーヒー
  3. MRW-G1
  4. 桜と太陽

アーカイブ

PAGE TOP