Trung Quân
  • Node.js
  • ReactJS
    • Learn React Hooks
  • MERN Stack
  • Thuật Toán
  • Công Nghệ
    • Amazon AWS
    • Hosting – Domain
  • Về Tác Giả
  • Bản Quyền
Top Posts
Lộ trình học lập trình Web từ con...
Nhận diện, xác thực khuôn mặt với ReactJS...
Tạo hiệu ứng thẻ bài Magic với HTML...
NodeJS viết API gửi Email với OAuth2 và...
Tạo hiệu ứng Parallax đơn giản chỉ với...
Git – GitHub • Học Git thực tế...
Tạo một trang GitHub Profile phiên bản vũ...
Cài đặt iTerm2, Oh My Zsh, Zsh-autosuggestions và...
Cài đặt NVM, NodeJS và GIT trên MacOS...
Thuật toán Tìm phần tử bị lặp đầu...

Trung Quân

  • Node.js
  • ReactJS
    • Learn React Hooks
  • MERN Stack
  • Thuật Toán
  • Công Nghệ
    • Amazon AWS
    • Hosting – Domain
  • Về Tác Giả
  • Bản Quyền
Developer Tips

Tạo hiệu ứng Parallax đơn giản chỉ với CSS thuần

by trungquandev May 4, 2022August 14, 2022
written by trungquandev May 4, 2022August 14, 2022
tao-hieu-ung-parallax-don-gian-chi-voi-css-thuan-trungquandev-feature-img

Xin chào tất cả các bạn, mình là Quân, như tiêu đề bài viết hôm nay mình sẽ hướng dẫn các bạn làm hiệu ứng Parallax đơn giản chỉ với HTML và CSS thuần nha. Về Parallax nâng cao hơn cần dùng tới JavaScript thì mình sẽ viết ở một bài khác nhé.

“Bài này nằm trong loạt bài Tổng hợp kiến thức hữu ích cho lập trình viên trên trang blog chính thức trungquandev.com“

Những nội dung có trong bài:

  1. Parallax trong CSS là gì?
  2. Giải thích cách làm và Triển khai code Parallax

1. Parallax trong CSS là gì?

Đầu tiên mình sẽ show luôn một cái video ngắn demo kết quả như này luôn nhé.

Parallax hay nói đầy đủ Parallax Scrolling Effect (hiệu ứng thị sai) trong CSS là một Tip CSS nhỏ giúp bạn tạo sự thu hút trên trang web đối với người dùng, đặc biệt là các trang Landing Page.

Về mặt kỹ thuật, mình đọc trên google thấy nhiều trang nước ngoài mỗi trang lại định nghĩa mỗi khác một chút, riêng mình thì rút ra kết luận đơn giản thế này cho dễ hiểu nhé: “Parallax Scrolling Effect là cách làm cho các hình ảnh nền – Background di chuyển với tốc độ khác nhau khi người dùng cuộn trang web. Và nó tạo ra một cảm giác có chiều sâu đối với thị giác của chúng ta khi nhìn vào.”

Các bạn có thể vào trang Codepen và tìm từ khóa Parallax sẽ thấy rất nhiều ví dụ từ đơn giản tới phức tạp có sử dụng tới nhiều Javascript nhé, còn trong nội dung bài hôm nay, mình sẽ hướng dẫn các bạn làm ví dụ ở trên theo cách chỉ sử dụng CSS thuần thôi nha.

(Ngoài lề quen thuộc: Cảnh báo này dành cho bất kể trang nào khác mà có ý định copy bài không phải của các bạn thì hãy tôn trọng người viết bài chân chính, tuyệt đối không được xào nấu, chỉnh sửa linh tinh bài viết của mình cụ thể là không được xóa những liên kết (link) cũng như tự ý xóa các câu thoại của mình trong toàn bộ bài viết rồi post lại lên trang của các bạn như kiểu đây là bài của các bạn vậy, nếu tham khảo thì hãy để lại liên kết nguồn rõ ràng từ trang trungquandev, mình sẽ thường xuyên dùng tool để check, và nếu phát hiện ra thì cứ đơn giản là chắc chắn sẽ ăn report DMCA nhé.)


2. Giải thích cách làm và Triển khai code Parallax

Nếu bạn nào làm theo post này gặp vấn đề hoặc muốn xem hướng dẫn bằng video thì mình cũng có làm sẵn một video hướng dẫn lại rất chi tiết ở link này nha:

  • Link to YouTube: Trungquandev Official

Đầu tiên các bạn tạo cho mình 2 file là index.html và style.css nhé, chỉ cần 2 file này là đủ.

Copy + Paste code dưới đây vào file index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="icon" href="./resources/favicon/logo-trungquandev-transparent-bg-256x256-ico.ico" sizes="16x16">
  <title>Parallax - Trungquandev</title>
  <link rel="stylesheet" href="./style.css" type="text/css">
</head>
<body>
  <div class="content-wrapper">
    <div class="parallax">
      <div class="parallax-image" style="background-image: url('./resources/parallax-css-trungquandev-02.jpg');"></div>
      <div class="content">Hey there!</div>
    </div>
    <div class="static">
      <div class="sub-content">Pure CSS Parallax Scrolling Effect</div>
    </div>
    <div class="parallax">
      <div class="parallax-image" style="background-image: url('./resources/parallax-css-trungquandev-03.jpg');"></div>
      <div class="content">I'm Trungquandev!</div>
    </div>
    <div class="static">
      <div class="sub-content">Pure CSS Parallax Scrolling Effect</div>
    </div>
    <div class="parallax">
      <div class="parallax-image" style="background-image: url('./resources/parallax-css-trungquandev-04.jpg');"></div>
      <div class="content">From the Earth!</div>
    </div>
    <div class="static">
      <div class="sub-content">
        <div>Thank you!</div>
        <div><a href="https://trungquandev.com" target="_blank" rel="noopener noreferrer">Blog: https://trungquandev.com</a></div>
        <div><a href="https://cv.trungquandev.com" target="_blank" rel="noopener noreferrer">CV: https://cv.trungquandev.com</a></div>
        <div><a href="https://www.youtube.com/c/TrungquandevOfficial" target="_blank" rel="noopener noreferrer">YouTube: Trungquandev Official</a></div>
        <div><a href="https://www.vecteezy.com/" target="_blank" rel="noopener noreferrer">Credit to the images from: https://www.vecteezy.com/</a></div>
      </div>
    </div>
  </div>
</body>
</html>

Ở đoạn code trên các bạn chỉ cần để ý cho mình cấu trúc HTML bên trong body nhé, toàn bộ code sẽ bọc trong một thẻ div to nhất có class là .content-wrapper, tiếp theo là các thẻ div .parallax và .static xen kẽ nhau.

Bên trong .parallax sẽ có thẻ .parallax-image để chứa cái ảnh background-image, còn phần .content với .sub-content thì là những text đơn giản rồi nha. Đối với ảnh để làm demo bài này thì mình lấy ở trang web vecteezy.com, Các bạn có thể lấy bất kỳ ảnh nào các bạn thích, còn nếu muốn lấy ảnh giống như mình làm demo thì cứ lên luôn Repo GitHub này của mình (Thư mục số 5) để lấy cho nhanh nha.
– https://github.com/trungquandev/trungquandev-public-utilities-algorithms

Cũng để ý luôn cho mình là ở file index.html trên mình đã có dòng code này để link tới file style.css nhé

<link rel="stylesheet" href="./style.css" type="text/css">

Đối với file style.css, đầu tiên hãy copy và paste đoạn code này vào trước:

body {
  margin: 0;
}

.content-wrapper {
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  /* ... */
}

.parallax,
.static {
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.parallax {
  height: 100vh;
  /* ... */
}

.static {
  height: 80vh;
  z-index: 999;
  background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%);
}

.parallax>.parallax-image {
  position: absolute;
  width: 100%;
  height: 100%;
  /* ... */
}

.content {
  font-size: 6rem;
  /* ... */
}
.sub-content {
  font-size: 2rem;
  text-align: center;
}
.sub-content a {
  color: inherit;
  font-size: 1.5rem;
  text-decoration: none;
}
.sub-content a:hover {
  color: #1dd1a1;
}

Những cái CSS ở trên đều là các CSS cơ bản như flex, width, height , font, color…vv các thứ nên mình sẽ không giải thích lại nhé, bạn nào muốn học kỹ hơn thì mình có một Series về TailwindCSS hướng dẫn làm những cái css trên rất chi tiết ở đây nha.
TailwindCSS Thực Chiến • Tạo một trang Coffee Style Landing Page siêu đẹp.

Chú ý cho mình: những cái đoạn mà mình comment dấu ba chấm như này: /* … */
– Bây giờ mình sẽ thêm code vào các phần có comment đó nhé.
*** Có thể tóm gọn cách để làm cái Parallax chỉ bằng CSS thuần thì chúng ta sẽ “Tăng khoảng cách nhìn vào giữa người dùng và màn hình (perspective), sau đó dịch chuyển nó theo trục Z (với giá trị âm) trên không gian 3d và Scale tăng kích thước phần tử lên.
Bởi vì khi dùng perspective để tăng khoảng cách nhìn nghĩa là phần tử con bên trong của chúng ta sẽ hiển thị nhỏ hơn.”
*** Chúng ta sẽ sử dụng 3 thuộc tính CSS là perspective để tăng khoảng cách, transform: translateZ() kết hợp scale() trên không gian 3d: transform-style: preserve-3d; để đạt được mục đích ở trên nhé.

Lần lượt từ phần tử .content-wrapper (thêm cho mình perspective cho vụ tăng khoảng cách nhìn)

.content-wrapper {
  /* ... */
  perspective: 2px;
}

Đến phần tử .parallax (đảm bảo các phần tử con bên trong nó được định vị trên không gian 3d)

.parallax {
  /* ... */
  transform-style: preserve-3d;
}

Tiếp đến là phần tử .parallax-image (đối với translateZ – di chuyển trên không gian 3d, nếu chúng ta set giá trị dương lớn hơn 0 thì phần tử sẽ lớn hơn giống kiểu zoom to lên và nếu giá trị âm thì ngược lại sẽ nhỏ hơn)

.parallax>.parallax-image {
  /* ... */
  transform: translateZ(-1px) scale(1.5);
  z-index: -1;
  background-size: cover;
  background-position: center;
}

Cuối cùng là phần tử .content (dùng translateZ giá trị dương và scale thêm chút để khi scroll nó chạy nhanh hơn)

.content {
  /* ... */
  transform: translateZ(1px) scale(.5);
}

Và kết quả cuối cùng thì cũng như video mà mình đã show ở trên kia cũng như có demo trên YouTube nha:

  • Link to YouTube: Trungquandev Official (đang cập nhật)

4. Chia sẻ full toàn bộ Source Code của bài hôm nay trên Github

Vậy là kết thúc bài hôm nay mình đã hướng dẫn xong cách tạo hiệu ứng Parallax đơn giản bằng CSS thuần nhé.

Mình có để full source code của bài hôm nay ở repo này (Thư mục số 5) cho các bạn tham khảo giống như mọi lần, các bạn có thể clone về và làm theo các bước hướng dẫn mà mình có để trong file README nhé, chỉ có vài bước khá dễ dàng thôi.
https://github.com/trungquandev/trungquandev-public-utilities-algorithms

Và nếu thấy bài viết cũng như video bổ ích, hãy ủng hộ mình bằng cách Đăng ký kênh Youtube Trungquandev Official để mình có động lực tiếp tục viết những bài viết hay cũng như ra thêm nhiều video chất lượng hơn nữa nha, cảm ơn các bạn nhiều !!!
https://www.youtube.com/c/TrungquandevOfficial


Cảm ơn các bạn đã dành thời gian đọc bài viết.

Xin chào và hẹn gặp lại các bạn ở những bài viết tiếp theo.

Best Regards – ? Trungquandev Official ❤


Tham khảo kiến thức:

https://codepen.io/search/pens?q=parallax
https://alvarotrigo.com/blog/how-to-create-a-parallax-effect-with-css-only/

Nguồn ảnh mình sử dụng:

https://www.vecteezy.com/

“Thanks for awesome knowledges.”
“ From author: trungquandev ”

Khóa học lập trình làm việc thực tế:

Nếu các bạn thấy bài viết của mình có ích thì hãy ủng hộ mình bằng cách tham khảo bài viết giới thiệu khóa học lập trình MERN Stack Miễn Phí cực kỳ chất lượng và chính chủ dưới đây của mình nhé, cảm ơn các bạn ^^
KHOÁ HỌC LẬP TRÌNH MERN STACK 100% DỰ ÁN THỰC TẾ và CHẤT LƯỢNG
mern-stack-course-trungquandev
cssgitjavascriptparallaxtrungquandev
0 comment
0
FacebookTwitterGoogle +Pinterest
trungquandev

previous post
Git – GitHub • Học Git thực tế để đi làm
next post
NodeJS viết API gửi Email với OAuth2 và Nodemailer

Related Posts

Cài đặt WSL2 để sử dụng Ubuntu dễ...

November 29, 2021

Tạo một trang GitHub Profile phiên bản vũ...

March 12, 2022

Cài đặt NVM, NodeJS và GIT trên MacOS...

February 19, 2022

Nhận diện, xác thực khuôn mặt với ReactJS...

September 25, 2022

Tạo hiệu ứng thẻ bài Magic với HTML...

August 14, 2022

Cài đặt iTerm2, Oh My Zsh, Zsh-autosuggestions và...

February 19, 2022

Git – GitHub • Học Git thực tế...

March 13, 2022

Bát Chánh Đạo

batchanhdao-trungquandev

About Me

About Me

Trung Quân

Software Engineer at Pod Foods

Academy Of Cryptography Techniques

"I am a dog and cat lover, love green, love to read books, write blog and oil painting ..."

Read my CV → https://cv.trungquandev.com/

My Maxim Live

A bit of fragrance clings to the hand that gives flowers!

For Vietnamese young generation

Đừng bao giờ làm người khổng lồ trong tư tưởng nhưng chỉ là thằng lùn trong hành động.

Keep in touch

Facebook Instagram Linkedin Youtube Email Github

Fanpage Facebook

Facebook

Học lập trình “MERN Stack Cơ Bản” qua ứng dụng thực tế

mern-stack-trello-app-trungquandev


  Khóa học lập trình MERN Stack (NodeJS, ReactJS, ExpressJS, MongoDB) cực kỳ chất lượng và Miễn Phí do chính mình hướng dẫn nhé:
  MERN Stack - xây dựng ứng dụng quản lý công việc dạng Kanban tương tự Trello.

Học lập trình “MERN Stack Nâng Cao” qua ứng dụng thực tế

mern-stack-advanced-trello-app-trungquandev


  * Học lập trình MERN Stack Nâng Cao (NodeJS, ReactJS, ExpressJS, MongoDB). Đây là một khóa học mà mình đã làm cực kỳ tâm huyết, với phong cách dạy lập trình làm dự án thực tế, chuyên nghiệp. Để các bạn có một hành trang kiến thức vững chắc cho hành trình làm lập trình viên trong tương lai nhé.
  Lập Trình MERN Stack Nâng Cao - Học Thực Tế Để Đi Làm

YouTube: Trungquandev Official

youtube-channel-trungquandev-official


  - Các bạn tham khảo kênh YouTube chính thức của mình và ủng hộ mình bằng cách tặng mình một lượt Đăng Ký Kênh nha.
Cảm ơn các bạn ^^

  YouTube: TRUNGQUANDEV OFFICIAL

© Copyright

Bản quyền:
  © DMCA (Digital Millennium Copyright Act)


DMCA.com Protection Status

License

Giấy phép nội dung:
  Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 Quốc tế.


Giấy phép Creative Commons

Other links

Portfolio của mình:
  https://cv.trungquandev.com

Lập trình cuộc sống:
  https://laptrinhcuocsong.com

Nhiều bài viết hay về javascript:
  https://codetheworld.io

  • Facebook
  • Youtube
  • GitHub
  • Linkedin
  • Instagram

@2022 - trungquandev.com. Since 2016 - All Right Reserved. Developed by Trung Quân Dev