概要
ScrollMeはDOMに動的な動きを加えるJQueryのプラグイン。 JQueryスクリプトの読み込みの後、ScrollMeのサイトからjsスクリプトを読み込んで利用できる。
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="jquery.scrollme.js"></script>
効果を加えたいコンテナーを、scrollmeクラス要素・animatemクラス要素の子要素とする。
<div class="scrollme">
<div class="animateme" [以降パラメーター群]>
[効果を与えたい要素]
</div>
</div>
scrollmeクラスとanimatemeクラスを入れ子にせず、一括指定してもよい。
<div class="scrollme animateme" [以降パラメーター群]>
[効果を与えたい要素]
</div>
パラメーター
パラメーターは全てdata-の接頭辞で始まり、効果の種類、
効果の会タイミング、効果の実行範囲などを指定する、
機能の指定opaticityなど
たとえば不透明度を変化させるならdata-opacity、拡大させるならdata-scaleなどの パラメーターに、それぞれの機能に即した値を指定する。 複数の機能を同時に作用させることも可能。
不透明度～opacity
opacity=[初期不透明度]で要素を透明から不透明に変化させる。
0(透明)～1(不透明)の数値を指定。
data-opacityは
opacity(不透明度)を
変化させます
スライド～translatex/translatey/translatez
translate[x/y/z]=[開始位置]で要素を平行移動させる。
開始位置をピクセルで指定。translatexとtranslateyを同時に指定して
それぞれに初期位置を与えると斜めにスライドする。
data-translatezは動作しない模様。
data-translatexは
要素の横位置を
移動させます
data-translateyは
要素の縦位置を
移動させます
data-translatezは
動作確認が
できませんでした
スケール～scale/scalex/scaley/scalez
scale[x/y/z]=[開始比率]で要素のスケールを変化させる。
開始比率を指定。x/y/zをつけない場合は縦横同時にストレッチ。
data-translatezは動作確認できなかった。
data-scaleは
縦横方向のスケールを
同時に変化させます
data-scalexは
横方向のスケールを
変化させます
data-scaleyは
縦方向のスケールを
変化させます
data-scalezは
動作確認が
できませんでした。
回転～data-rotate[x/y/z]
rotate[x/y/z]=[開始位置]で要素を回転させる。
開始角度をdegreeで指定。translatexとtranslateyを同時に指定して
それぞれに開始角度をあたえると、各軸周りに同時に回転する。
data-rotatexは
水平軸周りに
回転させます
data-rotateyは
垂直軸周りに
回転させます
data-rotatezは
画面直角軸周りに
回転させます
動作開始位置～when
スクロールのどのタイミングで動作を開始するかを指定する。
enter
コンテナーの上端がviewportに入ってから出るまでの間に動作。
data-waite="enter"は
コンテナーの上端が
viewportに入ってから出るまでの間
動作します
exit
コンテナーの下端がviewportに入ってから出るまでの間に動作。
data-waite="exit"は
コンテナーの下端が
viewportに入ってから出るまでの間
動作します
span
コンテナーの上端がviewportに入ってから、下端が出るまでの間に動作。
data-waite="span"は
コンテナーの上端が
viewportに入ってから、下端が出るまでの間
動作します
動作時のポジション～from, to
アニメーション開始／終了のポジションを指定する。0～1の範囲でfromの値 > toの値、とする必要があり、 fromが動作終了ポジション、toが動作開始ポジション。 通常はfrom="1"、to="0"とする。
from="0.3"、to="0"と指定すると
アニメーションが
早く終了します
from="1"、to="0.7"と指定すると
アニメーションの開始が
遅延します
easing, crop
easingは動作の開始・終了時の急変／斬変、cropはコンテナーがページの上端や下端にある場合の 動作の抑制に関するパラメーターだが、ここでは割愛。