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

WS003157
このエントリーをはてなブックマークに追加
PR

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ではこのように指定します

 

  • data-when
  • data-from
  • data-to
  • data-easing

がそれぞれ必須で、あとはdata-●●=””の形で 変化を与えられる項目の数値をそれぞれ指定することが出来ます

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)