Hosting Unlimited Indonesia

Recent Comment

Navigation

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

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

Share
Hosting Unlimited Indonesia

agus ribudi

Programmer, Web Developer, Android Developer and Blogger

Post A Comment:

0 comments:

Rekomendasi Untuk Anda × +