Bertemu dengan saya lagi di blangkon koding, kali ini saya akan membagikan tutorial membuat effect parallax sederhana menggunakan html dan css, tutorial ini saya peroleh dari https://codepen.io/webcrafterscz/pen/xmYeya kalau tidak salah,cuss scriptnya ada dibawah.
1. Pertama kita buat dulu folder dengan nama parallax, di dalam folder parallax kita buat lagi folder css untuk menyimpan script css. kita buat dulu script htmlnya dengan nama index lalu kita simpan pada folder parallax. scriptnya bisa copas dibawah ini, simpan dengan nama index.html
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Travel circles CSS</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class='page'>
<div class='content'>
<div class='circle'>
<div class='circle_title'>
<h2>Great Outdoors</h2>
<h3>Get some fresh air</h3>
</div>
<div class='circle_inner'>
<div class='circle_inner__layer'>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/pc1.png'>
</div>
<div class='circle_inner__layer'>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/pc3.png'>
</div>
<div class='circle_inner__layer'>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/pc2.png'>
</div>
</div>
<div class='content_shadow'></div>
</div>
</div>
<div class='content'>
<div class='circle'>
<div class='circle_title'>
<h2>City Breaks</h2>
<h3>Go somewhere new</h3>
</div>
<div class='circle_inner'>
<div class='circle_inner__layer'>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/pc4.png'>
</div>
<div class='circle_inner__layer'>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/pc5.png'>
</div>
<div class='circle_inner__layer'>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/pc6.png'>
</div>
</div>
<div class='content_shadow'></div>
</div>
</div>
<div class='content'>
<div class='circle'>
<div class='circle_title'>
<h2>Cheap Flights</h2>
<h3>Come fly with me</h3>
</div>
<div class='circle_inner'>
<div class='circle_inner__layer'>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/pc7.png'>
</div>
<div class='circle_inner__layer'>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/pc8.png'>
</div>
<div class='circle_inner__layer'>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/pc9.png'>
</div>
</div>
<div class='content_shadow'></div>
</div>
</div>
</div>
</body>
</html>
2.kedua buat script CSSnya lalu kita simpan pada folder css yang ada di folder parallax, simpan dengan nama style.css
font-family: "Montserrat", sans-serif;
background-color: #fce38a;
}
body .content {
width: 33.33%;
display: inline-block;
margin: 0 auto;
position: relative;
height: 100vh;
max-width: 300px;
}
body .circle_inner__layer {
width: 600px;
height: 200px;
transition: all 0.4s;
position: absolute;
top: 0;
left: -200px;
}
body .circle_inner__layer img {
width: 100%;
position: absolute;
bottom: 0;
}
body .circle {
position: absolute;
left: 0;
right: 0;
margin: auto;
top: 50%;
width: 200px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
transition: all 0.5s;
cursor: pointer;
}
body .circle:hover .circle_shine {
top: 330px;
left: -200px;
}
body .circle_shine {
background: #fce38a;
width: 600px;
transition: 0.3s;
height: 200px;
opacity: 0.2;
top: -10px;
left: -90px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
z-index: 2;
}
body .circle:hover h2,
body .circle:hover h3 {
opacity: 1;
top: -36px;
}
body .circle:hover .content_shadow {
-webkit-transform: scale(1.1);
transform: scale(1.1);
top: -22px;
}
body .circle:hover h3 {
transition: all 0.2s 0.04s;
}
body .circle:hover h2 {
transition: all 0.2s;
}
body .circle .circle_inner__layer:nth-of-type(1) {
top: 0px;
left: 0px;
}
body .circle .circle_inner__layer:nth-of-type(2) {
top: 0px;
left: -210px;
}
body .circle .circle_inner__layer:nth-of-type(3) {
top: 0px;
left: -440px;
}
body .circle_title {
text-align: center;
}
body .circle_title h2,
body .circle_title h3 {
opacity: 0;
color: #333;
margin: 0;
transition: all 0.2s 0.04s;
position: relative;
top: -10px;
}
body .circle_title h3 {
transition: all 0.2s;
color: #555;
font-size: 15px;
}
body .circle_inner {
border-radius: 200px;
background: #b0d5d6;
overflow: hidden;
margin: auto;
width: 200px;
z-index: 1;
transition: all 0.3s;
height: 200px;
position: relative;
}
body .circle_inner:hover {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
body .circle_inner:hover .circle_inner__layer:nth-of-type(1) {
left: -80px;
transition: all 4s linear;
}
body .circle_inner:hover .circle_inner__layer:nth-of-type(2) {
left: -400px;
transition: all 4s linear;
}
body .circle_inner:hover .circle_inner__layer:nth-of-type(3) {
left: -140px;
transition: all 4s linear;
}
lalu kita klik dua kali file html atau klik kanan open with browser kalian, jika berhasil maka akan tampil sperti dibawah ini.
https://codepen.io/webcrafterscz/pen/xmYeya
Share This :
comment 0 komentar
more_vert