Apa itu parallax dalam istilah web ?

Parllax adalah sebuah istilah yang penjelasannya kurang lebih seperti ini, ketika kita menscroll halaman sebuah web, dimana ada sebuah bagian web dan dibelakangya terdapat background gambar, apabila kita mencsroll ke bawah atau ke atas gambar di belakang ikut tersecroll namun pergerakannya lebih lambat dari pada bagian depannya. sehingga menimbulkan sebuah perspektif atau kesan pemandangan yang menarik, seperti kita melihat pemandangan objek gunung atau pohon dalam sebuah jendela mobil yang berjalan.

endang-gambaran-cara-kerja-parallax

Adapun kode untuk membuatnya adalah seperti berikut :
Kode HTML

< div class="header">
Header text, logo, dll
</div>

Kode CSS

.header {                
        background:url("images/bg.png") no-repeat center center fixed;
        background-size: cover;
        background-repeat: no-repeat   
    }    

Kode JQuery

    // Y axis scroll speed
        var velocity = 0.5;

        function update(){ 
            var pos = $(window).scrollTop(); 
            $('.header').each(function() { 
                var $element = $(this);
                // subtract some from the height b/c of the padding
                var height = $element.height()-18;
                $(this).css('backgroundPosition', '50% ' + Math.round((height - pos) * velocity) + 'px'); 
            }); 
        };

        $(window).bind('scroll', update);        
    

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s