Hiệu ứng Parallax theo mình thấy nó không mang nhiều ý nghĩa lắm nhưng nó tạo cảm giác… mượt mà cho trang web. Nhiều trang web dùng hiệu ứng này làm cho trang web trở nên có thiện cảm cho khách truy cập.
Theo tìm hiểu thì mình thấy có nhiều cách để tạo ra hiệu ứng này cho trang web. Trong đó sử dụng thư viện jQuery với vài thư viện chuyên dụng. Tuy nhiên bạn có thể dễ dàng tạo hiệu ứng này dễ dàng với CSS.
Mời các bạn xem trang web demo: http://mangbinhdinh.vn/demo/parallax/
Mã CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | #main-container { float:left; width:100%; margin:0; padding:0; text-align: center; height: 2000px; } .section{ position: relative; height: 0; padding-bottom: 75%; z-index: 1; } #section1{ background-image: url(bg-parallax-1.jpg); /*Ảnh nền*/ background-repeat: no-repeat; background-size: 100% auto; background-position: center top; background-attachment: fixed; } #section2{ background-image: url(bg-parallax-2.jpg); /*Ảnh nền*/ background-repeat: no-repeat; background-size: 100% auto; background-position: center top; background-attachment: fixed; } |
Và đây là mã HTML
1 2 3 4 5 6 | <div id="main-container" > <div id="section1" class="section"> </div> <div id="section2" class="section"> </div> </div> |
Tùy theo mục đích sử dụng mà bạn có thể tùy biến thêm cho phù hợp
Các bạn có thể tải trang web mẫu tại:
Box: http://tinyurl.com/nonw3rt
Mediafire: http://tinyurl.com/ok9obav
Chúc các bạn thành công
Huỳnh Mai Anh Kiệt
- Advertisement -
