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. Accordion.JS

    JavaScript

    クイックな開閉で使いやすいアコーディオン実装「Accordion.JS」

    Accordion.JSは、開閉の動作がクイックで使いやすいアコーディ…

  2. jQuery Bar Rating

    JavaScript

    選択範囲を評価ウィジェットに変換できる「jQuery Bar Rating」

    jQuery Bar Ratingは、ユーザーが選択する範囲を評価ウィ…

  3. Kerning.js

    JavaScript

    文字間のカーニングや一部の色を変えたりできるjQueryプラグイン「Kerning.js」

    文字間のカーニングや一部の文字の色を変えたりできるjQueryプラグイ…

  4. Switch

    JavaScript

    iOSスタイルのシンプルなチェックボックスを実装できる「Switch」

    Switchは、シンプルでパワフルなiOSスタイルのチェックボックスを…

  5. no-image
  6. jquery.confirm

    JavaScript

    jQueryとBootstrapを使ったボタンとリンクによるダイアログ実装「jquery.confi…

    jquery.confirmは、ページ内のボタンやリンクをクリックする…

最近の記事

  1. ADR-3ML39シリーズ
  2. キュレル モイスチャーバーム
  3. FUJIFILM X-Pro3
  4. iPhone 11 ProとApple Watch Hermès
  5. cheero Energy Plus mini Wireless 4400mAh

アーカイブ

PAGE TOP