Parallax - Tạo hiệu ứng cuộn với thanh menu dọc - Hiệu ứng Parallax Scrolling
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 ...
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 onclick cho từng thẻ li , sau khi người dùng nhấn vào từng thẻ li thì 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ư Zaidap.com đã đề 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 hover trê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 jQuery và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 jQuery mới nhất, ở đây ta cho jQuery 3.x.
Bước 3: jQuery cung 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 minified thì một popup sẽ 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="https://code.jquery.com/jquery-3.3.1.min.js" 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 body và html:
$( 'html, body' )
Ta chọn 2 thẻ body và html vì đâ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ẻ html và body bằng hàm animate. Cấu trúc của hàm animate như sau:
(selector).animate({ styles }, speed, easing, callback)Ở bài viết này, ta dùng thuộc tính scrollTop và cho thời gian trễ là 1,5 giây.
Giá trị của scrollTop chí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ẻ div cù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ý script như 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, Zaidap.com đã 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.
Chuyên đề học lập trình web: Học phần HTML / CSS
Đây là chương thứ nhất trong chuyên đề tự học lập trình web với PHP. Trong chương này chúng ta sẽ học HTML và CSS trước.
Các bạn hãy sub kênh để ủng hộ mình nhé. Link chuyên đê tại đây.
