Bài viết hôm nay mình sẽ giới thiệu đến các 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 cảm giác thú vị khi khách hàng sử dụng trang web nhé.
Các Hiệu Ứng Scroll Cho Website
Tạo Hiệu ứng Scroll CSS Background Gradient
Kết quả bạn xem bên dưới nha
Xem Dải màu cuộn bút của Mike [@MadeByMike] trên CodePen
Nguồn
Tạo Hiệu Ứng Scroll Jquery Cho Hình Ảnh
Kết quả bạn xem bên dưới nha
Xem Thư viện cuộn trang trình bày bằng bút của Teegan Lincoln [@teeganlincoln] trên CodePen
Nguồn
Hiệu ứng Navigation Scroll Jquery
Kết quả bạn xem bên dưới nha
Xem Hiệu ứng anh hùng thị sai bút gọn gàng bằng kính lúp [@magnificode] trên CodePen
Nguồn
Hiệu Ứng Scroll Drawing
Kết quả bạn xem bên dưới nha
Xem Bản vẽ cuộn bút của Chris Coyier [@chriscoyier] trên CodePen
Nguồn
Hiệu ứng Jquery Scroll Background
Kết quả bạn xem bên dưới nha
Xem Bút thay đổi màu nền khi cuộn của Jack Harner [@jackharner] trên CodePen
Nguồn
Cách Tạo Scroll Animation CSS Cho Hình Ảnh
Kết quả bạn xem bên dưới nha
Xem Hoạt hình dựa trên cuộn bút của lmgonzalves [@lmgonzalves] trên CodePen
Nguồn
Hiệu ứng Header Scroll Effect CSS3 Javascript
Kết quả bạn xem bên dưới nha
Xem Hiệu ứng cuộn đầu trang bút của Ian Gloude [@igloude] trên CodePen
Nguồn
Hiệu ứng Scroll Reveal
Kết quả bạn xem bên dưới nha
Xem Hoạt hình cuộn bút - Hộp được tiết lộ bởi Julien Lejeune [@jlnljn] trên CodePen
Nguồn
Hiệu ứng Scroll Animation Text Reveal
Kết quả bạn xem bên dưới nha
Xem Pen Cross Color Text Reveal của Kenny [@ispykenny] trên CodePen
Nguồn
Hiệu ứng Scroll Text Color
Kết quả bạn xem bên dưới nha
Xem Pen ScrollOut + Splitting. js bởi Shaw [@shshaw] trên CodePen
Nguồn
Tạo Hiệu ứng Scroll Bằng Splitting. js
Kết quả bạn xem bên dưới nha
Xem Các phần tử kích hoạt cuộn bút [Chia + cuộn] của Christopher Wallis [@notoriousb1t] trên CodePen
Nguồn
Hiệu ứng Scroll Zoom Image
Kết quả bạn xem bên dưới nha
Xem Pen Efficient Scroll Zoom của Chris Weissenberger [@CAWeissen] trên CodePen
Nguồn
Hiệu Ứng Parallax Scrolling Cho Hình Ảnh
Kết quả bạn xem bên dưới nha
Xem Hiệu ứng cuộn thị sai toàn trang bằng bút của Emily Hayman [@eehayman] trên CodePen
Nguồn
Tạo Hiệu Ứng Phát Video Khi Cuộn
Xem Video Không phô trương về Bút của carpe numidium [@carpenumidium] trên CodePen
Nguồn
Hiệu ứng Sticky Header Khi Scroll Up
Kết quả bạn xem bên dưới nha
Xem tiêu đề Pen Sticky khi cuộn lên bởi Ingvi [@ingvi] trên CodePen
Nguồn
Hiệu ứng Scroll Animation CSS
Kết quả bạn xem bên dưới nha
Xem Pen Gettin' Clippy của Stephen Scaff [@StephenScaff] trên CodePen
Nguồn
Hiệu ứng Javascript Scroll Text
Kết quả bạn xem bên dưới nha
Xem hiệu ứng Cuộn bút với văn bản với sự trợ giúp từ Skrollr của Yash [@yashyash] trên CodePen
Nguồn
Hiệu ứng Scroll Animation Javascript
Kết quả bạn xem bên dưới nha
Xem Trình quan sát giao lộ bút + Hiệu ứng cuộn CSS Vars của Emily Hayman [@eehayman] trên CodePen
Nguồn
Nếu bạn muốn tham khảo cách tạo hiệu ứng cuộn bằng AOS, hãy truy cập đường dẫn bên dưới nhé.
Tạo hiệu ứng cuộn bằng AOS
Nếu bạn muốn tham khảo cách tạo hiệu ứng smooth scroll và parallax thì truy cập đường dẫn bên dưới nhé.
Hiệu ứng Smooth Scroll và Parallax
Nếu bạn muốn tham khảo cách tạo hiệu ứng cuộn ngang, hãy truy cập đường dẫn bên dưới nhé.
Cuộn ngang
Tổng kết
Qua đây mình mong bài viết sẽ cung cấp thêm cho các 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 mail 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ẻ
Thiết kế một trang web theo đúng cách bạn muốn thường yêu cầu phải loại bỏ phần thừa – một số khoảng trắng ở đây, gạch dưới ở đó hoặc, trong trường hợp ngày nay là thanh cuộn
Cho dù vì lý do thiết kế hay chức năng, bạn có thể dễ dàng ẩn thanh cuộn trên một trang hoặc phần tử trang bằng một chút CSS. Có nhiều cách để thực hiện công việc này – ẩn thanh cuộn trong khi cho phép cuộn, ẩn thanh trong khi tắt cuộn và chỉ ẩn thanh cuộn cho đến khi cần – một số cách trong số đó sẽ hoạt động tốt hơn dựa trên trường hợp của bạn
Xem thêm Selenium IDE- xác định phần tử html cho trang web thử nghiệm
Để đáp ứng nhu cầu thiết kế của bạn, hướng dẫn này sẽ bao gồm tất cả các phương pháp này. Started any
Các bài viết liên quan
- Thanh cuộn [thanh cuộn] trong CSS
- CSS là gì?
- Selenium IDE- xác định phần tử html cho trang web thử nghiệm
- Kiểm tra lỗi bảo mật CSS Injection
- CSS trong React
Tóm tắt nội dung
- Cách ẩn thanh Scrollbar trong CSS [nhưng cho phép cuộn]
- Cách ẩn Thanh cuộn trong CSS [và không cho phép Cuộn]
- Cách ẩn thanh cuộn dọc trong CSS
- Cách ẩn thanh cuộn ngang trong CSS
- Cách ẩn thanh cuộn cho đến khi cần thiết
- Ẩn thanh cuộn bằng CSS
Cách ẩn thanh Scrollbar trong CSS [nhưng cho phép cuộn]
Không có quy tắc CSS chuyên dụng nào để ẩn thanh cuộn trong khi vẫn giữ khả năng cuộn xuống một trang / phần tử. Tuy nhiên, điều này có thể thực hiện được với một số quy tắc CSS dành riêng cho trình duyệt. Để ẩn thanh cuộn và giữ chức năng cuộn, hãy áp dụng CSS sau đó vào phần nội dung [cho toàn bộ trang] hoặc một phần cụ thể
/* css ẩn scrollbar */
element {
-ms-overflow-style: none; /* khai báo sử dụng Internet Explorer, Edge */
scrollbar-width: none; /* sử dụng Firefox */
overflow-y: scroll;
}
element::-webkit-scrollbar {
display: none; /* cho Chrome, Safari, and Opera */
}… trong đó phần tử là bộ chọn mà bạn muốn nhắm mục tiêu. Đây là mã này trông giống như thế nào khi được áp dụng cho toàn bộ trang
/* hide scrollbar nhưng vẫn cho phép scrollinh */
body {
-ms-overflow-style: none; /* cho Internet Explorer, Edge */
scrollbar-width: none; /* cho Firefox */
overflow-y: scroll;
}
body::-webkit-scrollbar {
display: none; /* cho Chrome, Safari, and Opera */
}
/* định dạng khác */
* {
background-color: #EAF0F6;
color: #2D3E50;
font-family: 'Avenir';
font-size: 26px;
font-weight: bold;
}Và đây là mã tương tự được áp dụng cho phần tử
/* hide scrollbar nhưng vẫn cho phép scrolling */
div {
-ms-overflow-style: none; /* cho Internet Explorer, Edge */
scrollbar-width: none; /* cho Firefox */
overflow-y: scroll;
}
div::-webkit-scrollbar {
display: none; /* cho Chrome, Safari, and Opera */
}
/* other styling */
div {
border: solid 5px black;
border-radius: 5px;
height: 300px;
padding: 10px;
width: 200px;
}
* {
background-color: #EAF0F6;
color: #2D3E50;
font-family: 'Avenir';
font-size: 26px;
font-weight: bold;
}Thanh cuộn thông thường sẽ xuất hiện trong cả hai trường hợp này, nhưng các quy tắc css của chúng tôi ngăn chặn điều này xảy ra trên các biến trình duyệt web phổ biến
Xem thêm Scrollbar[thanh cuộn] trong CSS
Cách ẩn Thanh cuộn trong CSS [và không cho phép Cuộn]
Để ẩn thanh cuộn và tắt tính năng cuộn, chúng ta có thể sử dụng CSS tràn thuộc tính. Thuộc tính này xác định phải làm gì với nội dung vượt ra ngoài ranh giới của vùng chứa
/* hide scrollbar and prevent scrolling */
#div-1 { overflow: hidden; }
#div-2 { overflow: visible; }
/* other styling */
div {
border: solid 5px black;
border-radius: 5px;
height: 100px;
margin: 20px;
width: 300px;
}
* {
background-color: #EAF0F6;
color: #2D3E50;
font-family: 'Avenir';
}Để ngăn chặn việc cuộn với thuộc tính này, chỉ cần áp dụng quy tắc tràn. hidden đối với nội dung [cho toàn bộ trang] hoặc một phần tử vùng chứa. Điều này ẩn tất cả nội dung bên ngoài biên giới của phần tử. Ngoài ra, sử dụng tràn. thấy được để hiển thị nội dung ra ngoài biên giới của vùng chứa
Điều này vô hiệu hóa cả cuộn dọc và ngang. Như chúng ta sẽ thấy tiếp theo, bạn cũng có thể vô hiệu hóa chỉ cuộn ngang hoặc chỉ cuộn dọc
Xem thêm Các tính năng ẩn của Yoast SEO
Cách ẩn thanh cuộn dọc trong CSS
Để ẩn thanh cuộn dọc và ngăn cuộn dọc, hãy sử dụng tràn-y như sau
/* hide vertical scrollbar cấm không sử dụng scrolling */
div {
overflow-y: hidden;
/* other styling */
border: solid 5px black;
border-radius: 5px;
height: 300px;
width: 300px;
}
img { height: 500px; }
/* other styling */
* {
background-color: #EAF0F6;
color: #2D3E50;
font-family: 'Avenir';
}Cách ẩn thanh cuộn ngang trong CSS
Bởi vì cuộn ngang nói chung là một ý niệm hư, quy tắc này có thể hữu ích. Để ẩn thanh cuộn ngang và ngăn cuộn ngang, hãy sử dụng tràn-x. ẩn giấu
/* hide vertical scrollbar và cấm ko cho sử dụng scrolling */
div {
overflow-x: hidden;
/* other styling */
border: solid 5px black;
border-radius: 5px;
height: 300px;
width: 300px;
}
img { height: 500px; }
/* other styling */
* {
background-color: #EAF0F6;
color: #2D3E50;
font-family: 'Avenir';
}Cách ẩn thanh cuộn cho đến khi cần thiết
Ẩn thanh cuộn có thể hỗ trợ thiết kế của bạn trong một số trường hợp. Nhưng ở những người khác, việc xóa phần này của trang thực sự có thể gây hại cho trải nghiệm của người dùng
/* hide scrollbar nhưng vẫn cho phép scrolling */
body { overflow: auto; }
/* other styling */
* {
background-color: #EAF0F6;
color: #2D3E50;
font-family: 'Avenir';
font-size: 26px;
font-weight: bold;
}Hầu hết khách truy cập liên kết hoạt động cuộn với một thanh cuộn có thể nhìn thấy. Vì vậy, nếu bạn áp dụng phương pháp này cho toàn bộ trang, nó có vẻ lạ đối với một số người. Ngoài ra, thanh cuộn cho chúng ta biết lượng trang chúng ta còn lại để xem [ngoại trừ khi thực hiện cuộn vô hạn]. Trừ khi bạn có một số chỉ báo trực quan khác cho rằng có nhiều nội dung hơn để xem, việc thiếu thanh cuộn có thể gây khó chịu
Thử nghiệm của người dùng có thể làm rõ thanh cuộn bị thiếu tác động như thế nào đến trải nghiệm của người dùng trên trang web của bạn, nhưng một giải pháp tốt trong nhiều trường hợp là thanh cuộn ẩn cho đến khi người dùng bắt đầu cuộn. Để bật tính năng này trong CSS, hãy sử dụng quy tắc tràn. tự động
Xem thêm CSS là gì?
Ẩn thanh cuộn bằng CSS
Cho dù bạn đang xây dựng một trang bằng CSS thuần túy hay khuôn khổ như Bootstrap, chỉ cần một vài quy tắc để ẩn thanh cuộn khỏi trang của bạn
Tuy nhiên, hãy nhớ rằng chỉ vì bạn có thể, không có nghĩa là bạn nên làm như vậy. Đối với nhiều người dùng, thanh cuộn là một gợi ý trực quan về tiện ích hỗ trợ điều hướng. Nếu bạn định xóa nó, hãy nhớ làm điều này theo cách có chủ ý và theo cách hỗ trợ thiết kế của bạn