Share Code Web - Chia sẻ niềm đam mê bất tận > Lập trình > Web Design > HTML/CSS > [Sharecode] Hướng dẫn tạo hiệu ứng Parallax với chỉ CSS
[Sharecode] Hướng dẫn tạo hiệu ứng Parallax với chỉ CSS
Nguyễn Trung Hiếu
Share Code Web Company 2018

[Sharecode] Hướng dẫn tạo hiệu ứng Parallax với chỉ CSS

Bài viết hướng dẫn cách tạo hiệu ứng Parallax với chỉ CSS mà không cần sử dụng Javascript

Parallax Effect là gì?

Để các bạn có thể tạo được hiệu ứng này theo cách đơn giản nhất thì trước tiên các bạn cần hiểu sơ qua Parallax Effect là gì trước đã.

“Parallax” là từ thường được dùng trong video games 2D, sử dụng nhiều hình ảnh nền rồi cho chúng cùng lúc di chuyển song song với những tốc độ khác nhau, tạo ra ảo giác về chiều sâu khi nhìn vào. Đối với Web Design thì parallax scrolling được dùng để tạo hiệu ứng 3 chiều với các element liên tục thay đổi vị trí khi người dùng có thao tác cuộn chuột.
-Thachpham.com

1. Các nguyên liệu dùng trong bài

Trong bài hướng dẫn này cũng không cần dùng nhiều đến tài nguyên bên ngoài vì chỉ thao tác với CSS là chủ yếu. Các bạn cần có những thứ sau:

  • Một bức ảnh nền thật ngầu
  • Dancing Script Font hoặc bất kỳ font nào bạn thấy hợp lý

2. Những kiến thức cần nhớ

Trong bài có sử dụng đến các thuộc tính trong css các bạn cần nhớ:
background-size:cover Tự chia tỷ lệ tới kích thước lớn nhất của chiều rộng hoặc chiều cao để phù hợp với vùng nội dung. Nếu chiều cao lớn hơn chiều rộng thì background sẽ chỉnh 100% theo chiều cao, chiều rộng sẽ tự động chỉnh tỷ lệ cho phù hợp (auto). Ngược lại nếu chiều rộng lớn hơn chiều cao thì background sẽ chỉnh 100% theo chiều rộng, chiều cao sẽ tự động chỉnh tỷ lệ cho phù hợp (auto).
transform-style: preserve-3d: Các thành phần bên trong sẽ giữ vị trí 3D của nó.
transform-origin:center center 0: Xác định nơi nhìn thấy được đặt trục X Y Z, ở đây là đặt tại tâm của mặt phẳng XY.
perspective:1px; Cho biết chiều sâu của thành phần 3D
– Sử dụng đơn vị đo vh vw để lấy theo tỉ lệ chiều rộng và chiều cao của trình duyệt. Trong đó 1 vw = 1% chiều ngang của trình duyệt.1 vh = 1% chiều cao của trình duyệt.

Và bây giờ là đến đoạn code của chúng ta

Đầu tiên là tập tin index.html

 
Và sau đó là tập tin style.css
 

 

And more…

Một sản phẩm khác trên codepen.io để các bạn tham khảo

See the Pen Pure CSS Parallax Effect by Joshua Bemenderfer (@tribex) on CodePen.

Related Posts

Tác giả: Nguyễn Trung Hiếu

Một blogger ... cùi bắp! Đơn giản: tôi muốn ghi lại những gì xảy ra xung quanh, cả công việc lẫn cuộc sống và chia sẻ với các bạn đọc. Nếu bạn cảm thấy bài viết có nhiều điểm không chính xác, hãy comment và chia sẻ để tôi còn được học hỏi từ những góp ý của bạn. Email: hieunt.dcn@gmail.com

2 Comments + Bình luận

Leave a comment

Bạn phải Đăng nhập để tham gia bình luận.

https://sharecodeweb.net/?s={search_term_string}

Blog Stats

  • 4.006 hits
%d bloggers like this: