ScrollMe

JavaScript

シンプルなスクロールエフェクトを実装できるjQueryプラグイン「ScrollMe」

ScrollMeというjQueryプラグインを使えば、シンプルでスタイリッシュなスクロールエフェクトを実装することができます。スクロールと同時に要素に設定したアニメーションが連動するような感じになるので、ただ表示するだけでは物足りない時なんかに活用してみたいですね。

[ads_center]

ScrollMeの使い方

使い方はとても簡単で、jQuery本体とプラグインファイルを読み込んだ状態で、以下のようにHTMLをマークアップするだけです。タグ内にdata属性を設定していきます。

<div class="scrollme">
    <div
        class="animateme"
        data-when="enter"
        data-from="0.5"
        data-to="0"
        data-opacity="0"
        data-translatex="-200"
        data-rotatez="90"
    >
        サンプル
    </div>
</div>

各data属性に色んな値を指定することで、スクロールエフェクトを実装していきます。その他のJSの設定なんかは特に必要としないので、HTML内で完結できる辺りがお手軽でいいですね。

ScrollMe

jQuery Navobile横スライドが素敵!レスポンシブ対応モバイルナビゲーション「jQuery Navobile」前のページ

jQueryプラグイン・2014年上半期56選まとめ次のページ

関連記事

  1. no-image

    JavaScript

    画像の遅延読み込みを実装できる軽量ライブラリ「Lazyestload.js」

    Lazyestload.jsは画像の遅延読み込み機能を実装できる軽量の…

  2. ssi-modal

    JavaScript

    フレキシブルでパワフルなモーダルウィンドウを実装できる「ssi-modal」

    ssi-modalはカスタマイズ性に優れたフレキシブルでパワフルなモー…

  3. JavaScript

    レスポンシブに対応したビフォーアフター画像を実装できる「before-after.js」

    before-after.jsはシンプルでレスポンシブに対応したビフォ…

  4. JavaScript

    ショータイムが始まる前のスポットライトのようなjQueryプラグイン「Spotlight」

    Spotlightはショータイムが始まる前のスポットライトのようなアニ…

  5. Image Lightbox
  6. JavaScript

    ニュースやお知らせなどに使えるティッカー「jQuery WebTicker」

    ニュースやお知らせなんかに使えるティッカー「jQuery WebTic…

最近の記事

  1. 冬用のふとん
  2. 田沢湖
  3. ゴムの耳栓
  4. ライオンコーヒー(バニラマカダミア)
PAGE TOP