06/04/2021, 14:49
Parallax - Tạo trang đầu và cuối - Hiệu ứng Parallax Scrolling
Trong phần này, Zaidap.com 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: ...
Trong phần này, Zaidap.com 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://Zaidap.com.net/upload/tut_post/images/2019/03/16/1685/eagle.png">
<img src="https://Zaidap.com.net/upload/tut_post/images/2019/03/16/1685/rhino.png">
<img src="https://Zaidap.com.net/upload/tut_post/images/2019/03/16/1685/owl.png">
<img src="https://Zaidap.com.net/upload/tut_post/images/2019/03/16/1685/lion.png">
<img src="https://Zaidap.com.net/upload/tut_post/images/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.
Zaidap.com 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:
<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, Zaidap.com đã 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.
Chuyên đề học lập trình web: Học phần HTML / CSS
Đây là chương thứ nhất trong chuyên đề tự học lập trình web với PHP. Trong chương này chúng ta sẽ học HTML và CSS trước.
Các bạn hãy sub kênh để ủng hộ mình nhé. Link chuyên đê tại đây.
