Parallax – Tạo hiệu ứng cuộn với thanh menu dọc

Được viết bởi: phuongle (SMod)

Bình luận: 0
0 Lượt chia sẻ
Lượt xem

Parallax – Tạo hiệu ứng cuộn với thanh menu dọc

Độ khó

Dễ

Số bước

Thời gian

Chia sẻ

Chào các bạn, ở phần này chúng ta sẽ tập trung viết script cho thanh menu mà các bạn đã được học ở bài học trước. Sau khi kết thúc bài hôm nay, các bạn có thể tạo được hiệu ứng cuộn đến hình nền tương ứng khi nhấn chuột vào menu như demo. Nào chúng ta cùng bắt đầu.

1. Phần HTML

Trước hết hãy xem qua toàn bộ mã nguồn:

<body>
  <div class="parallax">
    <div class="side-menu">
      <ul>
        <li class="forest" onclick="moveToImage('.forest')" >Forest</li>
        <li class="eagle" onclick="moveToImage('.eagle')" >Eagle</li>
        <li class="rhino" onclick="moveToImage('.rhino')" >Rhino</li>
        <li class="owl" onclick="moveToImage('.owl')" >Owl</li>
        <li class="lion" onclick="moveToImage('.lion')" >Lion</li>
        <li class="bear" onclick="moveToImage('.bear')" >Bear</li>
      </ul>
    </div>
    <div class="forest" ></div>
    <div class="eagle" ></div>
    <div class="rhino" ></div>
    <div class="owl" ></div>
    <div class="lion" ></div>
    <div class="bear" ></div>
    <div class="back" ></div>
  </div>
  
</body>

Ở phần này, chúng ta sẽ thêm vào sự kiện onclickcho từng thẻ li, sau khi người dùng nhấn vào từng thẻ lithì sẽ gọi hàm

onclick = "moveToImage(className)"

Lưu ý là phần này tên class trùng với tên class trong ảnh nền như freetuts đã đề cập trong các bài học trước về cách đặt tên giúp tiện việc xử lý cho các đoạn script.

2. Phần CSS

Trước hết hãy xem qua toàn bộ mã nguồn:

.active {
  padding-left: 50px;
}

Ở phần này, rất đơn giản là tạo một class mới với tên là active. Lưu ý là các thuộc tính trong class này phải giống như cách đặt trong li:hover vì chúng ta muốn tạo ra biến đổi tương tự với hiệu ứng hovertrên thẻ li.

3. Phần JavaScript

Trước hết hãy xem qua toàn bộ mã nguồn:

function moveToImage( elem ) {
  setTimeout( function () {
    $( 'html, body' ).animate({scrollTop: $('div' + elem).offset().top}, 1500);
    setTimeout( function () {
      $( "audio" ).attr("src", elem + ".mp3");
    }, 1500)
  }, 500);
}

Chúng ta sẽ dùng thư viện jQueryđể hỗ trợ cho việc viết script, để tích hợp jQueryvào mã nguồn chúng ta làm như sau:

Bước 1: vào trang https://code.jquery.com/

Bước 2: chọn phiên bản jQuerymới nhất, ở đây ta cho jQuery 3.x.

Bước 3: jQuerycung cấp rất nhiều gói khác nhau, để web xử lý nhanh gọn và hiệu quả ta chọn gói minified.

Bước 4: khi chọn minifiedthì một popupsẽ hiện ra, sau đó sao chép đoạn mã.

Bước 5: dán đoạn mã đã sao chép vào thẻ head

<script
    src="<a href="https://code.jquery.com/jquery-3.3.1.min.js">https://code.jquery.com/jquery-3.3.1.min.js</a>"
    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous">
</script>

Chúng ta bắt đầu tìm hiểu hàm:

moveToImage( elem )

Đầu tiên, ta dùng jQueryđể lấy thành phần bodyvà html:

$( 'html, body' )

Ta chọn 2 thẻ bodyvà htmlvì đây là 2 thẻ chính bao hàm tất cả các thành phần của trang web, do đó việc xác định vị trí chủ yếu dựa trên 2 thẻ này.

Tiếp theo, đặt hiệu ứng cuộn trên thẻ htmlvà bodybằng hàm animate. Cấu trúc của hàm animatenhư sau:

(selector).animate({ styles }, speed, easing, callback)

Ở bài viết này, ta dùng thuộc tính scrollTopvà cho thời gian trễ là 1,5 giây.

Giá trị của scrollTopchính là khoảng cách của ảnh nền cần tìm đến vị trí 0 của thẻ html. Để tính được khoảng cách này, ta dùng hàm bên dưới:

$('div' + elem).offset().top

Đối tượng đầu vào là thẻ divcùng với class tương ứng được gán cho biến elem. Trong bài học của chúng ta, các giá trị của elemđó là:

[ ".forest" , ".eagle" , ".rhino" , ".owl" , ".lion" , ".bear" ]

Bằng cách dùng hàm phía trên, ta sẽ lấy được khoảng cách tương ứng cho từng class. Một lần nữa các bạn thấy rằng việc đặt tên quan trọng trong việc xử lý scriptnhư thế nào.

Cuối cùng, ta đặt tất cả vào hàm setTimeout để tạo độ trễ nửa giây, trước khi thanh cuộn bắt đầu chạy, điều này tạo cảm giác dịu hơn cho quan sát của người dùng.

setTimeout( function () {
    $( 'html, body' ).animate({scrollTop: $('div' + elem).offset().top}, 1500);
  }, 500);

4. Lời kết

Kết thúc bài học hôm nay, freetuts đã hướng dẫn các bạn tạo được hiệu ứng nhấn chuột trên menu thông qua đoạn script. Cảm ơn các bạn, hẹn gặp lại trong các bài viết sau.

Theo:https://freetuts.net