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

Được viết bởi: phuongle (SMod)

Bình luận: 0
0 Lượt chia sẻ
Lượt xem

Độ khó

Dễ

Số bước

Thời gian

Chia sẻ

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="<a href="https://freetuts.net/upload/tut_post/images/2019/03/16/1685/eagle.png">https://freetuts.net/upload/tut_post/images/2019/03/16/1685/eagle.png</a>">
      <img src="<a href="https://freetuts.net/upload/tut_post/images/2019/03/16/1685/rhino.png">https://freetuts.net/upload/tut_post/images/2019/03/16/1685/rhino.png</a>">
      <img src="<a href="https://freetuts.net/upload/tut_post/images/2019/03/16/1685/owl.png">https://freetuts.net/upload/tut_post/images/2019/03/16/1685/owl.png</a>">
      <img src="<a href="https://freetuts.net/upload/tut_post/images/2019/03/16/1685/lion.png">https://freetuts.net/upload/tut_post/images/2019/03/16/1685/lion.png</a>">
      <img src="<a href="https://freetuts.net/upload/tut_post/images/2019/03/16/1685/bear.png">https://freetuts.net/upload/tut_post/images/2019/03/16/1685/bear.png</a>">
    </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="<a href="https://www.freepik.com/">https://www.freepik.com/</a>" title="Freepik">Freepik</a> from <a href="<a href="https://www.flaticon.com/">https://www.flaticon.com/</a>"               title="Flaticon">www.flaticon.com</a> is licensed by <a href="<a href="http://creativecommons.org/licenses/by/3.0/">http://creativecommons.org/licenses/by/3.0/</a>"              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ẻ imgcon bên trong. Các thẻ imgsẽ trỏ tới những ảnh có phần mở rộng là pngdùng cho giao diện phần trang mở đầu.

Freetuts 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 svghoặc pngmiễn phí, chỉ với điều kiện thêm thẻ divbên dưới vào mã nguồn:

<div>Icons made by <a href="<a href="https://www.freepik.com/">https://www.freepik.com/</a>" title="Freepik">Freepik</a> from <a href="<a href="https://www.flaticon.com/">https://www.flaticon.com/</a>"                 title="Flaticon">www.flaticon.com</a> is licensed by <a href="<a href="http://creativecommons.org/licenses/by/3.0/">http://creativecommons.org/licenses/by/3.0/</a>"              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ẻ divcho 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, chúng tôi đã 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.Cảm ơn các bạn đã theo dõi bài viết này.

Theo:https://freetuts.net