Giới thiệu
Việc tạo ra một trang web với UI hấp dẫn đòi hỏi bạn phải đầu tư rất nhiều công sức. Hay đôi khi đang lướt web thì bắt gặp một số thành phần trên UI trông rất thú vị mà không biết phải làm thế nào. Từ đó, các plugin được sử dụng để giải quyết các vấn đề trên, giúp nhanh chóng có được giao diện đẹp mắt, bố cục hiện đại, các hiệu ứng mượt mà và hiệu năng cao.
Từ một bài viết trên J2Team của bạn Trần Minh Quang chia sẻ một số plugin Front End (chủ yếu thiên về UI), mình xin phép được liệt kê tại đây.
Có tổng cộng 20 plugin trong bài viết này
- Plugin hover css (Tạo hiệu ứng khi rê chuột – vào) :
http://ianlunn.github.io/Hover/ - Plugin Animate.css (Tổng hợp 1 số animate css, cũng là hiệu ứng):
– https://daneden.github.io/animate.css/ - Plugin Image hover (Tạo hiệu ứng khi rê chuột vào ảnh) :
– http://imagehover.io/ - Owl carousel (Slider cho website) :
– https://owlcarousel2.github.io/OwlCarousel2/ - Slick slider (Slider cho website – nhẹ hơn owl carousel, bác nào thích hiệu ứng có thể dùng owl carousel, thích đơn giản thì dùng thằng này) :
– http://kenwheeler.github.io/slick/
Bác nào muốn hiệu ứng cho slick slider có thể dùng thêm thằng bên dưới
– https://github.com/marvinhuebner/slick-animation (Hỗ trợ hiệu ứng cho slick slider, cần có animate.css) - Plugin Wow js (Tạo hiệu ứng xuất hiện khi cuộn trang) :
– https://wowjs.uk/ - Plugin Isotope (Tạo hiệu ứng mỗi khi click vào filter) :
– https://isotope.metafizzy.co/ - Direction Reveal (Tạo hiệu ứng khi rê chuột vào sẽ theo hướng di chuyển của chuột – xem demo để rõ hơn) :
– https://nigelotoole.github.io/direction-reveal/ - Plugin Scroll With Ease (Tạo hiệu ưng ease khi lăn chuột) :
– https://www.jqueryscript.net/animation/Configurable-Smooth-Scrolling-Plugin-With-jQuery-Scroll-With-Ease.html - Font Awesome Animation (Hiệu ứng cho Font Awesome):
– http://l-lin.github.io/font-awesome-animation/ - Framework Material Design for Bootstrap (Bản custom bootstrap với material design) :
– https://fezvrasta.github.io/bootstrap-material-design/ - Materialize (Framework với phong cách material design) :
– https://materializecss.com/ - Plugin ScrollReveal (Tạo hiệu ưng xuất hiện khi cuộn trang giống Wow js nhưng cái này có độ delay từng phần tử ):
– https://scrollrevealjs.org/ - Keyframes (Tạo animation có bản web và bản extension chrome) :
– https://keyframes.app/ - Plugin Tilt (Tạo hiệu ứng parallax khi rê chuột vào phần tử) :
– https://gijsroge.github.io/tilt.js/ - Plugin Particles (Tạo hiệu ứng ngân hà Một số plugin front end chủ yếu thiên về UI:v theo em thì là vậy) :
– https://vincentgarreau.com/particles.js/ - Plugin LegitRipple (Tạo hiệu ứng ripple wave khi click vào phần tử) :
– https://matthias-vogt.github.io/legitRipple.js/ - Plugin Splitting (Tạo hiệu ứng text, image, list…. cho website) :
– https://splitting.js.org/ - Plugin Fancybox (Tạo hiệu ứng khi xem ảnh) :
– https://www.fancyapps.com/fancybox/3/ - Plugin Anime JS (Tạo hiệu ứng cho phần tử) :
– http://animejs.com/