Các hàm xử lý chuỗi trong Javascript (cắt / tách / nối chuỗi ..) 
Chia lấy phần dư / chia lấy phần nguyên trong javascript 
Các sự kiện (Event) trong Javascript 
Các cách khai báo biến trong Javascript 
Hướng tạo thanh search bar bằng CSS 
Bắt sự kiện click trong Javascript 
Cách khai báo biến trong PHP, các loại biến thường gặp 
Download và cài đặt Vertrigo Server 
Thẻ li trong HTML 
Thẻ article trong HTML5 
Cấu trúc HTML5: Cách tạo template HTML5 đầu tiên 
Cách dùng thẻ img trong HTML và các thuộc tính của img 
Thẻ a trong HTML và các thuộc tính của thẻ a thường dùng Parallax - Tạo hiệu ứng cuộn với thanh menu dọc
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ư 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.
Bài viết này được đăng tại [free tuts .net]
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, 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.
Danh sách file tải về
| Tên file tải về | Pass giải nén |
|---|---|
| Parallax - Tạo hiệu ứng cuộn với thanh menu dọc | freetuts.net hoặc gameportable.net |
| Nhạc nền | freetuts.net hoặc gameportable.net |
