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.

Recent Post