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. Rainbow.js
  2. jquery-steps

    JavaScript

    ステップ式のウィザードを実装できるjQueryプラグイン「jquery-steps」

    jquery-stepsは、ステップ式のウィザードを実装することができ…

  3. Trunk.js

    JavaScript

    滑らかなスライド表示がいい!レスポンシブなナビゲーションメニュー「Trunk.js」

    Trunk.jsはレスポンシブに対応したナビゲーションメニューを実装す…

  4. slideSpeed

    JavaScript

    スライドアップ・ダウンを設定された速度で制御できる「slideSpeed」

    slideSpeedは、特定の要素のスライドアップ・スライドダウンを設…

  5. A simple jQuery Accordion with unlimited nesting

    JavaScript

    シンプルなアコーディオンを実装する「A simple jQuery Accordion with u…

    シンプルで見やすいアコーディオンを実装することができる「A simpl…

最近の記事

  1. ペットボトルホルスター
  2. SRS-XB43
  3. Nu:kin

アーカイブ

PAGE TOP