Hướng dẫn sử dụng Animation.css và WOW.js để tạo hiệu ứng đẹp mắt cho website

Chủ nhật - 05/05/2019 14:29
In ra
Đóng cửa sổ này

HTML

Hôm nay mình sẽ chia sẻ với mọi người hiệu ứng khá đẹp mà mình thích trong quá trình thiết kế giao diện website :
Trong thiết kế web hiện đại, bạn không thể thiếu những hiệu ứng đẹp, nó giúp website trở nên sinh động, đẹp mắt, thân thiện với người dùng, những cũng không nên lạm dụng những hiệu ứng, nó sẽ làm website load chậm . Hôm nay mình giới thiệu các bạn thư viện wow.js, mình sử dụng nó thấy nó khá đẹp mà cũng nhẹ nữa, cùng tìm hiểu thêm về nó.

Giới thiệu về wow.js:

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 jQueryvà 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 dùng wow.js:

Cách dùng thì rất đơn giản, bạn có thể tải file js của nó về hoặc sử dụng CDN của nó cho nhanh cũng được, do wow.js dùng Animate.css nên bạn phải add css của animate vào nữa:
– add css & js
Thêm đường dẫn đén css vào sau dòng
Code:

<link<!-- BEGIN: attr --> {LINKS.key}="{LINKS.value}"<!-- END: attr -->>

code:
Code:

<link href="/themes/default/css/animate.css" rel="stylesheet">

Thêm đường dẫn đén js vào sau dòng
Code:

<script<!-- BEGIN: ext --> src="{JS_SRC}"<!-- END: ext -->><!-- BEGIN: int -->{JS_CONTENT}<!-- END: int --></script>

của file: header_only.tpl
Code:

<script src="/themes/default/js/wow.js"></script>
<script src="/themes/default/js/wow.min.js"></script>

– gọi wow.js
thêm đoạn code này vào ngay dưới 2 dòng trên
Code:

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

– html
Trong các class của bạn, thêm vào class nào mà bạn muốn sử dụng WOW
lệnh:
Code:

wow bounceInLeft

(*-wow bounceInLeft
-wow bounceInRight
-wow bounceInUp
....v..v..
)
VD:
Code:

<div class="col-md-24 wow bounceInUp">
        [HEADER]
    </div>

là các hiệu ứng chuyển động.
– cài đặt nâng cao
Bây giờ bạn đã có được những hiệu ứng đẹp rồi, nhưng chúng ta vẫn chưa kiểm soát được thời gian chuyển động, số lần chuyển động,…. Bậy giờ bạn thử lại với đoạn code html sau:

Code:

<div data-wow-delay="5s" class="col-md-24 wow bounceInUp">
        [HEADER]
    </div>

Các bạn sẽ thấy rằng, chuyển động sẽ diễn ra trong 5 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. Bây giờ nhìn vào các data attribute thì chúng ta có thể dễ dàng nhận biết được ý nghĩa của 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.

Tải thư viện JS và CSS: Tại đây

Trường thcs Trần Quang Khải

Hướng dẫn sử dụng Animation.css và WOW.js để tạo hiệu ứng đẹp mắt cho website