CSS Parallax

Parallax – Tạo trang đầu và cuối

Posted on by admin

Trong phần này, kiso sẽ hướng dẫn các bạn tạo trang mở đầu và trang kết thúc của web với hiệu ứng parallax. Sau bài viết này, các bạn sẽ đạt được kết quả như phần demo. Nào chúng ta cùng bắt đầu.

1. Phần HTML

Trước hết hãy xem qua toàn bộ mã nguồn:

<body>
  <div class="parallax">
    <div class="shape">
      <img src="https://www.kiso.vn/wp-content/uploads/2019/03/16/1685/eagle.png">
      <img src="https://www.kiso.vn/wp-content/uploads/2019/03/16/1685/rhino.png">
      <img src="https://www.kiso.vn/wp-content/uploads/2019/03/16/1685/owl.png">
      <img src="https://www.kiso.vn/wp-content/uploads/2019/03/16/1685/lion.png">
      <img src="https://www.kiso.vn/wp-content/uploads/2019/03/16/1685/bear.png">
    </div>
    <audio src=".forest.mp3" controls autoplay>
      <p>If you are reading this, it is because your browser does not support the audio element.</p>
    </audio>
    <div onclick="toggleMuteAudio()" class="volume">
      <span><i class="fa fa-volume-up" aria-hidden="true"></i>
      </span>
    </div>
    <div class="side-menu"><!--b2 menu-->
      <ul>
        <li class="forest" onclick="moveToImage('.forest')">Forest</li>
        <li class="eagle" onclick="moveToImage('.eagle')">Eagle</li>
        <li class="rhino" onclick="moveToImage('.rhino')">Rhino</li>
        <li class="owl" onclick="moveToImage('.owl')">Owl</li>
        <li class="lion" onclick="moveToImage('.lion')">Lion</li>
        <li class="bear" onclick="moveToImage('.bear')">Bear</li>
      </ul>
    </div>
    <!--b1 background-image-->
    <div class="forest"></div>
    <div class="eagle">
      <p>
        <span>Eagle is the common name for many large birds of prey of the family Accipitridae.</span>
        <span>Eagles belong to several groups of genera, not all of which are closely related.</span> 
        <span>Most of the 60 species of eagle are from Eurasia and Africa.</span>
      </p>
    </div>
    <div class="rhino">
      <p>
        <span>A rhinoceros commonly abbreviated to rhino is one any of the numerous extinct species.</span>
        <span>Two of the extant species are native to Africa and three to Southern Asia.</span>
        <span>The term "rhinoceros" is often more broadly applied to now extinct relatives of the superfamily Rhinocerotoidea.</span>
      </p>
    </div>
    <div class="owl">
      <p>
        <span>Owls are birds from the order Strigiformes.</span>
        <span>Owls hunt mostly small mammals, insects, and other birds, although a few species specialize in hunting fish.</span>
        <span>They are found in all regions of the Earth except polar ice caps and some remote islands.</span>
      </p>
    </div>
    <div class="lion">
      <p>
        <span>The lion (Panthera leo) is a species in the family Felidae</span>
        <span>A lion pride consists of a few adult males, related females and cubs.</span>
        <span>Male lions have a prominent mane, which is the most recognisable feature of the species.</span>
      </p>
    </div>
    <div class="bear">
      <p>
        <span>Bears are carnivoran mammals of the family Ursidae.</span>
        <span>They are classified as caniforms, or doglike carnivorans.</span>
        <span>Bears are found on the continents of North America, South America, Europe, and Asia.</span>
      </p>
    </div>
    <div class="back">
      <div onclick="goHome()">
        <span><i class="fa fa-hand-pointer-o" aria-hidden="true"></i></span>
      </div>
    </div>
  </div>
  <div>Icons made by <a href="https://www.freepik.com/" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" 			    title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" 			    title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></div>
</body>

Phần này ta thêm vào thẻ div.shape với các thẻ img con bên trong. Các thẻ img sẽ trỏ tới những ảnh có phần mở rộng là png dùng cho giao diện phần trang mở đầu.

Kiso xin giới thiệu đến các bạn trang web mà các bạn có thể thoải mái tải các ảnh định dạng svg hoặc png miễn phí, chỉ với điều kiện thêm thẻ div bên dưới vào mã nguồn:

Bài viết này được đăng tại [kiso.vn]

<div>Icons made by <a href="https://www.freepik.com/" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" 			    title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" 			    title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></div>

Trang web có địa chỉ như sau: https://www.flaticon.com

2. Phần CSS

Trước hết hãy xem qua toàn bộ mã nguồn:

.parallax div.shape {
  position: absolute;
  z-index: 99;
}

.parallax .shape > img {
  height: 50px;
  width: 50px;
  position: absolute;

}

.parallax .shape > img:nth-child(1) {
  top: 50px;
  left: 100px;
  transform: translate(0, 0);
  animation: eagle 10s ease-in infinite;
}

.parallax .shape > img:nth-child(2) {
  bottom: 150px;
  left: 180px;
  transform: rotateZ(0deg) translateY(-10px);
  animation: rhino 4s linear infinite; 
}

.parallax .shape > img:nth-child(3) {
  bottom: 500px;
  left: 800px;
  transform: rotateZ(40deg) translate(0px,0px);
  animation: owl 3s ease-in infinite;
}

.parallax .shape > img:nth-child(4) {
  top: 400px;
  left: 500px;
  animation: lion 1.5s ease-out infinite;
}

.parallax .shape > img:nth-child(5) {
  top: 500px;
  left: 800px;
  opacity: 0;
  transition: 0.5s ease;
  animation: bear 2s ease-in-out infinite;
}

@keyframes eagle {
  0% {
    transform: translate(0,0);
  }
  50% {
    transform: translate(500px, 50px);
  }
  55% {
    transform: rotateY(180deg) translate(-540px, 45px);
  }
  95% {
    transform: rotateY(180deg) translate(40px, 45px);
  }
  100% {
    transform: translate(0,0) rotateY(0deg);
  }
}

@keyframes owl {
  0% {
    transform: rotateZ(40deg) translate(0px,0px);
  }
  30% {
    transform: rotateZ(-40deg) translate(20px,10px);
  }
  50% {
    transform: rotateZ(40deg) translate(10px,40px);
  }
  70% {
    transform: rotateZ(-40deg) translate(0px,50px);
  }
  100% {
    transform: rotateZ(40deg) translate(0px,0px);
  }
}

@keyframes bear {
  50% {
    opacity: 1;
    transform: scale(2,2)
  }
  100% {
    opacity: 0;
    transform: scale(0.5, 0.5);
  }
}

@keyframes lion {
  10% {
    transform: rotateX(360deg);
  }
  15% {
    transform: rotateZ(360deg);
  }
  20% {
    transform: rotateY(360deg)
  }
}

@keyframes rhino {
  50% {
    transform: rotateZ(-40deg) translateY(10px);
  }
  70% {
    transform: rotateZ(-40deg) translateY(20px);
  }
  100% {
    transform: rotateZ(0deg) translateY(-10px);
  }
}

div.back > div {
  font-size: 50px;
  height: 80px;
  width: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  border: 2px solid black;
}

div.back > div:hover {
  transition: 1s ease-in;
  background-color: azure;
  color: #196f3d ;
  border: 2px solid #196f3d ;
  cursor: pointer;
}

Các bước thực hiện:

Bước 1: định dạng cho thẻ div.shape và img

.parallax div.shape {
  position: absolute;
  z-index: 99;
}

.parallax .shape > img {
  height: 50px;
  width: 50px;
  position: absolute;

}

Bước 2: định dạng riêng biệt cho từng thẻ img

.parallax .shape > img:nth-child(1) {
  top: 50px;
  left: 100px;
  transform: translate(0, 0);
  animation: eagle 10s ease-in infinite;
}

.parallax .shape > img:nth-child(2) {
  bottom: 150px;
  left: 180px;
  transform: rotateZ(0deg) translateY(-10px);
  animation: rhino 4s linear infinite; 
}

.parallax .shape > img:nth-child(3) {
  bottom: 500px;
  left: 800px;
  transform: rotateZ(40deg) translate(0px,0px);
  animation: owl 3s ease-in infinite;
}

.parallax .shape > img:nth-child(4) {
  top: 400px;
  left: 500px;
  animation: lion 1.5s ease-out infinite;
}

.parallax .shape > img:nth-child(5) {
  top: 500px;
  left: 800px;
  opacity: 0;
  transition: 0.5s ease;
  animation: bear 2s ease-in-out infinite;
}

Bước 3: tạo hiệu ứng cho từng thẻ img

@keyframes eagle {
  0% {
    transform: translate(0,0);
  }
  50% {
    transform: translate(500px, 50px);
  }
  55% {
    transform: rotateY(180deg) translate(-540px, 45px);
  }
  95% {
    transform: rotateY(180deg) translate(40px, 45px);
  }
  100% {
    transform: translate(0,0) rotateY(0deg);
  }
}

@keyframes owl {
  0% {
    transform: rotateZ(40deg) translate(0px,0px);
  }
  30% {
    transform: rotateZ(-40deg) translate(20px,10px);
  }
  50% {
    transform: rotateZ(40deg) translate(10px,40px);
  }
  70% {
    transform: rotateZ(-40deg) translate(0px,50px);
  }
  100% {
    transform: rotateZ(40deg) translate(0px,0px);
  }
}

@keyframes bear {
  50% {
    opacity: 1;
    transform: scale(2,2)
  }
  100% {
    opacity: 0;
    transform: scale(0.5, 0.5);
  }
}

@keyframes lion {
  10% {
    transform: rotateX(360deg);
  }
  15% {
    transform: rotateZ(360deg);
  }
  20% {
    transform: rotateY(360deg)
  }
}

@keyframes rhino {
  50% {
    transform: rotateZ(-40deg) translateY(10px);
  }
  70% {
    transform: rotateZ(-40deg) translateY(20px);
  }
  100% {
    transform: rotateZ(0deg) translateY(-10px);
  }
}

Bước 4: định dạng thẻ div cho trang cuối

div.back > div {
  font-size: 50px;
  height: 80px;
  width: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  border: 2px solid black;
}

div.back > div:hover {
  transition: 1s ease-in;
  background-color: azure;
  color: #196f3d ;
  border: 2px solid #196f3d ;
  cursor: pointer;
}

3. Phần JavaScript

Trước hết hãy xem qua toàn bộ mã nguồn:

function toggleMuteAudio(){
  $("audio").prop("muted",!$("audio").prop("muted"));
  if($("audio").prop("muted")) {
    $(".volume i").removeClass("fa-volume-up");
    $(".volume i").addClass("fa-volume-off");
  }
  else {
    $(".volume i").removeClass("fa-volume-off");
    $(".volume i").addClass("fa-volume-up");
  }
}

function goHome() {
  moveToImage(".forest");
}

Ở phần này ta chỉ cần thêm hàm goHome() khi nhấn vào nút trở về màn hình chính ở trang cuối, hàm này sẽ gọi ngược trở lại hàm moveToImage(".forest") để trở về trang đầu tiên.

4. Lời kết

Sau bài viết này, kiso đã hướng dẫn các bạn tạo thành công trang mở đầu và trang kết thúc của trang web với hiệu ứng parallax. Đến chúng ta đã đi đến gần hết chặn đường của loạt bài viết này, chỉ còn một bài cuối nữa thôi hãy tiếp tục nhé. Cảm ơn các bạn.

Danh sách file tải về

Tên file tải vềPass giải nén
Parallax – Tạo trang đầu và cuối kiso.vn hoặc gameportable.net
Nhạc nền kiso.vn hoặc gameportable.net

Bài viết liên quan

[CSF-2] Một số thiết lập CSF, LFD 1
[CSF-2] Một số thiết lập CSF, LFD
24/11/2022

Hôm nay mình sẽ thực hiện một số thiết lập trên CSF Mở file config để sửa đổi một số tính năng dưới /etc/csf/csf.conf Nội dung chính1. Phần HTML2. Phần CSS3. Phần JavaScript4. Lời kết1....

[CSF-1] Tăng bảo mật Server với ConfigServer Firewall (CSF) 3
[CSF-1] Tăng bảo mật Server với ConfigServer Firewall (CSF)
24/11/2022

Nội dung chính1. Phần HTML2. Phần CSS3. Phần JavaScript4. Lời kết1. Khái niệm CSF: CSF (ConfigServer & Firewall) là một bộ ứng dụng hoạt động trên Linux như một firewall được phát hành miễn phí...

Sử dụng SSH Key với Gitlab và Github 7
Sử dụng SSH Key với Gitlab và Github
22/11/2022

Bài viết này mình sẽ hướng dẫn các bạn tạo ssh key cho Gitlab và Github SSH là gì? Secure Socket Shell là một giao thức mạng dùng để thiết lập kết nối mạng một...

Directory traversal vulnerabilities (phần 4) 10
Directory traversal vulnerabilities (phần 4)
21/11/2022

Nội dung chính1. Phần HTML2. Phần CSS3. Phần JavaScript4. Lời kếtV. Phân tích và khai thác các lỗ hổng Directory traversal (tiếp) 5. Bypass lỗ hổng khi trang web sử dụng đường dẫn đầy đủ...

Directory traversal vulnerabilities (phần 3) 39
Directory traversal vulnerabilities (phần 3)
21/11/2022

Nội dung chính1. Phần HTML2. Phần CSS3. Phần JavaScript4. Lời kếtV. Phân tích và khai thác các lỗ hổng Directory traversal 1. Lỗ hổng xảy ra khi sử dụng các hàm đọc file và tin...

Directory traversal vulnerabilities (phần 2) 67
Directory traversal vulnerabilities (phần 2)
21/11/2022

Nội dung chính1. Phần HTML2. Phần CSS3. Phần JavaScript4. Lời kếtIII. Vì sao lỗ hổng Directory traversal xuất hiện? Với mỗi ngôn ngữ lập trình khác nhau, điểm xuất hiện các lỗ hổng Directory traversal...

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *