Share plugin jQuery thêm hiệu ứng parallax scroll vào trang web

Để thêm hiệu ứng parallax vào trang web đơn giản thì chúng ta có thể sử dụng plugin jQuery có tên là parlx. Nếu các bạn chưa biết hiệu ứng parallax là gì thì có thể Google nhé, đây là một hiệu ứng khá là thú vị, nếu làm thủ công thì cũng mất khá nhiều công sức và hiệu ứng cũng không thể lựa chọn đa dạng như sử dụng plugin được. parlx tạo hiệu ứng parallax thông qua việc thay đổi vị trí của background thông qua CSS3 2D transforms (translateY).

Trang chủ:

parlx – GitHub

Hướng dẫn sử dụng:

1. Thêm thư viện jQuery và parlx vào cuối trang:

   <script src="//code.jquery.com/jquery-3.2.1.slim.min.js"></script>
   <script src="js/parlx.js"></script>

2. Thêm background vào parallax container:

   <section class="parallax">
     <div class="bgimg" style="background-image: url(1.jpg);">
     </div>
   </section>

3. Phần CSS cần phải có:

   .parallax {
     z-index: 10;
     position: relative;
     height: 400px;
     overflow: hidden;
   }
   
   .bgimg {
     position: absolute;
     background-repeat: no-repeat;
     background-size: cover;
   }

4. Kích hoạt hiệu ứng parallax khi window load/resize/scroll:

   $(window).on("load resize scroll", function() {
     $('.bgimg').parlx();
   });

5. Thay đổi tốc độ chuyển động mặc định:

   $(window).on("load resize scroll", function() {
     $('.bgimg').parlx({
       speed: 0.3
     });
   });

6. Lựa chọn chiều cao tùy chỉnh:

   $(window).on("load resize scroll", function() {
     $('.bgimg').parlx({
       height: '400px'
     });
   });

7. Kích hoạt hoặc không hiệu ứng trên thiết bị di động:

   $(window).on("load resize scroll", function() {
     $('.bgimg').parlx({
       mobile: true
     });
   });

8. Chọn hướng chuyển động:

   $(window).on("load resize scroll", function() {
     $('.bgimg').parlx({
       direction: 'vertical', // or horizontal, diagonal
     });
   });

9. Set parallax cho image hoặc div:

   $(window).on("load resize scroll", function() {
     $('.bgimg').parlx({
       type: 'back' // or front
     });
   });

10. Các bạn cũng có thể thêm callback:

    $(window).on("load resize scroll", function() {
      $('.bgimg').parlx({
        on<a href="https://www.jqueryscript.net/tags.php?/Scroll/">Scroll</a>: null, // call function on window scroll
        onResize: null // call function on window resize
      });
    });

11. Bạn cũng có thể đặt hiệu ứng parallax cho content thông qua các thuộc tính data-:

    data-height="700px"
    data-speed="0.1"
    data-mobile="false"
    data-direction="vertical"
    data-type="back"

Các bạn có thể xem demo và download tại đây.