Smoothly scroll through parallax backgrounds

Question

Smoothly scroll through parallax backgrounds

I've implemented a feature where an element moves in relation to scrolling using jQuery:

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

Here's the CSS:

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

While this method works, the movement of the element is abrupt without any smooth transition. I tried adding a CSS transition for a delayed effect, but it doesn't look good when scrolling simultaneously:

transition: 400ms ease;

Is there a more elegant solution to achieve smooth movement without compromising the design?

javascript jquery css

Answer 1

Answer №1

After a bit of experimentation, I managed to solve the issue on my own. It turns out that the problem lay in the css "ease" setting. When using "ease", the scrolling starts and ends slowly, resulting in a consistently slow start whenever scrolling is activated. However, by utilizing the css "ease-out" setting, the scrolling will always begin quickly and gradually slow down towards the end. To achieve this effect, simply add the following code:

transition: 400ms ease-out;

Alternatively, you can create a custom easing curve using cubic-bezier:

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

Answer 2

After a bit of experimentation, I managed to solve the issue on my own. It turns out that the problem lay in the css "ease" setting. When using "ease", the scrolling starts and ends slowly, resulting in a consistently slow start whenever scrolling is activated. However, by utilizing the css "ease-out" setting, the scrolling will always begin quickly and gradually slow down towards the end. To achieve this effect, simply add the following code:

transition: 400ms ease-out;

Alternatively, you can create a custom easing curve using cubic-bezier:

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

Answer 3

Answer №2

When implementing a parallax effect, a new translateY() is applied during each scroll event that is triggered. These events occur frequently and typically do not require a transition. If you are encountering issues with rendering, it may be due to the browser not rendering on every event. To ensure consistent rendering, you can utilize the requestAnimationFrame method.

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

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

Answer 4

When implementing a parallax effect, a new translateY() is applied during each scroll event that is triggered. These events occur frequently and typically do not require a transition. If you are encountering issues with rendering, it may be due to the browser not rendering on every event. To ensure consistent rendering, you can utilize the requestAnimationFrame method.

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

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

Smoothly scroll through parallax backgrounds

Answer №1

Answer №2

Similar questions

Attaching a modal to an entity

Using Vue Router to set a variable as a key for an object in JavaScript

The Element should take up the entire page with the exception of a 20px margin

How can you make the jQuery popup bar hidden by default?

Mobile display exhibiting glitches in animation performance

Dynamic Selection of JSON Key-Value Pairs in React Framework

Default value for the href property in NextJS Link is provided

The React Route Component is responsible for managing all routes that start with "/", with the exception of the "/login" route

When trying to access localhost:5000, the index.js file is unable to retrieve /

What is preventing my accordion from closing completely?

The retrieved information remains unchanged even after modifications are made on the subsequent Next.js server-side rendered page

Tips for binding data to numerous dynamic controls

Material UI Date-Picker: Placeholder for Month Abbreviation with 3 Letters set as "MMMM" instead of the usual "MMM"

JavaScript Issue Causing Jquery Carousel Dysfunction

What is the best way to apply fill to SVG using Tailwind CSS?

Is there a way to trigger an Angular $scope function from a hyperlink in the current or a new tab using a right

Utilizing 'Ng-If' causes a glitch in the program during the execution of a $( '#x' ).change event or when adding a new item with AngularFire $add

Using JavaScript code to sift through and eliminate irrelevant data

Every time I attempt to send a PUT request using AJAX, I encounter an error

The disabled button is not displayed when it is disabled