Assalmualaikum Warahmatullahi Wabarakatu
Bismillahirrahmanirrahiim
Parallax Scrolling Background merupakan web design populer pada saat ini. Background dengan gaya parallax (bergerser/bergoyang) ini membuat web terlihat keren, modern dan smooth (lembut) ketika di scroll.
Untuk membuat Parallax Scrolling Background sangat banyak plugin-pluginya di internet yang dapat digunakan dengan berabagai gaya dan efek, disini saya menggunkan jarallax.js , alasannya kenapa saya memilih plugin tersebut adalah untuk mempermudah membuat parallax scrolling satu halaman penuh & setengah halaman tanpa ada space dibagian atas dan bawah. Oke langsung saja ....
Langkah Pertama
Silahkan sobat download file-file yang dibutuhkan disini
Langkah Kedua
Extract hasil download di folder root aplikasi sobat, maka sobat akan melihat ada beberapa folder yang berisi file javascript, css & gambar.
Langkah Ketiga
Jika kedua hal diatas sudah sobat lakukan , ketiklah kode dibawah ini, menggunakan text editor kesayangan sobat, kemudian simpan dengan nama yang sobat kehendaki, saya disini menggunakan nama index.html
<!DOCTYPE html> <html lang="en" class="style-full-height"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Aguzrybudy.com | Parallax Scrolling Background</title> <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'> <link href='css/style.css' rel='stylesheet' type='text/css'> <script src="js/jquery.min.js"></script> <script src="js/jarallax.js"></script> </head> <body> <!-- jarallax full halaman dengan hero content --> <div class="jarallax" style="background-image: url(images/bg1.jpg);"> <div class="style-table"> <div class="style-table-cell"> <h1>Parallax Scrolling Background</h1> <h2>Aguzrybudy.com</h2> </div> </div> </div> <!-- jarallax setengah halaman --> <div class="half-jarallax" style="background-image: url(images/bg2.jpg);"></div> <div class="jarallax" style="background-image: url(images/bg3.jpg);"></div> <!-- jarallax full halaman dengan hero content --> <!-- jarallax setengah halaman --> <div class="half-jarallax" style="background-image: url(images/bg1.jpg);"></div> <div class="jarallax" style="background-image: url(images/bg5.jpg);"></div> <script type="text/javascript"> /* load clas Jarallax untuk mengaktifkan parallax background */ $('.jarallax').jarallax({ speed: 0.5, imgWidth: 1366, imgHeight: 768 }); $('.half-jarallax').jarallax({ speed: 0.5, imgWidth: 1366, imgHeight: 768 }) </script> </body> </html>
Langkah Keempat
Jika langkah ketiga sudah selesai , selanjutnya ketiklah kode css dibawah ini simpan dengan nama style.css, atau sesuai dengan yang sobat inginkan.
/* body styles */ body { font-family: 'Montserrat', sans-serif; margin: 0; color: #fff; line-height: 1.5; } h1 { font-size: 50px; } h2 { font-size: 30px; } p { margin-top: 0; margin-bottom: 5px; } small { font-size: 75%; color: #eee; } a, a:visited, a:hover, a:focus { color: inherit; } a:hover, a:focus { color: #ddd; } /* full height demo */ html.style-full-height, html.style-full-height body, html.style-full-height .jarallax, html.style-full-height .style-table { height: 100%; } html.style-full-height .jarallax, html.style-full-height .style-table { min-height: 600px; } .jarallax, .half-jarallax{ position: relative; background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; } .jarallax { height: 600px; } .half-jarallax{ height: 400px; } /* hero block */ .style-table { display: table; width: 100%; height: 600px; background-color: rgba(39,35,51,0.8); } .style-table-cell { display: table-cell; text-align: center; vertical-align: middle; }
Langkah Kelima
Silahkan sobat jalankan/eksekusi code yang telah sobat ketik, maka sobat akan melihat hasilnya seperti gambar dibawah ini, dan cobalah untuk menscrollnya kebawa maka background akan bergeser/bergoyang.
sampai disini dulu tutorial dari saya , Semoga tutorial ini bermanfaat bagi sobat, atas segala kekuranganya mohon dimaafkan dan di beri saran untuk demo & source codenya silahkan download dari link dibawah ini.
0 Comments
Berkomentarlah dengan baik dan sopan