Hướng dẫn tạo hiệu ứng Parallax Scrolling Effect với CSS - Demo
RUN
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> body, html { height: 100%; width: 90%; margin: auto; } .parallax { /* The image used */ background-image: url('https://freetuts.net/upload/tut_post/images/2017/08/09/994/demo.jpg'); /* Full height */ height: 100%; /* Create the parallax scrolling effect */ background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; } </style> </head> <body> <h2>Freetuts.net hướng dẫn tạo hiệu ứng Parallax Scrolling Effect</h2> <div class="parallax"></div> <div style="height:1000px;background-color:green;font-size:36px"> Cuộn chuột để xem hiệu ứng! </div> <div class="parallax"></div> </body> </html>
PHÓNG TO