Assalaamu 'alaikum, Sobat! Apa kabar? Di beberapa postingan kemaren kayak Little Netherland dan Goa Rong View, gue ngasih sesuatu yang beda pada tampilan post-nya. Yaitu semacam permainan gulir (scrolling) pada background post. Di mana ketika kita nyekrol ke bawah, seolah-olah gambar background-nya gerak, padahal gak gitu, Sob. Karna background-nya ternyata statik, cuma foreground-nya aja yang geser. Dalam dunia web design, teknik itu disebut parallax scrolling.

paralaks bintang

Sewaktu masih SMP, di pelajaran fisika pasti kita pernah denger bahwa paralaks adalah salah satu istilah astronomi yang ngebahas tentang posisi relatif jarak bintang satu ama yang lainnya menurut pandangan mata. Tapi kalo kita ngintip di Wikipedia,

“Paralaks, (bahasa Yunani: παραλλαγή [parallagé]) adalah perubahan kedudukan sudut dari dua titik diam, relatif satu sama lain, sebagaimana yang diamati oleh seorang pengamat yang bergerak. Secara sederhana, paralaks merupakan pergeseran yang tampak dari suatu obyek (titik 1) terhadap latar belakang (titik 2) yang disebabkan oleh perubahan posisi pengamat.”

Sedangkan Parallax Scrolling adalah suatu teknik khusus di mana benda yang berada di latar belakang bergerak lebih lambat dibandingkan dengan yang berada di latar depan sehingga menimbulkan efek 3 dimensi meskipun grafik yang dibuat hanyalah sebatas 2 dimensi.

Mario Bros 2D

Sebenernya parallax sendiri udah dikenal dari dulu, kalo pernah main video game 2D kayak game Mario Bros, pasti ngerasain efek background yang bergerak dengan kecepatan berbeda dengan lintasan permainan. Disinilah efek dari parallax pertama kali gue rasain. Konsep yang sama berlaku juga pada penerapan parallax dalam desain web di mana latar belakang situs bergerak pada kecepatan yang berbeda dengan sisa halaman lainnya atau dengan isi konten pada situs.

Trus ada yang penasaran dan nanya, gimana caranya kalo mau diterapin di halaman posting blog? Kita cuma perlu 2 elemen, yaitu CSS dan HTML tanpa Javascript, karna yang bakal gue share kali ini adalah Pure CSS Parallax Scrolling.

CSS

@import url(http://fonts.googleapis.com/css?family=Oswald:300,400,700);
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic);

/* Override UGG site */
#main {width: 95%; padding:0;}
.content-asset p {margin:0 auto;}
.breadcrumb {display:none;}

/* Helpers */
/**************************/
.margin-top-10 {padding-top:10px;}
.margin-bot-10 {padding-bottom:10px;}

/* Typography */
/**************************/
#parallax-world-of-ugg h1 {font-family:'Oswald', sans-serif; font-size:24px; font-weight:400; text-transform: uppercase; color:black; padding:0; margin:0;}
#parallax-world-of-ugg h2 {font-family:'Oswald', sans-serif; font-size:70px; letter-spacing:10px; text-align:center; color:white; font-weight:400; text-transform:uppercase; z-index:10; opacity:.8;}
#parallax-world-of-ugg h3 {font-family:'Oswald', sans-serif; font-size:14px; line-height:0; font-weight:400; letter-spacing:8px; text-transform: uppercase; color:black;}
#parallax-world-of-ugg p {font-family:'Source Sans Pro', sans-serif; font-weight:400; font-size:14px; line-height:24px;}
.first-character {font-weight:400; float: left; font-size: 84px; line-height: 64px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: 'Source Sans Pro', sans-serif;}

.sc {color: #3b8595;}
.ny {color: #3d3c3a;}
.atw {color: #c48660;}

/* Section - Title */
/**************************/
#parallax-world-of-ugg .title {background:; padding: 60px; margin:0 auto; text-align:center;}
#parallax-world-of-ugg .title h1 {font-size:35px; letter-spacing:8px;}

/* Section - Block */
/**************************/
#parallax-world-of-ugg .block {background: ; padding: 60px; width:600px; margin:0 auto; text-align:justify;}
#parallax-world-of-ugg .block-gray {background: #f2f2f2;padding: 60px;}
#parallax-world-of-ugg .section-overlay-mask {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: black; opacity: 0.70;}

/* Section - Parallax */
/**************************/
#parallax-world-of-ugg .parallax-one {padding-top: 200px; padding-bottom: 200px; overflow: hidden; position: relative; width: 100%; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDcOJh974UKKEC3Tylb4Z4-iIfcm0RkTaVTyGAsKqzqb2fn-gNKqRBKeJV4-25TvVg4Hn4o_VnC7riRV5-ZO4PG2yUkwmlUqOWrsRF_bRGYTQuD592_VdPQElM8fv7qNvOH7-1bgNtYQk/s1600/2014-07-31-14-09-55_photo.jpg); background-attachment: fixed; background-size: cover; -moz-background-size: cover; -webkit-background-size: cover; background-repeat: no-repeat; background-position: top center;}
#parallax-world-of-ugg .parallax-two {padding-top: 200px; padding-bottom: 200px; overflow: hidden; position: relative; width: 100%; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRz-aUjUipW1WPVCg7SrTGOcN_cLrKjl4sGxjuFyAivyljDO4Fu4YXsr9CeuF_syzxKqniVmPyhF35GmqBWtMSVFhyEjktQBFKZEMixfM4ewPgM1TO3Xbnl1gTTrNX5oeraVjCqoFaSBM/s1600/IMG_20140731_145733.jpg); background-attachment: fixed; background-size: cover; -moz-background-size: cover; -webkit-background-size: cover; background-repeat: no-repeat; background-position: center center;}
#parallax-world-of-ugg .parallax-three {padding-top: 200px; padding-bottom: 200px; overflow: hidden; position: relative; width: 100%; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRwZQStJ-pZ8goK7mP4ie7Ff7Nb9q7Y6QqO8nt66eX33CURAb7rBKmW6XOIgyL-SHUuNP2ka8AJPTGEgQmy_oYhsXk46hSnUSC4N_1G7dAbSSX74ro-own_LV2lZl73q_zPUgS1iNTML8/s1600/2014-07-31-14-05-53_photo.jpg); background-attachment: fixed; background-size: cover; -moz-background-size: cover; -webkit-background-size: cover; background-repeat: no-repeat; background-position: center center;}

/* Extras */
/**************************/
#parallax-world-of-ugg .line-break {border-bottom:1px solid black; width: 150px; margin:0 auto;}

/* Media Queries */
/**************************/
@media screen and (max-width: 959px) and (min-width: 768px) {
  #parallax-world-of-ugg .block {padding: 40px; width:620px;}
}
@media screen and (max-width: 767px) {
  #parallax-world-of-ugg .block {padding: 30px; width:420px;}
  #parallax-world-of-ugg h2 {font-size:30px;}
  #parallax-world-of-ugg .block {padding: 30px;}
  #parallax-world-of-ugg .parallax-one, #parallax-world-of-ugg .parallax-two, #parallax-world-of-ugg .parallax-three {padding-top:100px; padding-bottom:100px;}
}
@media screen and (max-width: 479px) {
  #parallax-world-of-ugg .block {padding: 30px 15px; width:290px;}
}
  

<div id="parallax-world-of-ugg">
<br />
<br />
<br />
<section>
  <div class="title">
<h3>
Gua Rong View</h3>
<h1>
Panorama 5 Gunung</h1>
</div>
</section>

<section>
    <div class="parallax-one">
<h2>
ENTER SOUTHERN SEMARANG</h2>
</div>
</section>

<section>
  <div class="block">
<span class="first-character sc">S</span>ebenernya tempat ini bukanlah tempat yang baru buat gue dan keluarga gue. Dari semasa gue SD, gue udah suka maen ke tempat ini. Gua Rong adalah sebuah gua di atas bukit dengan ketinggian 998 meter di atas permukaan laut. Berlokasi di desa Ndelik, kecamatan Tuntang, kabupaten Semarang. Jaman SD gue tentu aja Nggunung Rong (rong = lubang) gak kayak sekarang ini. Jalan menuju ke puncak juga gak aspal kayak sekarang. Juga bukan tempat wisata. Konon lubang Gua Rong panjangnya gak terukur. Menurut cerita orang-orang tua, Gua Rong adalah tempat bertapanya orang-orang suci zaman dulu. Katanya, para petapa ini dengan kebersihan hatinya, bisa masuk lubang Gua Rong dan keluar di Demak. Sekarang kawasan ini dikelola oleh Perusahaan Daerah Citra Mandiri  Jawa Tengah (PD CMJT). Trus dikasih nama Gua Rong View. Dinamai begitu karna dari atas bukit, kita ditawari pemandangan yang menakjubkan. Dari bukit yang gak terlalu tinggi ini, kelihat jelas Rawa Pening dan kalo beruntung bisa ngelihat lima gunung berjajar dari utara ke selatan: Merapi, Telomoyo, Ungaran, Sindoro, dan Sumbing.  <br />
<div class="line-break margin-top-10">
</div>
<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpww01hRCeyT_Uy1xyw-CijjN4tNfg12qACX_AhfPq3aXD045ZPhgqSG6bz4BWR9pAAC1KZFOhqLyGtbj7RjfO2HVQR4RRiZhYzI93QmmG9s728bmytnV1ZrDBzNBwQqLkRBZsGgQtdJ0/s1600/6.Menikmati-Keindahan-5-Gunung-dari-Bukit-Rong.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="view" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpww01hRCeyT_Uy1xyw-CijjN4tNfg12qACX_AhfPq3aXD045ZPhgqSG6bz4BWR9pAAC1KZFOhqLyGtbj7RjfO2HVQR4RRiZhYzI93QmmG9s728bmytnV1ZrDBzNBwQqLkRBZsGgQtdJ0/s320/6.Menikmati-Keindahan-5-Gunung-dari-Bukit-Rong.jpg" height="300" title="view" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Rawa Pening dari puncak bukit</td></tr>
</tbody></table>
<div class="margin-top-10">
Dari Kota Semarang untuk menuju bukit Rong bisa di tempuh pake sepeda motor. Dari pertigaan Bawen ambil arah solo, trus entar ngelewatin jembatan Tuntang ada pertigaan pos polisi ambil arah kiri. Trus ikutin aja jalan ampe lapangan desa Ndelik. Ambil arah lurus kira-kira 200m ada pertigaan ambil kanan ampe ujung jalan, trus ambil arah kanan lagi. Di sekitar area ada papan yang nunjukin rute Gua Rong berada. Kalo masih bingung, gue saranin buat nanya ama warga setempat.
</div>
</div>
</section>

<section>
  <div class="parallax-two">
<h2>
GUA RONG</h2>
</div>
</section>

<section>
  <div class="block">
<span class="first-character ny">D</span>engan membayar tiket retribusi Rp.3000,- di hari biasa serta Rp.5000,- di hari Sabtu dan Minggu, kita bisa milih buat parkir kendaraan di pos jaga atau di lokasi wisata dengan biaya parkir Rp.2000,- buat sepeda motor serta Rp.4000,- buat mobil. Langkah kaki yang menaiki tanjakan menuju Goa Rong gak bakal kerasa capek pas ngeliat sekeliling jalan dipenuhin ama pepohonan serta sesekali memandang jauh daratan yang ngebentang di wilyah Kabupaten Semarang.
<br />
<div class="line-break margin-top-10">
</div>
<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgno_mtwe3YF3igISeJI10_SFWgLMw_ehBsnSW8EAaFriNIYadgOE4utFFkAz4T_uSqsPHNRSn5907izFZpfgW1z_EmJsnR6rv9mDv9peABscmCB35bWWBAT2eIE_xj153q_VfAbgLAm5o/s1600/IMG_6649.JPG" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="loket" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgno_mtwe3YF3igISeJI10_SFWgLMw_ehBsnSW8EAaFriNIYadgOE4utFFkAz4T_uSqsPHNRSn5907izFZpfgW1z_EmJsnR6rv9mDv9peABscmCB35bWWBAT2eIE_xj153q_VfAbgLAm5o/s320/IMG_6649.JPG" height="266" title="loket" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Loket Masuk</td></tr>
</tbody></table>
<div class="margin-top-10">
Dengan ketinggian mencapai 998 mdpl, tentu kita perlu nyiapin fisik sebelum bisa memulai petualangan di bukit rong ini. Meskipun tidak terlalu tinggi, tetep aja kita perlu berhati-hati. Perjalanan yang ditempuh dengan melewati jalanan berkelok dijamin gak bakal ngebosenin. Dengan pemandangan indah di kanan kiri nemenin perjalanan kita. Disediain juga kendaraan, mobil ataupun motor dari pengelola bagi kita yang ngerasa gak siap secara fisik buat naik ke puncak. Jangan lupa juga bawa kamera buat mengabadikan keindahan pemandangan yang kita temuin. Ada beberapa spot di sepanjang perjalanan yang akan ditempuh menuju ke puncak yang sayang banget buat dilewatin. Wisata ini sendiri belum terlalu dikenal masyarakat luas, cuma wisatawan dari daerah sekitar seperti Semarang, Ungaran dan Salatiga yang tahu dan sering berkunjung di hari libur.</div>
</div>
</section>

<section>
  <div class="parallax-three">
<h2>
love is felt togetherness</h2>
</div>
</section>

<section>
  <div class="block">
<span class="first-character atw">M</span>ungkin ada dari elo yang punya mimpi mendaki gunung, karna emang kelihatannya kegiatan pendakian itu keren sekaligus menantang banget. Nah, buat yang pengen “latihan” mendaki gunung mungkin bisa ngunjungin Gua Rong ini. Gua Rong emang tempat yang pas buat nyobain gimana rasanya mendaki gunung sebelum beralih ke gunung atau bukit yang lebih tinggi.<br />
<div class="line-break margin-top-10">
</div>
<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRfnZHGUHEJqyWPDgTCpD1A4I6WA5ym-RxX8vO-5aP3fxW17uot_c3Qet7USBg3YlHQKIJjUDgcPiuKAW3deylchBG_o9xgzV__UutWGTO4jMQy-Ir9-pjS8jW2nqcQ-vYp3mfcnsWZ2E/s1600/17032013(008).jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="gazebo" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRfnZHGUHEJqyWPDgTCpD1A4I6WA5ym-RxX8vO-5aP3fxW17uot_c3Qet7USBg3YlHQKIJjUDgcPiuKAW3deylchBG_o9xgzV__UutWGTO4jMQy-Ir9-pjS8jW2nqcQ-vYp3mfcnsWZ2E/s320/17032013(008).jpg" height="300" title="gazebo" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Salah satu gazebo buat liat pemandangan</td></tr>
</tbody></table>
<div class="margin-top-10">
Namanya emang Goa Rong, tapi setelah nyampe ke puncak kita gak bakal nemuin goa atau rong yang dimaksud. Dari puncak ada jalan turun kecil menuju gua. Atau bisa juga dari bawah di pertengahan perjalanan menuju puncak bukit ada jalan setapak sedikit naik. Dari situ cukup naik sekitar 10 meter sudah sampai ke mulut gua. Gua Rong memang kecil dan kurang menarik, makanya yang dikelola PD CMJT bukan Goa Rong-nya tapi View-nya yang ada di puncak bukit.</div>
</div>
</section>
  
</div>