Việc tạo ra các hiệu ứng trên website sẽ giúp bạn có được một giao diện web chuyên nghiệp đồng thời sẽ tạo thành tiện ích, tạo cảm quan hiệu quả khi khách hàng, người dùng truy cập website của bạn.
Bài viết này mình sẽ hướng dẫn các bạn tạo hiệu ứng khi sử dụng chuột kéo trang xuống thì nội dung trang website sẽ hiển thị lân lượt, có hiệu ứng mờ dần hiển thị khi các thẻ div hay các thẻ image ảnh xuất hiện.
Hiệu ứng này được rất nhiều website nổi tiếng sử dụng, giúp trang web chuyên nghiệp và đẹp hơn. Đầu tiên bạn cần download 3 file hiệu ứng sau đây : http://laptrinhhaiphong.com/images/hieu-ung-1-files.zip
Link download 3 file :
Bạn tạo ra thư mục : hieu-ung-1-files và copy 3 file này vào thư mục vừa tạo.
Sau đó tạo ra 1 trang html có cấu trúc như sau :
jQuery(document).ready(function() {
jQuery('.post').addClass("hidden").viewportChecker({
classToAdd: 'visible animated fadeIn', // Class to add to the elements when they are visible
offset: 100
});
});
Tiêu đề
Nội dung sẽ hiển thị hiện mờ dần hoặc ẩn mờ dần
Nội dung
Sẽ hiển thị cho bạn thấy các hiệu ứng tuyệt vời này bạn có thể xem 2 demo sau :
- Demo 1
- Demo 2
0 nhận xét:
Đăng nhận xét