Skrollr

概要

  • 卷軸滾動觸發動畫
  • Github 技術文件
  • CDN: https://cdn.jsdelivr.net/skrollr/0.6.30/skrollr.min.js

定位方式

  • 絶對定位
    //動畫由頂部到高度200的情況
    data-0="指定CSS (始値) ",
    data-200="指定CSS (終値) "
  • 相對定位(參考文件)※方便RWD
    //動畫由從視窗底部開始,隨著卷軸滾動到元素中心停止
    data-bottom-top="指定CSS (始値)"
    data-center="指定CSS (終値) "

注意事項

  1. 顏色只能指定 rgb() 或是 rgba()
  2. 屬性的CSS,必須要有對應的初始値與終値
  3. JavaScript 要加入一行初始値設定
  4. var s=skrollr.init();

範例

絶對定位

.fixed-center
 .box(
 data-0="transform: scale(1) rotate(0deg);background-color: rgb(0,0,0)"
 data-200="transform: scale(4) rotate(0deg);background-color: rgb(255,0,0)"
 data-450="transform: scale(4) rotate(45deg);background-color: rgb(255,0,0)"
 data-650="transform: scale(8) rotate(360deg);background-color: rgb(255,255,0); border: solid 1px rgba(0,0,0,0); border-radius: 0%"
 data-850="transform: scale(8) rotate(360deg);background-color: rgb(255,255,0); border: solid 1px rgba(0,0,0,1); border-radius: 100%"
 )
body
 height: 2000px

.fixed-center
 position: fixed
 left: 50%
 top: 50%
 transform: translateX(-50%)
 transform: translateY(-50%)

.box
 width: 50px
 height: 50px
 background-color: #222
var s=skrollr.init();

Display

CODPEN

相對定位

h3(data-bottom-top="opacity: 0; color: rgb(144, 169, 85)", data-center="opacity: 1; color: rgb(36, 38, 15)") 動畫由從視窗底部開始,隨著卷軸滾動到元素中心停止。<br>適合用在位於網頁中下方的元素
var s=skrollr.init();

Display

動畫由從視窗底部開始,隨著卷軸滾動到元素中心停止。
適合用在位於網頁中下方的元素

Leave a Reply

Your email address will not be published. Required fields are marked *