Garth

Jednoduchý jQuery Parallax efekt

Na Parallaxový efekt (rolujete stránkou dolů, ale určitý prvek roluje pomaleji => jede jinak) je mnoho řešení přez Javascript či jQuery, ale povětšinou jsou velmi robusní (velké datově). Existuje i jednoduché řešení jak tohoto efektu docílit.

//HTML cast
nějaký obsah
//CSS cast .obsah_webu{ position: relative; width: 728px; padding: 25px; margin: 15px auto; } .pozadi_webu{ position:fixed; top:0; left:0; background:url(obrazek_pozadi_webu.jpg) top center no-repeat; height:100%; width:100%; } .obrazek_vlevo_od_webu{ position:fixed; left:50%; width:250px; height:187px; margin-left:-600px; margin-top:400px; background:url(obrazek_vlevo_od_webu.png); } .obrazek_vpravo_od_webu{ position:fixed; left:50%; width:300px; height:246px; margin-left:400px; margin-top:500px; background:url(obrazek_vpravo_od_webu.png); } //jQuery cast $(document).ready(function(){ $(window).bind('scroll',function(e){ parallaxScroll(); }); function parallaxScroll(){ var scrolledY = $(window).scrollTop(); $('.pozadi_webu').css('background-position','center -'+((scrolledY*0.2))+'px'); //pomoci zmeny cisla menite rychlsot efektu $('.obrazek_vlevo_od_webu').css('top','-'+((scrolledY*0.5))+'px'); //pomoci zmeny cisla menite rychlsot efektu $('.obrazek_vpravo_od_webu').css('top','-'+((scrolledY*0.8))+'px'); //pomoci zmeny cisla menite rychlsot efektu } });

<< zpět




Nejnovější články

Jak udělat stín bloku pouze na jedné straně?

CSS - Úvod do CSS

Jak detekovat klik na tlačítka myšy?

JavaScript - Úvod do JavaScriptu

Jak udělat odkaz na celý řádek tabulky?

JavaScript - Příklady v JavaScriptu

Jak zrušit tečky kolem odkazu?

CSS - Základy CSS

Jak fungují lomítka a tečky v url adrese?

(x) HTML - Úvod do HTML