CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Jimmy
Jimmy

Reputation: 12527

Simple parallax effect, not giving the right effect

I'm trying to make it so that when I scroll down, it pushes the header text down a bit, i.e adds margin on top, so it remains in the view.

This is the exact effect I am trying to get, with the header text: http://www.leeannpica.com/

I've spent hours on this but I can only get this close: http://hiven.com/parallax.html

It uses this code:

$(window).scroll(function(){
    var fromTop = $(window).scrollTop();
    $(".logo").css('margin', '-' + (100 - fromTop) + 'px 0px 0px 0px');
});

I can't seem to get anywhere close to the same effect as you can see. Can anyone please help me understand how to tweak the javascript to get an effect similar to the first link?

Upvotes: 0

Views: 84

Answers (1)

Sarthak_ssg5
Sarthak_ssg5

Reputation: 108

since you asked to use JavaScript,

$(window).scroll(function(){
var fromTop = $(window).scrollTop();
$(".logo").css({"margin":fromTop/3+"px 0px 0px 0px"});
});

In parallax effect you want thing to move at different rates with respect to each other.So the rate with which the header was moving is reduced by a factor of 3 i.e "fromTop/3".You can play with this to get the desired results.

you can view a demo here

or you can take help from materializecss.(it is easy to use)

Upvotes: 2

Related Questions