blog.web68.vn

OUR SPONSORS

Hiệu ứng đẹp tuyệt vời vời WOW.js khi bạn scroll


GIỚI THIỆU

WOW.js là một trong những thư viện giụp cho việc tạo hiệu ứng hiển thị trang gây ấn tượng mạnh nhất. WOW.js đặc biệt cuốn hút người xem khi sử dụng cho các website dạng single page (một trang). WOW.js làm cho việc hiển thị các đối tượng trên trang trở nên sinh động và mượt mà.

WOW javascript

HƯỚNG DẪN SỬ DỤNG

1. Thêm JS & CSS

WOW.js sử dụng animate.css , do đó bạn cần phải thêm vào

<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>

2. HTML

<div class="row">
	<div data-wow-delay="0.5s" class="wow rollIn">
		<img src="http://mynameismatthieu.com/WOW/img/wow-3.gif" height="200">
	</div>
	<div data-wow-delay="1s" class="wow bounceInDown center">
		<img src="http://mynameismatthieu.com/WOW/img/wow-4.gif" height="200">
	</div>
	<div data-wow-delay="1.5s" class="wow bounceInRight">
		<img src="http://mynameismatthieu.com/WOW/img/wow-9.gif" height="200">
	</div>
</div>

3. Gọi WOW.js

<script>
new WOW().init();
</script>

TUỲ CHỌN NÂNG CAO

WOW.js cung cấp nhiều tuỳ chọn để giúp bạn tạo các hiệu ứng chuyển động phù hợp với website của mình.

  • data-wow-duration: Thời gian thực hiện hiệu ứng
  • data-wow-delay: Độ trễ trước khí thực hiện hiệu ứng
  • data-wow-offset: Khoảng cách để bắt đầu thực hiện hiệu ứng 
  • data-wow-iteration: Số lần thực hiện hiệu ứng

DEMO

Bạn hãy RERUN lại demo để thấy hiệu ứng chuyển động khi tải trang

 

See the Pen wow.js demo by Thanh Nguyen (@genievn) on CodePen.


Tags
javascript  hiệu-ứng  
comments powered by Disqus