Tạo Hiệu ứng đẹp Với Wow.js
Có thể bạn quan tâm
Giới thiệu :
WOW.js được phát triển bởi Matthieu Aussaguel, một kỹ sư lập trình web hiện đang sống và làm việc tại Thái Lan. WOW.js là sự kết hợp giữa jQuery và thư viện animation.css được viết sẵn các kịch bản. Khi bạn scroll website thì jQuery sẽ bắt sự kiện và kích hoạt chuyển động, các đối tượng sẽ chuyển động và diễn hoạt với sự hỗ trợ của CSS 3 Animation và CSS 3 Transition.
Cách sử dụng :
-
Tải về và chèn 2 tập tin này vào website của mình: – animate.css: Thư viện chuyển động bằng CSS 3 Animation và Transition. – WoW.js: đoạn code jQuery để bắt sự kiện. Sau khi tải về xong thì có thể tiến hành chèn các tập tin vừa chèn vào website của mình.
<link rel='stylesheet' href='https://cdn.rawgit.com/daneden/animate.css/v3.1.0/animate.min.css'> <script src='https://cdn.rawgit.com/matthieua/WOW/1.0.1/dist/wow.min.js'></script> -
Gọi wow.js
<script> new WOW().init(); </script>
3 . HTML
<div class="row"> <div data-wow-delay="0.5s" class="wow rollIn"> <img src="http://www.detectiveconanworld.com/wiki/images/9/92/Ran_Mouri_Profile.jpg" height="200"> </div> <div data-wow-delay="1s" class="wow bounceInDown center"><img src="http://www.detectiveconanworld.com/wiki/images/9/92/Ran_Mouri_Profile.jpg" height="200"></div> <div data-wow-delay="1.5s" class="wow bounceInRight"> <img src="http://www.detectiveconanworld.com/wiki/images/9/92/Ran_Mouri_Profile.jpg" height="200"> </div> </div>Data nâng cao:
- Có thể config thời gian chuyển động như sau:
chuyển động sẽ diễn ra trong 2 giây, và sau 3s sẽ lập lại chuyển động đó 1 lần và chuyển động lập trong 5 lần.
- data-wow-duration: Thời gian chuyển động của đối tượng.
- data-wow-delay: Thời gian chờ trước khi đối tượng chuyển động.
- data-wow-iteration: Số lần lập lại của một chuyển động.
- data-wow-offset: Khoảng cách giữa đối tượng và điểm cuối màng hình. khi cuộn đến khoảng cách đó, đối tượng sẽ bắt đầu chuyển động.
- Ví dụ: HTML
CSS
.wow{ background: #0082bb; color: #FFF; awidth: 250px; height: 250px; border-radius:100%; line-height: 250px; text-align: center; font-size: 50px; margin-left: 20px; margin-bottom: 20px; }Áp đặt class tương ứng với chuyển động
HTML
<link rel="stylesheet" href="https://cdn.rawgit.com/daneden/animate.css/v3.1.0/animate.min.css"> <script src="https://cdn.rawgit.com/matthieua/WOW/1.0.1/dist/wow.min.js"></script> <script> new WOW().init(); </script> <div class="wow bounce">1</div> <div class="wow shake">2</div> <div class="wow swing">3</div> <div class="wow shake">4</div> <div class="wow bounce">5</div> <div class="wow swing">6</div> <div class="wow bounceOut">7</div> <div class="wow shake">8</div> <div class="wow fadeIn">9</div> <div class="wow shake">10</div>CSS
.wow{ background: #0082bb; color: #FFF; awidth: 250px; height: 250px; border-radius:100%; line-height: 250px; text-align: center; font-size: 50px; margin-left: 20px; margin-bottom: 20px; }Từ khóa » Hiệu ứng Js đẹp
-
33 Thư Viện Animation Javascript Cho Trang Web
-
31 Hiệu Ứng Button CSS Và Javascript Đẹp ... - Niềm Vui Lập Trình
-
Một Số Animation Effect đẹp Mắt để Apply Cho Website Của Bạn - Viblo
-
Các Hiệu ứng Javascript đẹp
-
15 Mẫu Hiệu ứng động Bằng CSS Trên CodePen - Web Design
-
TypewriterJS Hiệu ứng Js đánh Văn Bản Cực đẹp
-
09 - Thiết Kế Hiệu ứng Bằng Javascript Và Illustrator - FEDU
-
30 Hiệu ứng Pure CSS Animation Snippets » Chia Sẻ để Vui Vẻ
-
Làm Hiệu ứng Blogroll Card đẹp Mắt Với Javascript - Homiedev
-
11 Thư Viện Animation Miễn Phí Dành Cho Các UI Designer
-
31 Hiệu Ứng Button CSS Và Javascript Đẹp Cho Trang Web
-
Một Số Animation Effect đẹp Mắt để Apply Cho Website Của Bạn
-
10 Javascript Text Effects - 10 Hiệu ứng Text đẹp - ONB.VN
-
Một Số Animation Effect đẹp Mắt để Apply Cho Website Của Bạn