摘要：現在很多網站都有這種效果，我就整理了一下，分享出來。利用滾動條來實現動畫效果，ScrollReveal.js 用于創建和管理元素進入可視區域時的動畫效果，幫助你的網站增加吸引力。只需要給元素增加 da...

現在很多網站都有這種效果，我就整理了一下，分享出來。

利用滾動條來實現動畫效果，ScrollReveal.js 用于創建和管理元素進入可視區域時的動畫效果，幫助你的網站增加吸引力。只需要給元素增加 data-scroll-reveal 屬性，當元素進入可視區域的時候會自動被觸發設置好的動畫。

和 WOW.js 一樣，scrollReveal.js 也是一款頁面滾動顯示動畫的 JavaScript，能讓頁面更加有趣，更吸引用戶眼球。不同的是 WOW.js 的動畫只播放一次，而 scrollReveal.js 的動畫可以播放一次或無限次；WOW.js 依賴 animate.css，而 scrollReveal.js 不依賴其他任何文件。

雖然 scrollReveal.js 不依賴 animate.css，但它的動畫也是用 CSS3 創建的，所以它不支持 IE10 以下的瀏覽器。

1、引入文件

<script type="text/javascript" src="js/scrollReveal.js"></script>

2、html頁面

必須給元素加上 data-scroll-reveal 屬性，加上之后會執行默認的動畫效果，你也可以自定義改屬性以顯示不同的動畫效果，如：

<div data-scroll-reveal="enter left and move 50px over 1.33s">YzmCMS官方博客</div>
<div data-scroll-reveal="enter from the bottom after 1s">ScrollReveal</div>
<div data-scroll-reveal="wait 2.5s and then ease-in-out 100px">ScrollReveal</div>

3、JavaScript

<script type="text/javascript">
if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))){
		(function(){
			window.scrollReveal = new scrollReveal({reset: true});
		})();
};
</script>

data-scroll-reveal屬性：

上面說了可以自定義 data-scroll-reveal 屬性，下面來看看該屬性的關鍵詞和值（可選）。

enter
說明: 動畫起始方向
值: top | right | bottom | left
move
說明: 動畫執行距離
值: 數字，以 px 為單位
over
說明: 動畫持續時間
值: 數字，以秒為單位
after/wait
說明: 動畫延遲時間
值: 數字，以秒為單位
填充（可選）
可以在 data-scroll-reveal 屬性里填充（添加）一些類似編程的“語句”，使其更有可讀性，scrollReveal.js 支持以下“語句”：
from
the
and
then
but
with