Scroll To Top

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

Đăng lúc: Chủ nhật - 05/05/2019 14:29 |  NukeViet | : Người đưa tin | Đã xem: 58 |   0

HTML

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
 Bài viết thuộc chuyên mục: NukeViet

+ Việt hóa phần mềm iSpring suite soạn bài giảng E-learning: http://thcstranquangkhai.edu.vn/vi/shops
+ Diễn đàn hỗ trợ soạn bài giảng E-Learning: https://www.facebook.com/groups/baigiangelearning

 

Tip:Bài viết, video, hình ảnh, vui lòng gửi về địa chỉ email: Phavaphugmail.com


Tổng số điểm của bài viết là: 0 trong 0 đánh giá

Click để đánh giá bài viết

  Ý kiến bạn đọc

Cuộc sống mà không có tình yêu thì không còn là cuộc sống nữa. - A life without love is no life at all.

kenhbgyoutube

 

 

 

 

 

 

BÌNH LUẬN MỚI NHẤT - TIN TỨC
BÌNH LUẬN MỚI NHẤT - WINDOWS
MỖI LÚC MỘT NỤ CƯỜI
Thống kê truy cập
  • Đang truy cập108
  • Máy chủ tìm kiếm1
  • Khách viếng thăm107
  • Hôm nay11,224
  • Tháng hiện tại217,568
  • Tổng lượt truy cập8,391,137
Bạn đã không sử dụng Site, Bấm vào đây để duy trì trạng thái đăng nhập. Thời gian chờ: 60 giây