スクロール量に合わせて変化を与えるコード ScrollMe.js

ScrollMe

https://github.com/nckprsn/scrollme/blob/master/jquery.scrollme.js

scrollme

タグにdataを指定することで、それを元にスクロールに合わせて変化を与えることが出来るコード

効果が与えられる項目は

‘opacity’ : 1
‘translatex’ : 0
‘translatey’ : 0
‘translatez’ : 0
‘rotatex’ : 0
‘rotatey’ : 0
‘rotatez’ : 0
‘scale’ : 1
‘scalex’ : 1
‘scaley’ : 1
‘scalez’ : 1

それぞれの数値がデフォルとの値となっています

スクロールの対象には scrollme というクラス名を
アニメーションの対象には animateme というクラス名をつけることで指定します

アニメーションの変化や動作は animateme のクラスがついた要素にdataとして指定します

コード

HTML

<div class="wrapper scrollme">
  <div 
    class="animateme progress_circle progress_pie"
    data-when="span"
    data-from="0"
    data-to="1"
    data-easing="linear"
    data-rotatez="315"
    data-scalex="2"
    data-scaley="2"
    data-opacity="1"
  ></div>

<!--途中 省略-->

</div>

HTMLではこのように指定します