Classを付けるだけで要素が画面上までスクロールした時に要素を動かすJavascriptライブラリ【ScrollEffect.js】

• Date：2017-06-14
• Category：Javascript
• Tags：HTML, css, jQuery, Javascript
• Response：Comments 0
• Tweet

  

  Pocket
  
  

パララックスと言うか、ページをスクロールして、画面内に要素が現れたら要素を移動・変化させるプラグインは数あれど、使い方が良くわからなかったり何かと面倒です。
なので、classをつけるだけで動くライブラリを作って見ました。

ScrollEffect.js　とは？

Download ScrollEffect.zip

ScrollEffect.jsは、要素にclassをつけるだけで、ページをスクロールしてclassを付けた要素が画面内までくると、ファードインをさせたり、移動・変化をさせることができます。

とはいっても、動き的には、要素が画面内に現れた時に「pActive」というclassを付けているだけになります。
なので特にCSSを指定なければ、要素を動かさないで、画面上に現れた時にclassを付けるだけといったことも出来ます。

cssで動きを付けられる方は使いやすいのではないでしょうか！？

ScrollEffect.jsに初めから用意されている動きは4つあります。

1. 下から上にフェードインしながら表示させる
2. 位置はそのままにその場でフェードインさせる
3. 直下の子要素を連続で、下から上にフェードインしながら表示させる
4. 直下の子要素を連続で、位置はそのままにその場でフェードインさせる

また、オプション設定を3つ用意しています。

1. 画面上までスクロールしてから、更に+○○pxスクロールした時に実行できるようにする
2. 直下の子要素の連続変化の時間差を指定できる
3. classを自由に追加できるので、動きを自分で登録できる。

機能としてはとてもシンプルですが、独自の動きをclassに登録することができるので、動きを使いまわす際に、要素に対してclassをつけるだけで実行できます。
動きを自分で登録しないと行けないとというデメリットはありますが、一度登録してしまえば、簡単に使いまわす事ができるので、とても楽になります。

あと、これらの動きを使っているサイト全判そうですが、このJsは、ページが全て読み込み終わってから動き出すので、画像など重いサイトはローディング画面が必要になるかもしれません。なにげにこのサイトも重いので、動き出すまで少し時間がかかります汗
すぐ起動させたい場合は、jsファイルのloadをreadyにしたり各自調整をお願いします。

使い方

ダウンロードしたScrollEffect.zipを解答して中に入っている2つのファイルを読み込ませます。
次にjQuery本体を読み込ませます。最新バージョンのjQueryでも動くことは確認しています。

それでは次から、予め登録してある動きをサンプル付きで紹介します。

1. 下から上にフェードイン

要素が画面内までスクロールされると、フェードインしながら現れると同時に、下から上に移動しながら表示されます。

動く時間、移動距離はCSSファイル内で制御していますが、そこまで複雑では無いので、変更方法は記載いたしません。

htmlの記述方法

対象の要素に対して、「pSimple1」というclassをつけます。

動きサンプル

2. その場でフェードイン

要素が画面内までスクロールされると、フェードインしながら表示されます。
要素の移動はありません。

htmlの記述方法

対象の要素に対して、「pSimple2」というclassをつけます。

動きサンプル

3. 連続して下から上にフェードイン

親要素が画面上に表示されると、その直下の子要素を時間差で連続で表示させます。

動きは、フェードインしながら現れると同時に、下から上に移動しながら表示されます。

また、指定できる直下の子要素は「LI」と「DIV」ですが、指定したい要素をCSSに追加記述してあげれば、「SPAN」等も指定できます。

htmlの記述方法

対象の要素の親要素に対して、「pMultiple1」というclassをつけます。

動きサンプル

4. 連続してその場でフェードイン

親要素が画面上に表示されると、その直下の子要素を時間差で連続で表示させます。

動きは、フェードインしながら表示されます。要素の移動はありません。

また、指定できる直下の子要素は「LI」と「DIV」ですが、指定したい要素をCSSに追加記述してあげれば、「SPAN」等も指定できます。

htmlの記述方法

対象の要素の親要素に対して、「pMultiple2」というclassをつけます。

動きサンプル

5. 表示開始する位置 ／ 連続表示の遅延

場合によっては、画面の真ん中付近で実行したい。連続した子要素の時間を遅くしたいといったことも有るかと思います。
そんな時の為に、2つのオプションを設定できます。

サンプルでは、位置に300、時間差を500で指定してあります。ですので、サンプル3番目より下までスクロールさせて動きだし、次の子要素が表示されるまでの感覚も長めになっています。
指定なしの初期設定の値：
位置：100
時間差：200

htmlの記述方法

画面下からの距離の指定は「data-p-posi=”○○”」で、○○のところに数字を入れます。
サンプルでは「pMultiple1」を指定していますが、「pSimple1」でも、自分で追加したclassでもなんでも大丈夫です。

子要素の時間差の指定は「data-p-speed=”○○”」で、○○のところに数字を入れます。
こちらは「pMultiple1」や「pMultiple2」など、親要素に対してつけるclassに対応します。親要素用のclassなら自分で追加したclassでも大丈夫です。

動きサンプル

独自clasの追加方法

違う動きをさせたい時は、元あるclassに指定してあるcssを変更しても大丈夫ですが、独自のclassを追加することで、自由に動きを追加登録していくことができます。

Jsの記述方法

class名の追加はJsファイルに直接記述していきます。該当箇所は15〜16行目です。

class名は何でも大丈夫で、カンマ区切りで追加していきます。

下記は、サンプルで「customS」と「customM」という2つを追加した例です。

cssの記述方法

それぞれの必要最低限のCSSを記載します。

下記サンプルは、単純なフェードインの必要最低限の記述です。
これをテンプレートに色々な動きを追加してみてください。

追加classを使ったサンプル

参考に上記サンプルの動き部分だけのcssを記載して起きます。