CODEWITHSUNDEEP
javascriptjquerycss
Rasmus
Rasmus

Reputation: 366

Parallax scroll with easing

I have an element that move relative to scroll. I use jQuery for this:

$('#object').css('transform','translateY('+($(window).scrollTop()*.4)+'px)');

CSS

#object {
    width:200px;
    top:100%;
    left:50%;
    position:absolute;
}

This works well, but moves my element directly without any easing (delay). By setting a transition using css I get some of the effect that I'm looking for, but doesn't look good if I scroll at the same time:

transition: 400ms ease;

Is it possible to do this smooth, but in a more elegant way?

Upvotes: 4

Views: 2982

Answers (2)

Rasmus
Rasmus

Reputation: 366

I figured it out by myself. The problem was the css "ease". Ease means that it will start slow and end slow, which will result in at the time scrolling is active it will always be on the slow start. However if you use css "ease-out" it will always start fast and slow down in the end. So use this:

transition: 400ms ease-out;

Or cubic-bezier if you want to customize the easing-curve yourself:

transition: 400ms cubic-bezier(0.235, 0.615, 0.185, 0.995);

Upvotes: 3

oshell
oshell

Reputation: 9123

When doing a parallax effect you will set a new translateY() on every scroll event that triggers. The event triggers really often and normally there should be no need for a transition. If you still experience bad rendering it is probably because the browser does not render on every event. You can force the browser to do so by using requestAnimationFrame.

var translate = function() {
    $('#object').css('transform','translateY('+($(window).scrollTop()*.4)+'px)');
}

$(window).on('scroll', function() {
   window.requestAnimationFrame(translate);
});

Upvotes: 0

Related Questions