Membuat Scroll Parallax dengan CSS
Berbicara mengenai design web memang tak ada habisnya, banyak sekali bermunculan design-design yang amat menarik dan jujur merancang kita lebih termotivasi dengan adanya hal tersebut. Scroll Parallax yakni trend desain web di mana konten background atau latar belakang (berupa gambar) dipindahkan dengan kecepatan berbeda dari di konten latar depannya ketika di scroll. Klai ini saya akan menshare bagaimana Membuat Scroll Parallax dengan CSS , seketika saja kita praktekan guys.. 😀
sebelum menuliskan koding, kalian mesti siapkan gambar gambarnya terlebih dahulu yah guys, di sini saya menyiapkan enam gambar dengan ukuran yang sama yaitu 1200 x 500 pixel. Kalian dapat cari yah di google. Beri nama masing-masing gambar agar kalian tak sulit mengetahuinya. lihat contoh gambar di bawah ini
Buka text editor kesangan kalian dan ketikan kode HTML di bawah ini dan beri nama dengan nama index.html dan jangan lupa di simpan sejajar dengan file gambar gambar yang telah kalian sediakan
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=UTF-8>
<title>background fixed</title>
<link rel=stylesheet href=style.css>
</head>
<body>
<div class=container>
<div class=images>
<div class=hitam>
<h1 class=col>Scroll Me</h1>
</div>
<div class=satu></div>
<div class=dua>
<h1>Scroll Me Again</h1>
</div>
<div class=tiga></div>
<div class=empat>
<h1>Scroll Me Again</h1>
</div>
<div class=lima></div>
<div class=enam>
<h1>Scroll Me Again</h1>
</div>
<div class=tujuh></div>
<div class=delapan>
<h1>Scroll Me Again</h1>
</div>
<div class=sembilan></div>
<div class=sepuluh>
<h1 class=col>Cool!!</h1>
</div>
</div>
</div>
</body>
</html>
setelah itu kalian bikin file css dan beri nama file tersebut dengan style.css dan ketikan kode CSS di bawah ini.
*{margin: 0;padding: 0;}
body{background: #fff;}
.container{
width: 100%;
margin: auto;
}
.hitam{
height: 1000px;
background: #123;
}
.satu{
background:url(1.jpg)fixed;
height: 500px;
width: 100%;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
}
.dua{
height: 500px;
background: #2980b9
}
h1{
text-align: center;
font-family: arial;
font-size: 100px;
color: #fff;
line-height: 500px;
text-transform: lowercase;
}
.col{
text-align: center;
font-family: arial;
font-size: 100px;
color: #fff;
line-height: 1000px;
text-transform: lowercase;
}
.tiga{
background:url(2.jpg)fixed;
height: 500px;
width: 100%;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
}
.empat{
height: 500px;
background: #c0392b;
}
.lima{
background:url(3.jpg)fixed;
height: 500px;
width: 100%;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
}
.enam{
height: 500px;
background: #27ae60;
}
.tujuh{
background:url(4.png)fixed;
height: 500px;
width: 100%;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
}
.delapan{
height: 500px;
background: #8e44ad;
}
.sembilan{
background:url(5.jpg)fixed;
height: 500px;
width: 100%;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
}
.sepuluh{
height: 1000px;
background: #f39c12;
}demikian panduan Membuat Scroll Parallax dengan CSS , semoga bermanfaat.. keep coding :D.
Sumber https://kursuswebsite.org
