Bài viết hôm nay mình sẽ giới thiệu đến bạn những hiệu ứng scroll được xây dựng bằng HTML, CSS, Javascript giúp thu hút sự chú ý của người dùng cũng như tạo ra cảm giác thú vị khi khách hàng sử dụng trang web nhé!
Trước khi đi vào ví dụ thì mình có một số chú ý sau là để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x hay nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Nếu file là SCSS thì bạn có thể chuyển sang CSS ở đây nhé : SCSS to CSS. Nếu file là Pug thì bạn có thể chuyển sang HTML ở đây nhé : Pug to HTML. Nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở dưới máy tính thì nhấp vào chữ Resources ở dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha.
Tạo Hiệu Ứng Scroll CSS Background Gradient
Kết quả bạn xem bên dưới nha.
See the Pen Scrolling Gradient by Mike (@MadeByMike) on CodePen.
Tạo Hiệu Ứng Scroll Jquery Cho Hình Ảnh
Kết quả bạn xem bên dưới nha.
See the Pen Slide-out Scrolling Gallery by Teegan Lincoln (@teeganlincoln) on CodePen.
Hiệu Ứng Navigation Scroll Jquery
Kết quả bạn xem bên dưới nha.
See the Pen Neat Parallax Hero Effect by magnificode (@magnificode) on CodePen.
Hiệu Ứng Scroll Drawing
Kết quả bạn xem bên dưới nha.
See the Pen Scroll Drawing by Chris Coyier (@chriscoyier) on CodePen.
Hiệu Ứng Jquery Scroll Background
Kết quả bạn xem bên dưới nha.
See the Pen Changing Background Color on Scroll by Jack Harner (@jackharner) on CodePen.
Cách Tạo Scroll Animation CSS Cho Hình Ảnh
Kết quả bạn xem bên dưới nha.
See the Pen Scroll Based Animation by lmgonzalves (@lmgonzalves) on CodePen.
Hiệu Ứng Header Scroll Effect CSS3 Javascript
Kết quả bạn xem bên dưới nha.
See the Pen Header Scroll Effect by Ian Gloude (@igloude) on CodePen.
Hiệu Ứng Scroll Reveal
Kết quả bạn xem bên dưới nha.
See the Pen Scroll Animations - Revealed Box by Julien Lejeune (@jlnljn) on CodePen.
Hiệu Ứng Scroll Animation Text Reveal
Kết quả bạn xem bên dưới nha.
See the Pen Cross Color Text Reveal by Kenny (@ispykenny) on CodePen.
Hiệu Ứng Scroll Text Color
Kết quả bạn xem bên dưới nha.
See the Pen ScrollOut + Splitting.js by Shaw (@shshaw) on CodePen.
Tạo Hiệu Ứng Scroll Bằng Splitting.js
Kết quả bạn xem bên dưới nha.
See the Pen Scroll Triggered Elements (Splitting + ScrollOut) by Christopher Wallis (@notoriousb1t) on CodePen.
Hiệu Ứng Scroll Zoom Image
Kết quả bạn xem bên dưới nha.
See the Pen Efficient Scroll Zoom by Chris Weissenberger (@CAWeissen) on CodePen.
Hiệu Ứng Parallax Scrolling Cho Hình Ảnh
Kết quả bạn xem bên dưới nha.
See the Pen Full Page Parallax Scroll Effect by Emily Hayman (@eehayman) on CodePen.
Tạo Hiệu Ứng Play Video Khi Scroll
See the Pen Unobtrusive Video by carpe numidium (@carpenumidium) on CodePen.
Hiệu Ứng Sticky Header Khi Scroll Up
Kết quả bạn xem bên dưới nha.
See the Pen Sticky header on scroll up by Ingvi (@ingvi) on CodePen.
Hiệu Ứng Scroll Aniamtion CSS
Kết quả bạn xem bên dưới nha.
See the Pen Gettin' Clippy by Stephen Scaff (@StephenScaff) on CodePen.
Hiệu Ứng Javascript Scroll Text
Kết quả bạn xem bên dưới nha.
See the Pen Scroll effect with text with help from Skrollr by Yash (@yashyash) on CodePen.
Hiệu Ứng Scroll Aniamtion Javascript
Kết quả bạn xem bên dưới nha.
See the Pen Intersection Observer + CSS Vars Scroll Effect by Emily Hayman (@eehayman) on CodePen.
Tổng kết:
Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những hiệu ứng scroll hữu ích dành cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!