每日一個前端特效（誤）-滾動錨點動畫

經常可以在許多大小網站里看見一種動畫，就是當滾動到某個地方時，就會有對應的動畫出現。

實現方式大概是有一下這麼幾種：

Fullpage.js: GitHub - alvarotrigo/fullPage.js: fullPage plugin by Alvaro Trigo. Create full screen pages fast and simple

官方demo: http://alvarotrigo.com/fullPage/examples/apple.html

這裡實現是藉助了Fullpage的回調，當滾動到某一個模塊時，就給元素添加對應的對話。

在源碼中可以看到：

$(document).ready(function() { $(#fullpage).fullpage({ verticalCentered: false, css3: true, sectionsColor: [#F0F2F4, #fff, #fff, #fff], navigation: true, navigationPosition: right, navigationTooltips: [fullPage.js, Powerful, Amazing, Simple], afterLoad: function(anchorLink, index){ if(index == 2){ $(#iphone3, #iphone2, #iphone4).addClass(active); } $(#infoMenu).toggleClass(whiteLinks, index ==4); }, onLeave: function(index, newIndex, direction){ if (index == 3 && direction == down){ $(.section).eq(index -1).removeClass(moveDown).addClass(moveUp); } else if(index == 3 && direction == up){ $(.section).eq(index -1).removeClass(moveUp).addClass(moveDown); } $(#staticImg).toggleClass(active, (index == 2 && direction == down ) || (index == 4 && direction == up)); $(#staticImg).toggleClass(moveDown, newIndex == 4); $(#staticImg).toggleClass(moveUp, index == 4 && direction == up); }, /* Needed to maintain the fixed position of the element due to problems using translate3d and fixed elements. */ afterRender: function(){ $(#infoMenu).appendTo(body); $(#githubLink, .twitter-share-button).appendTo(body); } }); });

這裡是比較簡單的實現。

第二種方式是：

Wow: GitHub - matthieua/WOW: Reveal CSS animation as you scroll down a page

官網+demo：http://mynameismatthieu.com/WOW/

這種就畢竟簡單，專門為滾動錨點動畫實現的。

通過給元素綁定Anime.css里的動畫，就可以當這個元素被滾動到是觸發。

這裡官方文檔說得很詳細，就不累贅了。

第三種方式是：

ScroollTrigger: GitHub - terwanerik/ScrollTrigger: Triggers classes on html elements based on the scroll position. Uses requestAnimationFrame so it doesnt jack the users scroll.

官網：https://terwanerik.github.io/ScrollTrigger/

它的靈活性比起Wow要大許多，通過給元素添加監聽事件，就可以自己定義當滾動到時哪些樣式生效。