Parallax Mouse Movement Help, JQuery, HTML, CSS -


i still beginner jquery , took upon myself figure out parallax background (i believe referred parallax effect) using mousemove. using event.pagex create variable later used in setting background position.

it works code defiantly novice level. every time refresh page need move mouse background start parallax effect - so, example, background starts @ 50% 0% , when move mouse goes 10.5% 0% , smooth after first initial mouse movement.

i wondering if there way automatically call mousemove function on page load. or there better way reformat code trying do?

js

$('.background').on( "mousemove", function( event ) {     var xparallax = (event.pagex / 300)     $('.background').css({         'background-position' : xparallax + '% 15%'     }); }); 

html

<div class="background" style=""></div> 

css

div.background {     position: absolute;     width: 100%;     height: 100%;     left: 0px;     top: 0px;     background-image: url("/images/bg3.jpg");     background-position: 50% 15%;     background-size: 125%; } 

try 1 :

$(window).scroll(function(){ var xparallax = $(this).scrolltop();     $('.background').css({         'background-position' : xparallax + '% 15%'     }); }) 

Comments

Popular posts from this blog

javascript - Google App Script ContentService downloadAsFile not working -

javascript - Function overwritting -

php - Find a regex to take part of Email -