Cara Membuat Background Parallax Seperti Tiramisubs - Mungkin ada dari kalian yang belum tahu apa itu parallax. Apa itu Parallax? Parallax Scrolling adalah suatu desain web yang dimana background yang berada di belakang bergerak lebih lambat dari pada bacground yang berada di depan. Parallax Scrolling akan memberikan kesan 3D jika diterapkan pada objek 2D. Contohnya kita akan merubah objek 2D menjadi tampak seperti objek 3D karena seakan-akan objek-objek tersebut mempunyai jarak dan pergerakan yang berbeda.
Parallax scrolling ini di terapkan oleh fansub yang cukup terkenal dengan subtitlenya yang rapih yaitu Tiramisu fansub atau yang biasa dikenal Tiramisubs. Tiramisubs menerapkan parallax scrolling untuk gambar backgroundnya. Sebelumnya saya memposting tentang pembuatan spoiler, yaitu Cara Membuat Spoiler Seperti Kaskus, dan pada kesempatan kali ini saya ingin berbagi ilmu tentang Cara Membuat Background Parallax Seperti Tiramisubs. Langsung saja mari ikuti langkah-langkah yang ada di bawah ini.
Cara Membuat Background Parallax Seperti Tiramisubs
- Buka Blogger > Edit HTML > Salin dan Terapkan kode di bawah ini sebelum </b:skin> atau </style>.
- Setelah itu, salin dan terapkan kode di bawah ini Sesudah <body> atau <body ... >
- Jika sudah, salin dan terapkan kode di bawah ini Sebelum </body>
- Jika sudah, silahkan kamu mengganti kode yang sudah ditandai sesuai keinginanmu, dan silahkan di simpan template lalu lihat bagaimana hasilnya.
/* CSS Parallax Background Tiramisub - Aka321 */
.pstsback1{background: url(http://s5.postimg.org/xuvfoh9d3/back11.jpg) repeat;background-size: 100% auto;position: fixed;width: 100%;height: 300%;top: 0;left: 0;z-index: -3;}
.pstsback2{background: url(http://s5.postimg.org/9seltlspz/para11.png) repeat;background-size: 35%;position: fixed;width: 100%;height: 300%;top: 0;left: 0;z-index: -2;opacity: 0.7;}
.pstsback{background: url(http://s5.postimg.org/81vks4b6v/para11a.png) repeat;background-size: 35%;position: fixed;width: 100%;height: 300%;top: 0;left: 0;z-index: -2;opacity: 0.7;}<div class='psts321'>
<div class='pstsback1' data-parallax='true' data-speed='0.1 ' data-direction='up'></div>
<div class='pstsback2' data-parallax='true' data-speed='0.5 ' data-direction='up'></div>
<div class='pstsback3' data-parallax='true' data-speed='0.3 ' data-direction='up'></div>
</div><script type='text/javascript'>
$(document).ready(function(){function draw(){requestAnimationFrame(draw);scrollEvent();}draw();});function scrollEvent(){if(!is_touch_device()){viewportTop=$(window).scrollTop();windowHeight=$(window).height();viewportBottom=windowHeight+viewportTop;if($(window).width())$('[data-parallax="true"]').each(function(){distance=viewportTop*$(this).attr('data-speed');if($(this).attr('data-direction')==='up'){sym='-';}else{sym='';}$(this).css('transform','translate3d(0, '+sym+distance+'px,0)');});}}function is_touch_device(){return'ontouchstart'in window||'onmsgesturechange'in window;}
</script>| Kode | Pengaturan |
|---|---|
| http://s5.postimg.org/xuvfoh9d3/back11.jpg/, http://s5.postimg.org/9seltlspz/para11.png/, http://s5.postimg.org/81vks4b6v/para11a.png/ |
Ganti dengan URL/Link gambar parallax. |
| 0.1 / 0.5 / 0.3 |
Ganti dengan kecepatan background parallax yang diinginkan. |
Sekian postingan kali ini semoga bermanfaat untuk kalian, jangan lupa di bagikan ke teman-teman, dan jika ada yang ingin ditanyakan silahkan bertanya di kolom komentar. Sampai jumpa di tutorial berikutnya Terima kasih.
1 komentar so far
terima kasih gan infonya :)
Silakan tambahkan komentar sesuai dengan topik dan komentar dengan link akan dihapus, terima kasih.
EmoticonEmoticon