4 Langkah Mudah Membuat Background Parallax CSS

loading...

Selamat datang di The Royal Moringa. Pada postingan kali ini, saya akan membahas bagaimana cara membuat Background Parallax. Apa itu Background Parallax? Pada umumnya jika kita menampilkan gambar pada suatu halaman, gambar tersebut akan mengikuti gerakan tampilan layar ketika kita scroll. Tetapi bila kita menggunakan Backround Parallax, gambar akan tetap berada di posisinya sekalipun scroll kita gerakkan, yang bergerak hanya teks saja. Jika anda cukup tertarik, berikut saya berikan langkah-langkah mudah membuatnya.

1. Log in ke akun blog anda > Pada dashboard pilih Theme > Edit HTML > copy dan paste kode CSS berikut diatas ]]></b:skin>

                                          #trm-parallax-header{ float: left; width: 100%; text-align: center; margin: 0px -8px 25px 0px; } .fullscreen.background.parallax{ background-attachment:fixed !important; } .fullscreen.background.parallax h2{ font-size: 30px; font-weight: 300; margin:0 auto; padding:25px 0px; color:aquamarine; } .parallax-content { position:relative; vertical-align:middle; text-align:center; height:800px; }

2. Setelah itu copy dan paste kode HTML berikut di atas ]]> </script> yang berada di dalam tag head

                                          /* detect touch */ if("ontouchstart" in window){ document.documentElement.className = document.documentElement.className + " touch"; } if(!$("html").hasClass("touch")){ /* background fix */ $(".parallax").css("background-attachment", "fixed"); } /* fix vertical when not overflow call fullscreenFix() if .fullscreen content changes */ function fullscreenFix(){ var h = $('body').height(); // set .fullscreen height $(".content-b").each(function(i){ if($(this).innerHeight() > h){ $(this).closest(".fullscreen").addClass("overflow"); } }); } $(window).resize(fullscreenFix); fullscreenFix(); /* resize background images */ function backgroundResize(){ var windowH = $(window).height(); $(".background").each(function(i){ var path = $(this); // variables var contW = path.width(); var contH = path.height(); var imgW = path.attr("data-img-width"); var imgH = path.attr("data-img-height"); var ratio = imgW / imgH; // overflowing difference var diff = parseFloat(path.attr("data-diff")); diff = diff ? diff : 0; // remaining height to have fullscreen image only on parallax var remainingH = 0; if(path.hasClass("parallax") && !$("html").hasClass("touch")){ var maxH = contH > windowH ? contH : windowH; remainingH = windowH - contH; } // set img values depending on cont imgH = contH + remainingH + diff; imgW = imgH * ratio; // fix when too large if(contW > imgW){ imgW = contW; imgH = imgW / ratio; } // path.data("resized-imgW", imgW); path.data("resized-imgH", imgH); path.css("background-size", imgW + "px " + imgH + "px"); }); } $(window).resize(backgroundResize); $(window).focus(backgroundResize); backgroundResize(); /* set parallax background-position */ function parallaxPosition(e){ var heightWindow = $(window).height(); var topWindow = $(window).scrollTop(); var bottomWindow = topWindow + heightWindow; var currentWindow = (topWindow + bottomWindow) / 2; $(".parallax").each(function(i){ var path = $(this); var height = path.height(); var top = path.offset().top; var bottom = top + height; // only when in range if(bottomWindow > top && topWindow < bottom){ var imgW = path.data("resized-imgW"); var imgH = path.data("resized-imgH"); // min when image touch top of window var min = 0; // max when image touch bottom of window var max = - imgH + heightWindow; // overflow changes parallax var overflowH = height < heightWindow ? imgH - height : imgH - heightWindow; // fix height on overflow top = top - overflowH; bottom = bottom + overflowH; // value with linear interpolation var value = min + (max - min) * (currentWindow - top) / (bottom - top); // set background-position var orizontalPosition = path.attr("data-oriz-pos"); orizontalPosition = orizontalPosition ? orizontalPosition : "50%"; $(this).css("background-position", orizontalPosition + " " + value + "px"); } }); } if(!$("html").hasClass("touch")){ $(window).resize(parallaxPosition); //$(window).focus(parallaxPosition); $(window).scroll(parallaxPosition); parallaxPosition(); } // var ismobile = /Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) if (ismobile){ // bypass parallax effect }

3. Masih di dalam Edit HTML, sekarang anda dapat menentukan posisi dimana anda akan meletakkan background parallax pada homepage blog anda. Misalnya anda akan meletakkan background parallax di bawah postingan, anda silakan mencari <!-- post wrapper end --> atau tag semacamnya kemudian copy dan paste HTML berikut di bawahnya

                                          <!-- Background Parallax Start --> <div class="clear" /> <b:if cond="data:blog.url == data:blog.homepageUrl"> <div id="trm-parallax-header"> <div class="fullscreen background parallax" data-diff="100" data-img- height="" data-img-width="" style="background-image:url ('http://URLgambaranda.jpg');background-repeat:no-repeat;"> <h2> Judul Background Parallax</h2> <div class="parallax-content"> Konten Background Parallax</div> </div> </div> </div> </b:if> <!-- Background Parallax End --> <br>

4. Silakan ganti URL gambar background yang ingin anda gunakan dan judul serta konten dari bagian Backround Parallax Wrapper > Save Template dan lihat hasilnya

Jika anda berhasil, maka tampilannya akan tampak seperti contoh gambar diatas. Sebelumnya saya meminta maaf karena yang bisa saya tampilkan hanya sebuah gambar/tampilan dari background parallax. Sebenarnya akan menarik jika yang ditampilkan berupa demo dari background parallax tetapi saya masih belum menemukan cara menampilkan dokumen HTML dalam postingan. Mungkin jika saya menemukan caranya, saya akan mengupdate postingan ini. 

Background Parallax sekarang sering dipakai dalam website hotel, travel agent, dll. Penambahan widget background parallax tentu akan memberikan nilai lebih pada blog anda. Terima kasih telah membaca. Selamat Mencoba!

loading...