Ở bài tập javascript 18 chúng ta sẽ viết hiệu ứng scroll transition. Hiệu ứng scroll transition được sử dụng khá nhiều, vào mấy trang web tin tức như zing.vn, kênh 14 .. Hầu như đều sử dụng hiệu ứng này, nó được sử dụng để quay lại đầu trang. Khi mà người dùng cuộn chuột xuống, mình xin được bắt đầu bài viết.
Kiến thức cần có:
Bài tập javascript 18 – Hiệu ứng Scroll Transition
Mô tả bài tập: Khi chúng ta cuộn chuột xuống, để trở lại đầu trang chúng ta chỉ cần click vào cái icon up. Lúc chuyển động lên thì nó sẽ chuyển động từ từ. Đây là lí do gọi là scroll transition chứ thực ra chúng ta không sử dụng được thuộc tính transition của css cho hiệu ứng này.
Demo:
Click vào bài tập js 18 để xem kết quả, nhớ cuộn chuột xuống rồi hãy click vào icon nhé :D.
Mình sẽ code và giải thích chi tiết ngay phía sau, mình viết hiệu ứng này bằng js thuần còn nhanh hơn dùng jquery.
Code: html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Scroll Transition</title> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous"> </head> <body> <div class="sidebar"> <nav> <ul> <li>Trang chủ</li> <li>Em</li> <li>Anh</li> <li>City</li> <li>Hotel</li> </ul> </nav> <i class="fas fa-arrow-circle-up"></i> </div> </body> </html> |
Code:css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
* { margin: 0; padding: 0; } body { background: #e2e2e263; } .sidebar { height: 1000px; } i { position: fixed; right: 0; bottom: 100px; font-size: 28px; color: #2196F3; cursor: pointer; } ul { display: grid; grid-template-columns: repeat(5,1fr); } li { list-style: none; padding: 10px; box-shadow: 2px 4px 2px 1px #00000024; text-align: center; margin: 10px; background: #80808085; } |
Code: js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
var nut = document.querySelector('i'); //Truy xuất icon nut.onclick = function(){ var chieucaoht = self.pageYOffset; // lấy chiều cao hiện tại của trang var set = chieucaoht; var run = setInterval(function(){ chieucaoht = chieucaoht - 0.05*set; window.scrollTo(0,chieucaoht); if(chieucaoht <= 0){ clearInterval(run); } },15) } |
Kết quả:
Giải thích:
- Mình sẽ lấy vị trí hiện tại khi cuộn chuột bằng phương thức self.pageYOffset
- Tạo thêm một biến set = chiều cao hiện tại
- Sử dụng phương thức setInterval để xác định chiều cao sau mỗi bao nhiêu giây đó, càng dài thì nó chuyển động càng chậm
- Trong function anonymous của phương thức setInterval xác định chiều cao hiện tại bằng chính nó trừ đi cái biến set * 0.05.
- Theo như đoạn code của mình ở trên thì cứ sau 0.015 s thì biến chieucaoht sẽ thay đổi chó đến <= 0 thì dừng vì mình clear nó đi.
- window.scrollTo(0,chieucaoht) phương thức này sẽ cuộn chuột đến vị trí của chieucaoht sau mỗi 0.015s.
Okê xong rồi đấy, vậy là mình đã xử lý xong hiệu ứng scroll transition rồi nhé. Mình sẽ trở lại với những hiệu ứng khác, mình xin được kết thúc bài viết tại đây.
Xem bài viết tiếp theo tại đây.
