Membuat Website PARALLAX - GENOS "SHARE EVERYTHING!"

Berikut ini saya akan memberi sedikit informasi tentang website parallaax. Website Parallax merupakan website dimana anda dapat membuat link tapi masih dalam satu file, jadi anda tidak perlu me-reload halaman web. Ini yang membuat web Parallax dari hari ke hari banyak penggunanya. Selain itu dalam membuat atau mendesainnya juga tidak terlalu sulit, yang anda harus kuasai yaitu html, javascript, jQuery, css, dan masih banyak lagi untuk membuat web tersebut menjadi lebih menarik. Contoh efek dari web ini yang menjadikannya menarik yaitu scrolling dan desain responsive..
Contohnya bisa dibuka di http://www.telcom.bl.ee dan http://www.cavanzha.hol.es
Kali ini saya akan berbagi tutorial membuat web parallax;

PARALLAX
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 of our parallax portfolio

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.