about us our works our services community articles tips and tricks inspirations resources order now

Membuat Portfolio dengan efek Parallax Scrolling Web Design

Yohanes Steven
June 29th, 2018

*Ditulis pertama kali tanggal 1 Juni 2012 di blog Tentu Creative

Di post terakhir, Saya telah membagikan trik mengenai cara mengganti background halaman saat user melakukan scrolling di website. Saya juga telah menyampaikan bahwa dengan mengembangkan teknik tersebut, kamu dapat membuat sebuah website dengan efek Parallax. Tutorial ini akan menunjukkan caranya.

Screenshot dari Portfolio yang akan kita buat

DEMO : CLICK HERE
DEMO SOURCE : CLICK HERE

Level Tutorial : Advanced

Sebelum kita melanjutkannya, perbolehkan saya untuk memperkenalkan tata letak dari portfolio kita. Portfolio kita dalam tips dan trik kali ini akan dibagi menjadi 2 kolom, Featured Artwork dan Normal Artwork, dan background dari halaman akan menunjukkan tahun dari pembuatan Artwork tersebut. Di tutorial ini, kolom Featured Artwork akan bergerak dalam kecepatan normal, sedangkan kolom Normal Artwork akan bergerak lebih cepat.

Layout dari Portfolio yang akan kita buat

Mempersiapkan Tata Letak Halaman

Untuk tutorial kali ini, akan ada 2 background berbeda untuk kategori kita, yakni 2010 dan 2011. Maka kita akan membuat 2 Div yang bekerja sebagai background (Div dengan id #art2010 dan id #art2011), dan 2 Div untuk setiap tahun pembuatan (id #normal dan #featured untuk tahun 2010, dan id #normal2 dan featured2 untuk tahun 2011).

Yang perlu digarisbawahi dalam kode berikut adalah kode CSS dari background. Saya memberikan mereka property “position:fixed” agar mereka tidak bergerak ketika user melakukan scrolling halaman. Kemudian, saya meletakkan div background yang kedua (#art2011) di posisi 1400px, yang akan membuatnya menjadi tidak terlihat ketika user membuka halaman website. Saat pertama kali membuat halaman website, div yang akan dilihat user adalah background pertama (#art2010).

*Catatan : Kunci dari pergantian background di tutorial ini adalah : Ketika user telah melakukan scroll sampai di posisi tertentu, ubah posisi background pertama menjadi -1400px, dan ubah posisi background kedua menjadi 0. Dengan menggunakan metode ini, kita dapat mengaplikasikan transisi ke dalam pergerakan background.

CSS Code

/* BACKGROUND ============= */

#art2010 {
    background:url(img/bg1.jpg) no-repeat;
    position:fixed; /*Membuat background tidak bergerak saat halaman di scroll*/
    z-index:-100; /*Memastikan DIV berlaku sebagai background*/
    top:0; /*Mendefinisikan bahwa DIV ini terlihat saat user buka website*/
    width:100%;
    height:100%;
    transition: 0.5s; -moz-transition: 0.5s; -webkit-transition: 0.5s; -o-transition: 0.5s;
}

#art2011 {
    background:url(img/bg2.jpg) no-repeat;
    position:fixed;
    z-index:-100;
    top:1400px; /*Menyembunyikan DIV saat user pertama kali membuka website*/
    width:100%;
    height:100%;
    transition: 0.5s; -moz-transition: 0.5s; -webkit-transition: 0.5s; -o-transition: 0.5s;
}

/* MAIN BOXES ============== */

#normal, #normal2 {
    position:relative;
    float:right;
    margin-right:2%;
    width:30%;
    padding:2%;
}

#featured, #featured2 {
    position:relative;
    float:left;
    margin-left:20%;
    width:40%;
    padding:2%;
    height:800px;
}

HTML Code

   
    <!--These 2 DIVS are acting as a background-->    
    <div id="art2010"></div>
    <div id="art2011"></div>

     <!--The actual contents begin here-->

     <!--2010 BEGIN-->
      <!--Begin listing of normal artworks-->
      <div id="normal">
          <img style="width:100%;" src="img/norm1.jpg" /><br /><br />
          <img style="width:100%;" src="img/norm2.jpg" /><br /><br />
      </div>
      <!--End listing of normal artworks-->

      <!--Begin listing of Featured artworks-->           
      <div id="featured">        
          <img style="width:100%;" src="img/feat1.jpg" /><br /><br />
      </div>
      <!--End listing of Featured artworks-->

      <div style="clear:both;"></div> <!--A Div to close the section-->
     <!--2010 ENDS-->      

     <!--2011 BEGIN-->           
      <div id="normal2">
          <img style="width:100%;" src="img/norm3.jpg" /><br /><br />
          <img style="width:100%;" src="img/norm4.jpg" /><br /><br />
          <img style="width:100%;" src="img/norm5.jpg" /><br /><br />
      </div>

     <div id="featured2">
          <img style="width:100%;" src="img/feat2.jpg" /><br /><br />
          <img style="width:100%;" src="img/feat4.jpg" /><br /><br />
     </div>
     <!--2011 ENDS-->

Bekerja dengan JQuery

Seperti biasa, sebelum kita bekerja dengan JQuery, kita perlu menginclude file js dari JQuery.

<script src="http://code.jquery.com/jquery-latest.js"></script>

Jika kamu masih ingat fungsi getPos() dari tips dan trik mengganti background halaman sambil user melakukan scroll, kita akan menggunakannya lagi saat ini. Setelah itu, kita akan mengubah status kelihatan dari kedua background DIV kita setelah user melakukan scroll sejauh 700pixel.

*Catatan : Dalam tutorial ini, saya menggunakan tinggi 800pixels untuk setiap tahun pembuatan. Secara logika, setelah melakukan scroll sejauh 700 pixels, konten dari tahun pembuatan 2011 telah mendominasi tampilan, sehingga sudah saatnya kita mengganti background halaman di titik 700pixel.

        function getPos() {
         var Pos = $(window).scrollTop();
         return Pos;
        }
    $(window).scroll(function() { //Defines that this function will be triggered as the scrollbar is moving    

          //This section will affect the backgrounds    
          if(getPos()<700) { //If user has not scrolled the page for 700 pixels, show DIV art2010 and hide DIV art2011
           $("#art2010").css('top','0px');
           $("#art2011").css('top','1400px');              
          }
          else {  //If user has scrolled the page for 700 pixels, hide DIV art2010 and show DIV art2011
           $("#art2010").css('top','-1400px');
           $("#art2011").css('top','0px');                                
          }

         }); //function ends

Sekarang kita telah memiliki background yang berubah secara halus seiring dengan bergeraknya scrollbar halaman website.

Sebagai tambahan dari getPos(), kita juga akan memiliki fungsi baru yang saya sebut sebagai getPosNorm(). Ide dari fungsi ini adalah untuk menghitung posisi dari kolom Normal Artwork, karena kita akan menggerakkannya lebih cepat dari kecepatan scroll yang biasa. Jika kamu ingin mengubah kecepatan scroll dari kolom Featured Artwork, kamu bisa menambahkan 1 fungsi lagi (sebagai contoh : getPosFeat() ).

        function getPosNorm() {
            return 0 - (getPos() / 2);
            //Angka 2 disini akan mempengaruhi kecepatan scroll. Jika kamu ingin membuat div ini di scroll secara lebih cepat, maka kurangilah angkanya. Sebaliknya, jika kamu ingin membuat div ini di scroll secara lebih lambat, gunakan angka negatif.
        }

Hal terakhir yang akan kita lakukan untuk menyelesaikan parallax porfolio kita adalah mengatur nilai “top” dari kolom Normal Artwork di CSS, dengan nilai yang telah kita hitung di getPosNorm().

$("#normal").css('top', getPosNorm() );
 $("#normal2").css('top', getPosNorm() );

Dan itu dia! Parallax Scrolling Portfolio kamu telah selesai. Basically, ini adalah teknik dasar dari website dengan parallax scrolling, dan dengan sedikit kreativitas extra, kamu dapat mengembangkannya menjadi sesuatu yang luar biasa dan mengagumkan.

Saya berharap tips dan trik ini dapat membantu sekaligus menginspirasi. Pamerkan hasil website parallax kamu di comment, dan sampaikan semua pertanyaan-pertanyaan kamu seputar tips dan trik ini disana. Selamat bermain!

DEMO : CLICK HERE
DEMO SOURCE : CLICK HERE

*About The Author: Yohanes Steven is a Web Designer with a passion in coffee. He survived cancer in December 2010 and have intended to inspire the world ever since

Contact Information

Coffeelogue | Jln Taman Sunter Indah Hj2 No 32
0877 8562 8556
idea@ysteven.com