Cara Membuat Parallax Scrolling Background Menggunakan Jarallax.js

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

123456789101112131415161718192021222324252627282930313233343536373839404142434445<!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.

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566/* 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.