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

関連記事

  1. JK Responsive Youtube Video and Image Gallery
  2. Erge Drop Down Menu Control
  3. photowall

    JavaScript

    Google画像検索のようにサムネイル画像をクリックするとスライド表示されるjQueryプラグイン「…

    Google画像検索のようなアニメーションを実装することができるjQu…

  4. jqTree

    JavaScript

    JSONデータからツリー構造を作成できるjQueryプラグイン「jqTree」

    jqTreeはJSONデータを元にHTMLでツリー構造を作成できるjQ…

  5. hsimp

    JavaScript

    パスワードの安全性を教えてくれる「hsimp」

    hsimpは、パスワードがどれだけ安全かを判定してくれるスクリプトです…

  6. timedropper

    JavaScript

    時刻を指定しやすくしてくれるjQueryのタイムピッカー「timedropper」

    timedropperは時刻の指定をしやすいUIを実装できるjQuer…

最近の記事

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

アーカイブ

PAGE TOP