ScrollReveal-元素隨頁面滾動產生動畫的js外掛
阿新 • • 發佈：2018-11-17
簡介
和 WOW.js 一樣，scrollReveal.js 也是一款頁面滾動顯示動畫的 JavaScript，能讓頁面更加有趣，更吸引使用者眼球。不同的是 WOW.js 的動畫只播放一次，而 scrollReveal.js 的動畫可以播放一次或無限次；WOW.js 依賴 animate.css，而 scrollReveal.js 不依賴其他任何檔案。
雖然 scrollReveal.js 不依賴 animate.css，但它的動畫也是用 CSS3 建立的，所以它不支援 IE10 以下的瀏覽器。
IE6、IE7 等老舊瀏覽器不支援 CSS3 動畫，所以沒有效果，並且因為不支援一些屬性或方法會報錯。為了達到更好的相容，最好加一個瀏覽器及版本判斷。
演示及下載
安裝
可以通過npm或bower來安裝scrollreveal.js外掛。
npm install scrollreveal
bower install scrollreveal
也可以直接引入檔案
<script src="js/scrollReveal.js"></script>
使用方法
HTML結構：
<!-- HTML --> <div class="foo"> Foo </div> <div class="bar"> Bar </div>
JavaScript：
window.sr = ScrollReveal();
sr.reveal('.foo');
sr.reveal('.bar');
鏈式程式設計方法
ScrollReveal的建構函式和它主要的方法都支援鏈式程式設計。
window.sr = ScrollReveal();
sr.reveal('.foo');
sr.reveal('.bar');
// 上面的程式碼和下面的程式碼效果相同
window.sr = ScrollReveal().reveal('.foo, .bar');
配置引數
可以通過傳入一個配置引數物件到ScrollReveal()中來修改預設的引數設定。也可以通過向reveal()中插入配置引數物件來自定義動畫集合。
// 修改預設配置
window.sr = ScrollReveal({ reset: true });
// 自定義一個動畫集合
sr.reveal( '.foo', { wait: 200 } );
預設引數
// Animation
origin : 'bottom',
distance : '20px',
duration : 500,
delay : 0,
rotate : { x: 0, y: 0, z: 0 },
opacity : 0,
scale : 0.9,
easing : 'cubic-bezier( 0.6, 0.2, 0.1, 1 )',
// Options
container : null,
mobile : true,
reset : false,
useDelay : 'always',
viewFactor : 0.20,
viewOffset : { top: 0, right: 0, bottom: 0, left: 0 },
afterReveal : function( domEl ) {},
afterReset : function( domEl ) {}
引數描述
| 引數 | 型別 | 可用值 | 描述 |
| origin | string | 'top','right','bottom','left' | 動畫的方向 |
| distance | string | 可用任何CSS單位值，如：'20px','10vw','5%' | 動畫的距離 |
| duration | number | 500 | 動畫持續時間，單位毫秒 |
| delay | number | 0 | 動畫的延遲時間，單位毫秒 |
| rotate | object/number | { x: 0, y: 0, z: 0 } | 開始的角度，單位degrees |
| opacity | number | 0 | 開始的透明度 |
| scale | number | 0.9 | 開始的縮放值 |
| easing | string | 'ease' 'ease' 'ease-out' 'ease-in-out' 'ease-in-out' |
動畫的easing效果，可以是任何有效的CSS easing值 |
| container | node | document.getElementById('foo') | 容器 |
| mobile | boolean | true / false | 是否在移動手機上顯示動畫效果 |
| reset | boolean | true / false | 元素是否在容器邊界內來回滾動時都產生動畫效果 |
| useDelay | string | 'always','once','onload' | 控制元素什麼時候使用動畫延遲 |
| viewFactor | number | 0.20 | 0.20表示元素在產生動畫之前，它的20%在viewport或容器的邊界之內 |
| viewOffset | object/number | { top: 48, bottom: 24 } | 增加viewport或容器邊界，單位畫素 |
| afterReveal | function | function( domEl ) {} | reveal動畫之後觸發的回撥函式 |
| afterReset | function | function( domEl ) {} | reset動畫之後觸發的回撥函式 |
高階應用
覆蓋配置
reveal()方法中的呼叫元素可以隨時進行修改。例如：
<div class="foo"> Foo </div>
<div class="foo" id="chocolate"> Chip </div>
var fooReveal = {
delay : 200,
distance : '90px',
easing : 'ease-in-out',
rotate : { z: 10 },
scale : 1.1
};
window.sr = ScrollReveal()
.reveal( '.foo', fooReveal )
.reveal( '#chocolate', { delay: 500, scale: 0.9 } );
配置多個容器
預設的容器是viewport，你可以對它進行修改。
<div id="fooContainer">
<div class="foo"> Foo 1 </div>
<div class="foo"> Foo 2 </div>
<div class="foo"> Foo 3 </div>
</div>
<div id="barContainer">
<div class="bar"> Bar 1 </div>
<div class="bar"> Bar 2 </div>
<div class="bar"> Bar 3 </div>
</div>
var fooContainer = document.getElementById('fooContainer');
var barContainer = document.getElementById('barContainer');
window.sr = ScrollReveal()
.reveal( '.foo', { container: fooContainer } );
.reveal( '.bar', { container: barContainer } );
非同步呼叫內容
可以通過sync()方法來非同步載入已經存在的reveal sets中的內容。
!-- index.html -->
<div id="container">
<div class="foo">foo</div>
<div class="foo">foo</div>
<div class="foo">foo</div>
</div>
<!-- ajax.html -->
<div class="foo">foo async</div>
<div class="foo">foo async</div>
<div class="foo">foo async</div>
var fooContainer, content, sr, xmlhttp;
fooContainer = document.getElementById('fooContainer');
sr = ScrollReveal();
sr.reveal( '.foo', { container: fooContainer } );
// Setup a new asynchronous request...
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if ( xmlhttp.readyState == XMLHttpRequest.DONE ) {
if ( xmlhttp.status == 200 ) {
// Turn our response into HTML...
var content = document.createElement('div');
content.innerHTML = xmlhttp.responseText;
content = content.childNodes;
// Add each element to the DOM...
for ( var i = 0; i < content.length; i++ ) {
fooContainer.appendChild( content[ i ]);
};
// Finally!
sr.sync();
}
}
}
xmlhttp.open('GET', 'ajax.html', true);
xmlhttp.send();
小技巧
載入次序
你需要注意的重要的一點是儘可能在頁面的最後再呼叫ScrollReveal，也就是說：
- 頁面中的DOM元素已經被載入完成。
- 任何第三方的js庫已經被載入。
- 頁面中的元素樣式已經被載入不會在被覆蓋。
示例程式碼如下：
<!DOCTYPE html>
<html>
<body>
<!-- All the things... -->
<script src="js/scrollreveal.min.js"></script>
<script>
window.sr = ScrollReveal();
</script>
</body>
</html>
提升使用者體驗
在大多數情況下，你的元素都是從opacity: 0開始，以使它們可以製作淡入的效果。但是由於JavaScript在頁面開始渲染時才被載入，使用者可能會看到元素閃爍的情況發生。
解決這個問題的方法是在中設定reveal元素的可見性為隱藏狀態。例如下面的程式碼：
<!DOCTYPE html>
<html>
<head>
<script>
// If JavaScript is enabled, add '.js-enabled' to <html> element
document.documentElement.classList.add('js-enabled');
</script>
<style>
/* Ensure elements load hidden before ScrollReveal runs */
.js-enabled .fooReveal { visibility: hidden; }
</style>
</head>
<body>
<!-- All the things... -->
<script src="js/scrollreveal.min.js"></script>
<script>
window.sr = ScrollReveal();
sr.reveal('.fooReveal');
</script>
</body>
</html>
新增3D透視效果
ScrollReveal支援3D旋轉效果，你需要做的是為你的容器指定一個perspective屬性。
<!DOCTYPE html>
<html>
<head>
<script>
document.documentElement.classList.add('js-enabled');
</script>
<style>
.js-enabled .fooReveal { visibility: hidden; }
.fooContainer { perspective: 800px; }
</style>
</head>
<body>
<div class="fooContainer">
<div class="fooReveal"> Foo </div>
<div class="fooReveal"> Foo </div>
<div class="fooReveal"> Foo </div>
</div>
<script src="js/scrollreveal.min.js"></script>
<script>
window.sr = ScrollReveal();
sr.reveal( '.fooReveal', { rotate: {x: 65} } );
</script>
</body>
</html>