1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. CSS
  6. »
  7. Waypoints.js+Animation.css 滾動網頁讓頁面區塊咚吱咚吱的動起來
CSS js 網頁開發

Waypoints.js+Animation.css 滾動網頁讓頁面區塊咚吱咚吱的動起來

2020/06/12

梅問題-Waypoints.js+Animation.css,滾動網頁讓頁面區塊咚吱咚吱的動起來
  很早之前梅干曾分享過waypoints.js這個套件,透過waypoints.js套件可自動偵測,目前使用者滾動畫面的狀況,進而去觸發它並加入所需的CSS樣式,如此一來就可作到,網頁區塊中的淡入淡出、縮放、彈跳….等效果。

  除了可加入這些轉場的特效外,其實還可以加入CSS3的動畫特效,如此一來區塊出現的變化就變得更靈活,而這些像搖擺彈出、搖晃、反彈、翻轉….等特效,其實不用自己寫,只需套用Animate.css,以及Waypoints.js就可讓網頁動起來,且過程中完全不用寫code,只要修改參數即可,因此想要讓你的網頁動起來的朋友,現在就一塊來看看吧!


所需素材
Step1
首先,先將CSS3的動畫套件,加入到網頁的<head>~</head>之間。
<link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/animate.css/3.1.0/animate.css">

Step2
接著再將jquery與waypoints加入到</body>前,而這邊只有在offset的地方,可自行設定,畫面滾動的觸發範圍。
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.js"></script>
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.4/waypoints.min.js"></script>
<script>
$(function(){
  function onScrollInit( items, trigger ) {
      items.each( function() {
      var element = $(this),
          animationClass = element.attr('data-animation'),
          animationDelay = element.attr('data-animation-delay');

      element.css({
          <span style="background-color: #fff0f0">&#39;-webkit-animation-delay&#39;</span><span style="color: #333333">:</span>  animationDelay,
          <span style="background-color: #fff0f0">&#39;-moz-animation-delay&#39;</span><span style="color: #333333">:</span>     animationDelay,
          <span style="background-color: #fff0f0">&#39;animation-delay&#39;</span><span style="color: #333333">:</span>          animationDelay
      });

      <span style="color: #008800; font-weight: bold">var</span> Trigger <span style="color: #333333">=</span> ( trigger ) <span style="color: #333333">?</span> trigger <span style="color: #333333">:</span> element;

      Trigger.waypoint(<span style="color: #008800; font-weight: bold">function</span>() {
          element.addClass(<span style="background-color: #fff0f0">&#39;animated&#39;</span>).addClass(animationClass);
          },{
              triggerOnce<span style="color: #333333">:</span> <span style="color: #008800; font-weight: bold">true</span>,
              offset<span style="color: #333333">:</span> <span style="background-color: #fff0f0">&#39;90%&#39;//觸動的範圍</span>
      });
  });

}

onScrollInit($('.animation')); onScrollInit($('.animation'), $('.animation-container')); });//]]> </script>


Step3
接著HTML的部分,若是單一區塊,在class的地方,用animation,若是群組的話,請更改為animation-container,而data-animation是CSS3的動畫名稱,data-animation-dalay延遲時間。
<section class="animation" data-animation="fadeInLeft" data-animation-delay="0s">

Step4
因此這時,可到Animate.css的官網,並且右邊的選單中,可看到各式各樣的動畫特效,等一下立即就會播放,當相中喜歡的,再點特效後方的方框,就可將特效的名稱複製起來。
梅問題-Waypoints.js+Animation.css,滾動網頁讓頁面區塊咚吱咚吱的動起來
Step5
接著再貼到data-animation中,並將animate__的文字拿掉。
梅問題-Waypoints.js+Animation.css,滾動網頁讓頁面區塊咚吱咚吱的動起來
Step6
這樣就大功告成囉!各位可看下方的範例展示。
梅問題-Waypoints.js+Animation.css,滾動網頁讓頁面區塊咚吱咚吱的動起來
#範例預覽