HeadroomJs là một thư viện được viết sẵn để thực hiện điều mà chúng ta vừa nói ở trên. Bạn đọc thêm thông tin và tại liệu của nó ở trang chủ HeadRoomJs.
Thư viện này được viết độc lập, không đòi hỏi thêm thư viện nào khác như jQuery, vì vậy bạn có thể sử dụng riêng một mình nó, nhưng bạn cũng có thể dùng chung với jQuery, Zepto và Angular.
HTML
Đầu tiên bạn cần thêm class “headroom” vào menu mà bạn muốn, dưới đây là ví dụ của mình.
<nav id="header" class="teal lighten-1 headroom">
<div class="nav-wrapper">
<div class="col s12">
<a style="margin-left: 50px" href="http://laptrinh.senviet.org" class="brand-logo">SEN VIỆT</a>
<ul class="right hide-on-med-and-down">
<li><a href="http://wordpresskite.com">WordPress Dev</i></a></li>
<li><a href="http://laptrinh.senviet.org">Dev tut</a></li>
<li><a href="http://www.youtube.com/subscription_center?add_user=videohuongdanlt">Youtube</a></li>
<li><a href="http://www.youtube.com/subscription_center?add_user=videohuongdanlt"><i class="mdi-navigation-more-vert"></i></a></li>
</ul>
</div>
</div>
</nav>
CSS :
Đầu tiên bạn nên làm cho .headroom fixed và một vài thuộc tính về transition :
.headroom {
position: fixed;
z-index: 9998;
top: 0;
left: 0;
right: 0;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
Nếu bạn muốn thay đổi tốc độ của hiệu ứng, bạn chỉnh giá trị của animation-duration nhỏ lại.
Giờ ta định nghĩa hiệu ứng khi scroll up/down. HeadroomJs sẽ thêm class headroom--pinned khi navbar hiện ra, và headroom--unpinned khi navbar ẩn, nên ta sẽ làm hiệu ứng cho nó như sau :
.headroom--unpinned {
top: -80px;
-webkit-transition: .25s;
-o-transition: .25s;
-moz-transition: .25s;
-ms-transition: .25s;
transition: .25s;
-webkit-transform: translateY(-80px);
-o-transform: translateY(-80px);
-moz-transform: translateY(-80px);
-ms-transform: translateY(-80px);
transform: translateY(-80px);
}
.headroom--pinned {
top: 0;
transition-timing-function: cubic-bezier(0.64, 0.57, 0.67, 1.53);
-webkit-transition: .5s;
-o-transition: .5s;
-moz-transition: .5s;
-ms-transition: .5s;
transition: .5s;
}
Javascript :
Và cuối cùng là js. Bạn phải thêm các file sau vào head hoặc footer của website :
<script src="//cdnjs.cloudflare.com/ajax/libs/headroom/0.7.0/headroom.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/headroom/0.7.0/jQuery.headroom.min.js"></script>
sau đó tạo headroomJs bằng đoạn code sau :
(function ($) {
$(function () {
$("#header").headroom({
// vertical offset in px before element is first unpinned
offset : 100,
// or you can specify tolerance individually for up/down scroll
tolerance : {
up : 20,
down : 20
}, classes : { // when element is initialised
initial : "headroom",
// when scrolling up
pinned : "headroom--pinned",
// when scrolling down
unpinned : "headroom--unpinned",
}
});
}); // end of document ready
})(jQuery); // end of jQuery name space
Như vậy là navbar của bạn đã xong rồi, có thể f5 và scroll để xem thành quả.
Ý nghĩa các tham số của phương thức headroom như sau :
offset : nếu số pixel scroll từ top của trang nhỏ hơn offset, thì sẽ không ẩn navbar.
tolerance : Số số pixel trong một lần scroll lớn hơn tolerance thì sẽ ẩn/hiện.
classes : các class mà bạn muốn thêm vào khi show/hide
initial : khi khởi tạo
pinned : khi được hiện ra
unpinned : khi bị ẩn đi
top : khi nằm trong vùng offset
notTop : khi ngoài vùng offset
Bạn thao khảo thêm tại trang document của headroomJs.
Lỗi Debouncer :
Nếu headroomJs của bạn không chạy và trong console có báo lỗi gì đó liên quan tới Debouncer, ví dụ như “Debouncer not found/undefined” thì bạn tải file Debouncer.js về và đặt vào trước file headroom.js
Tạo animation cho headroomJs
Cách đơn giản nhất là sử dụng animation được css3 hỗ trợ. Trên internet có rất nhiều thư viện css về animation như : Animate.css, Animations, Magic ,
Animation generator for headroomjsMình đã làm một tool hỗ trợ tạo code js và css cho Headroom. bạn có thể xem tại : HeadroomJs Animation Generator. Tool này cũng đơn giản chỉ là lấy hiệu ứng của các thư viện css trên, rồi giúp bạn tách nó ra, chỉ lấy những hiệu ứng mà bạn cần, tránh việc phải load nguyên một file css lớn.
Bạn truy cập vào link HeadroomJs Animation Generator , tùy chỉnh các option ở trong form, sau đó click vào “Run demo” để áp dụng hiệu ứng đó trên chính website, nếu hài lòng với hiệu ứng, bạn có thể kéo xuống phía dưới và chép code vào website của bạn, thực sự rất đơn giản.
Bạn cũng có thể click vào “Random animate” để phối hợp các hiện ứng với nhau một cách ngẫu nhiên, hoặc chọn các hiện ứng trong danh sách bên phải. đây là các hiệu ứng được nhiều website sử dụng nhất.
Lời kết :
Tương tự như menu phía trên website, ta cũng có thể làm menu ở dưới website, đây có thể làm thêm một menu, mà khi người dùng scroll xuống thì nó hiện ra, menu này chứa các thông tin liên quan mật thiết tới bài viết hiện tại. như vậy có lẽ sẽ thu hút được khá nhiều sự chú ý.
Một ý tưởng khác là khi người dùng scroll đến hết nội dung bài viết thì show menu ra, đây cũng là một ux rất hay.
Nguồn: laptrinh.senviet.org