Hướng dẫn nhanh: Hiệu ứng cuộn với fullPage.js và Animate.css

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

Trong một hướng dẫn trước, tôi đã giới thiệu với bạn fullPage.js, một plugin jQuery phổ biến để xây dựng các trang web toàn màn hình. Trong hướng dẫn nhanh này, tôi sẽ hướng dẫn bạn làm thế nào để tạo ra các hiệu ứng dựa trên việc cuộn trang với fullPage.js và animate.css.

Các thư viện cần thiết

Để phục vụ cho mục đích của ví dụ này, tôi sẽ thiết lập một trang demo. Nếu bạn nhìn vào tab Settings, bạn sẽ thấy tôi đã thêm các thư viện sau đây vào pen:

fullPage.js
animate.css
jQuery
Bootstrap

Framework Bootstrap không phải là yếu tố bắt buộc; tôi thêm nó chỉ vì tôi muốn tận dụng các phong cách sẵn có của nó.

Các bước thực hiện

Trang web của chúng ta bao gồm bốn phần; mỗi cái đóng vai trò như một trang (cảm ơn fullPage). Người dùng sẽ nhảy đến phần kế tiếp bằng cách cuộn, hoặc điều hướng thông qua các liên kết số thứ tự trang ở bên phải. Mỗi lần điều đó xảy ra chúng ta sẽ kích hoạt một số hiệu ứng, ví dụ như di chuyển các tấm hình vào vị trí.

Trước khi đưa ra đoạn mã thực thi các hiệu ứng, trước tiên hãy tìm hiểu các bước cần thiết:

Chúng ta cần tận dụng các hàm "callback" mà fullPage cung cấp. Cụ thể hơn, trong trường hợp của chúng ta, chúng ta muốn tạo hiệu ứng cho phần thứ hai, thứ ba và thứ tư, vì vậy chúng ta sẽ sử dụng hàm callback onLeave. Nếu bạn muốn tạo hiệu ứng cho phần đầu tiên, chúng ta có thể sử dụng hàm callback afterLoad. Cách tương tự để tạo hiệu ứng trượt chúng ta sẽ sử dụng các hàm afterSlideLoad và onSlideLeave.
Chúng ta chủ động thêm các hiệu ứng CSS được cung cấp bởi thư viện animate.css sử dụng jQuery.
Chúng ta cũng sẽ tạo hiệu ứng cho các phần tử một cách tuần tự sử dụng thuộc tính animate-delay của CSS.

Bây giờ hãy đi sâu vào các hiệu ứng!

Hiệu ứng #1

Phần thứ hai của trang bao gồm ba tấm hình và một nút bấm. Dưới đây là cấu trúc:

      <section class="section second">
          <div class="container">
              <div class="row">
                  <div class="col-sm-4 is-animated">
                      <img class="img-responsive" src="https://placeimg.com/300/350/nature">
                  </div>
                  <div class="col-sm-4 is-animated">
                      <img class="img-responsive" src="https://placeimg.com/300/350/people">
                  </div>
                  <div class="col-sm-4 is-animated">
                      <img class="img-responsive" src="https://placeimg.com/300/350/tech">
                  </div>
                  <div class="col-xs-12 text-center is-animated__single">
                      <button type="button" class="btn btn-lg">A Simple Button</button>
                  </div>
              </div><!--end of row-->
          </div><!--end of container-->
      </section>

Lưu ý rằng chúng ta đã thêm các lớp is-animated và is-animated__single vào các phần tử mà chúng ta muốn tạo hiệu ứng. Ngoài ra, hãy nhớ rằng các phần tử với lớp is-animated sẽ chia sẻ hiệu ứng tương tự (ví dụ fadeInUpBig).

Mã jQuery kích hoạt các hiệu ứng cho phần này trông giống thế này:

      var $isAnimatedSecond = $('.second .is-animated'),
          $isAnimatedSecondSingle = $('.second .is-animated__single');

      /* this code is part of the onLeave callback */    
      if( index == 1 && nextIndex == 2 ) {
          $isAnimatedSecond.addClass('animated fadeInUpBig'); 
          $isAnimatedSecond.eq(0).css('animation-delay', '.3s');
          $isAnimatedSecond.eq(1).css('animation-delay', '.6s');
          $isAnimatedSecond.eq(2).css('animation-delay', '.9s');
          $isAnimatedSecondSingle.addClass('animated rollIn').css('animation-delay', '1.7s');
      }

Trong ví dụ này, khi qua khỏi phần đầu tiên và di chuyển đến một cái thứ hai, chúng ta áp dụng hai hiệu ứng khác nhau (tức là fadeInUpBig và rollIn) các phần tử mong muốn. Ngoài ra, chúng ta sử dụng thuộc tính CSS animation-delay để xác định khi nào những hiệu ứng động sẽ bắt đầu.

Hiệu ứng #2

Phần thứ ba chứa hai hình ảnh và một nút bấm. Dưới đây, bạn có thể thấy mã HTML tương ứng:

      <section class="section third">
        <div class="container">
      		<div class="row">
      			<div class="col-sm-3 col-sm-offset-3 is-animated">
      				<img class="img-responsive" src="https://placeimg.com/300/350/tech">
      			</div>
      			<div class="col-sm-3 is-animated">
      				<img class="img-responsive" src="https://placeimg.com/300/350/any">
      			</div>
      			<div class="col-xs-12 text-center is-animated__single">
      				<button type="button" class="btn btn-lg">A Simple Button</button>
      			</div>
      		</div><!--end of row-->
      	</div><!--end of container-->
      </section>

Cũng như với ví dụ trước, chúng ta đã thêm các lớp is-animated và is-animated__single vào các phần tử mong muốn.

Mã jQuery trông như sau:

        var $isAnimatedThird = $('.third .is-animated'),
            $isAnimatedThirdSingle = $('.third .is-animated__single');

        /* this code is part of the onLeave callback */
        if( ( index == 1 || index == 2) && nextIndex == 3 ) {
            $isAnimatedThird.eq(0).addClass('animated fadeInRightBig').css('animation-delay', '.3s'); 
            $isAnimatedThird.eq(1).addClass('animated fadeInLeftBig').css('animation-delay', '.6s');
            $isAnimatedThirdSingle.addClass('animated bounceInDown').css('animation-delay', '1.2s');
        }

Trong phần này, chúng ta sử dụng hiệu ứng fadeInRightBig và fadeInLeftBig để hiển thị các tấm ảnh một cách tuần tự. Hơn nữa, chúng ta hiển thị các nút sử dụng hiệu ứng bounceInDown.

Hiệu ứng #3

Phần thứ tư bao gồm ba phần tử: hai đoạn văn và một nút. Hãy xem cách mà nó được cấu trúc ở dưới đây:

      <section class="section fourth">
      	<div class="container">
      		<div class="row">
      			<div class="col-xs-12 is-animated">
      				<p>Some text here</p>
      			</div>
      			<div class="col-xs-12 is-animated">
      				<p>Some text here</p>
      			</div>
      			<div class="col-xs-12 text-center is-animated__single">
                	<button type="button" class="btn btn-lg">Thank You!</button>
        		</div>
      		</div><!--end of row-->
      	</div><!--end of container-->
      </section>

Một lần nữa, lưu ý rằng chúng ta đã cho các phần tử mong muốn các lớp is-animated và is-animated__single.

Tiếp theo, hãy nhìn vào đoạn mã jQuery cho hiệu ứng:

      var $isAnimatedFourth = $('.fourth .is-animated'),
          $isAnimatedFourthSingle = $('.fourth .is-animated__single');

      /* this code is part of the onLeave callback */
      if( ( index == 1 || index == 2 || index == 3 ) && nextIndex == 4 ) {
          $isAnimatedFourth.addClass('animated zoomIn').css('animation-delay', '.6s');
          $isAnimatedFourthSingle.addClass('animated lightSpeedIn').css('animation-delay', '1.2s')
          $isAnimatedFourthSingle.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
          $(this).removeClass('lightSpeedIn').addClass('zoomOutDown');
          });
      }

Ở đây, cả hai đoạn văn xuất hiện cùng một lúc bằng cách sử dụng hiệu ứng zoomIn. Ngược lại, các nút xuất hiện bằng cách sử dụng hiệu ứng lightSpeedIn.

Hơn nữa, các mã sau đây sẽ giúp chúng ta xác định khi nào một hiệu ứng kết thúc:

      $('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething);

Trong ví dụ của chúng ta, chúng ta hiển thị các nút chỉ trong vài giây và sau đó chúng ta tận dụng lợi thế của đoạn mã nói trên để ẩn nó đi.

Dưới đây bạn có thể thấy demo được nhúng từ Codepen (tuy vậy bản demo trang đầy đủ sẽ hoạt động hiệu quả hơn):

Kết luận

Trong hướng dẫn nhanh này, chúng ta đã học được cách kết hợp các thư viện fullpage.js và animate.css để xây dựng các hiệu ứng dựa trên việc cuộn trang.

Nếu bạn muốn nâng cao bản demo này, đây là hai thứ bạn có thể thử:

Cho phép các hiệu ứng chỉ có trên màn hình lớn. Để đạt được điều này, sử dụng phương thức matchMedia.
Làm cho đoạn mã bên trong hàm onLeave có thể được tái sử dụng tốt hơn.