Trong bài viết tiếp theo về tạo các element chỉ bằng CSS, Sharescrip.net sẽ giới thiệu đến các bạn hiệu ứng cuộn ảnh khá là đẹp mắt – Sticky Section Scroll Effect. Toàn bộ source chỉ bao gồm HTML và CSS, tuy nhiên lại có một số thuộc tính khá mới so với CSS căn bản, từ đó có thể biết thêm được các thuộc tính hữu ích để tạo nên các hiệu ứng đẹp mắt hơn trong các sản phẩm của mình.
Giới thiệu:
Khi bạn cuộn trang web thì đồng thời các lớp ảnh cũng sẽ được cuộn từ dưới lên sao cho lớp này chồng lên lớp kia, do đó ảnh bên dưới sẽ bị che khuất bởi ảnh phía trên. Các bạn có thể xem ở ảnh dưới đây:
Hướng dẫn chi tiết:
- Các bạn tạo lần lượt các file index.html, main.css cho cùng vào một thư mục. Lựa chọn các file ảnh bất kỳ cho vào cùng thư mục. Ở đây mình sử dụng 5 ảnh, đặt tên lần lượt bg1.jpg, bg2.jpg, bg3.jpg, bg4.jpg, bg5.jpg.
- Trong file index.html, các bạn thêm thẻ head và body, phần style các bạn link tới main.css. Các bạn có thể xem trong bài viết trước để thực hiện nhanh bước này với VSCode:
index.html:<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Sticky Image Section Scrolling Effect</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" media="screen" href="main.css" /> <script src="main.js"></script> </head> <body> </body> </html>main.css:
body{ margin: 0; padding: 0; } - Thêm 1 thẻ div với class .container (tương ứng với số lượng ảnh các bạn muốn hiển thị) vào trong body, sau đó thêm 5 thẻ div vào trong div .container, đồng thời thêm class cho mỗi div này là .section:
<body> <div class="container"> <div class="section"></div> <div class="section"></div> <div class="section"></div> <div class="section"></div> <div class="section"></div> </div> </body> - Style cho class .container và .section, thay url đến đường dẫn ảnh phù hợp:
.container{ position: relative; width: 100%; } .container .section{ position: sticky; width: 100%; height: 100vh; top: 0; background: #000; } .container .section:nth-child(1){ background: url(bg1.jpg); background-size: cover; } .container .section:nth-child(2){ background: url(bg2.jpg); background-size: cover; } .container .section:nth-child(3){ background: url(bg3.jpg); background-size: cover; } .container .section:nth-child(4){ background: url(bg4.jpg); background-size: cover; } .container .section:nth-child(5){ background: url(bg5.jpg); background-size: cover; } - Tận hưởng thành quả của mình thôi =))
Video hướng dẫn chi tiết:
Các bạn có thể xem demo và download tại đây: