12 thư viện và plugin để thực hiện animation lên Homepage

Có thể nói animation là một yếu tố bắt buộc khi tạo một trang Homepage. Những trang tĩnh hoạt động đơn giản sẽ tạo sự buồn chán cho user.

Trái lại chỉ cần thêm một số animation sẽ đem lại hiệu quả bất ngờ, những animation đó sẽ tạo cảm giác thích thú cho user, chính vì vậy nó sẽ khiến cho lượng engagement vào Homepage tăng cao.

Bài viết này sẽ giới thiệu cho chúng ta các thư viện của CSS, JavaScript có thể thưc hiện 1 cách đơn giản các animation độc đáo.

Nhờ các thư viện này mà các animation hoạt động phong phú 10 năm trước nếu không sử dụng Adobe Flash thì không thực hiện được thì nay có thể tạo trong vài dòng code đơn giản.

1. Animate.css

https://daneden.github.io/animate.css/

Animate.css là thư viện animation CSS phổ biến nhất hiện nay

Nhẹ nhàng và đơn giản, thư viện này sẽ giúp chúng ta tạo được animation chỉ bằng việc thêm các thuộc tính class dùng cho animation vào HTML.

Tuy nhiên cũng có điều cần chú ý đó là đối với những animation đặc biệt thì cần phải có jQuery.

2. Bounce.js

http://bouncejs.com

Bounce.js là thư viện của JavaScript được tạo để tạo ra các động tác đáng yêu dựa trên cơ sở của animation CSS3

3. AOS

https://michalsnik.github.io/aos/

AOS là tên viết tắt của Animate On Scroll, đây là thư viện của CSS và JavaScript giúp ta có thể gọi animation bằng sự kiện scroll.

Bạn có thể scroll down để bắt đầu animation, hay back scroll để playback lại.

Tương tự như ở phần sample sau khi thêm thuộc tính “data-aos” vào HTML thì bạn có thể chỉ định animation.

4. CSShake

http://elrumordelaluz.github.io/csshake/

CSShake là thư viện animation có base là CSS giúp bạn có thể tạo hiệu ứng rung cho các yếu tố ở trên Homepage.

Ở trên Mac, bạn có thể tạo nhiều loại animation khi gõ nhầm password từ animation lắc đầu, cho đến animation rung giống như điện thoại rung,...

Nếu sử dụng Mix-in của Sass bạn cũng có thể tạo nhiều thiết kế chi tiết hơn.

5. Magic Animations

http://www.minimamente.com/example/magic_animations/

Magic Animations là thư viên tạo animation xuất hiện và biến mất giống như bạn nhìn thấy ở Power Point

Thư viện này yêu cầu jQuery là bắt buộc nhưng bạn chỉ cần đọc file CSS là bạn đã hoàn thành chuẩn bị xong.

Thư viện này khá phong phú với trên 60 loại animation

6. DynCSS

http://www.vittoriozaccaria.net/dyn-css/

DynCSS là plugin CSS thực hiện hiệu ứng scroll. Bạn có thể chuyển động object theo từng scroll dựa theo pass đã có sẵn. Pass được ghi theo qui tắc chỉ định ở CSS.

7. Hover CSS

http://ianlunn.github.io/Hover/

HoverCSS là thư viện animation CSS để tạo các animation động bằng các hover theo tên (mouse over).

Có thể tạo animation đơn giản ở các button hay các yếu tố UI khác.

Chỉ cần di chuyển chuột là hiển thị impact animation nên nếu sử dụng ở các button CTA,.., thì nó được kỳ vọng sẽ làm tăng tỷ lệ conversion.

8. Velocity.js

http://velocityjs.org

Velocity.js là animation plugin giúp tạo ra nhiều loại hiệu ứng như fade, slide, scroll,... bằng jQuery.

Vì sử dụng jQuery nên có thể lấy các hàm số, phép tính để tạo animation.

Velocity.js là plugin đang được sử dụng nhiều trong thực tế ở các trang homepage như Tumblr, WhatsApp, MailChimp.

9. Transit.js

http://ricostacruz.com/jquery.transit/

Transit.js là animation plugin sử dụng CSS3 và jQuery.

Plugin này giúp bạn tạo animation một cách trơn tru và nhẹ nhàng, nếu bạn thiết lập cụ thể thì bạn cũng sẽ tạo được các animation phức tạp.

10. GreenSock GSAP

https://greensock.com/gsap

GSAP là thư viện animation có base dựa trên HTML5 và JavaScript do công ty GreenSock phát triển.

Khi sử dụng GSAP với các animation plugin khác thì các chuyển động của animation đều nhẹ nhàng và dứt khoát như chuyển động của đồ chơi.

11. AniJS

http://anijs.github.io

AniJS là thư viện animation của CSS và JavaScript, thư viện này có đa dạng các animation được sử dụng với trên 70 loại.

Bạn có thể lập trình các hình ảnh động với các điều kiện đơn giản cho thêm vào trong tag HTML như “if: click, do: $$oggleClass pink-lgh-bg, to: .demo1”

12. Snap.svg

http://snapsvg.io/

Snap.svg là thư viện animation có base là JavaScript có thể sử dụng SVG là các đồ họa vector dùng trong hiển thị trình duyệt làm animation.

SVG animation có thể tạo chuyển động cho ngay cả các chi tiết nhỏ nên bạn có thể tạo ra các animation đẹp.

So với thư viện CSS thì thư viện này đòi hỏi bạn cần phải có kiến thức về lập trình.

Tổng kết

Trên đây là những thư viện và plugin tạo animation cho homepage mà tác giả muốn giới thiệu.

Đây là những thư viện mà bạn có thể ứng dụng để tạo những animation đơn giản cho đến những animation phức tap có yêu cầu cao.

Trích nguồn: https://ferret-plus.com/6323