Berbicara tentang design web memang tidak ada habisnya, banyak sekali bermunculan design-design yang sangat menarik dan jujur membuat kita lebih termotivasi dengan adanya hal tersebut. Scroll Parallax adalah trend desain web di mana konten background atau latar belakang (berupa gambar) dipindahkan dengan kecepatan berbeda dari pada konten latar depannya saat di scroll. Klai ini saya akan menshare bagaimana Membuat Scroll Parallax dengan CSS , langsung saja kita praktekan guys.. 
sebelum menuliskan koding, kalian harus siapkan gambar gambarnya terlebih dahulu yah guys, di sini saya menyiapkan enam gambar dengan ukuran yang sama yaitu 1200 x 500 pixel. Kalian bisa cari yah di google. Beri nama masing-masing gambar agar kalian tidak 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 buat 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;
}
sekian tutorial Membuat Scroll Parallax dengan CSS , semoga bermanfaat.. keep coding :D.
The post Membuat Scroll Parallax dengan CSS appeared first on Kursus Website Terbaik.