Enhancing webpage performance by updating CSS properties dynamically based on mouse movement using JavaScript

Question

Enhancing webpage performance by updating CSS properties dynamically based on mouse movement using JavaScript

My jQuery function is changing the background-position property of three elements when the user moves their mouse, but it's causing some performance problems.

It's worth mentioning that the background images of these elements are SVGs.

Here's an example of the code:

$(window).on('mousemove', function(event) {
    window.requestAnimationFrame(function() {

        $banner.find('.pattern').each(function(key) {

            var modifier = 20 * (key + 1);

            $(this).css({
                'background-position': (event.pageX / modifier)+'px '+(event.pageY / modifier)+'px'
            });

        });

    });
});

You can view my working code here: https://codepen.io/thelevicole/project/full/DarVMY/

I am using window.requestAnimationFrame() and I have added the css attribute

will-change: background-position;

to each element.

However, this effect is causing lagging issues, especially on larger window sizes.

I suspect that the problem lies in using SVGs for the background images instead of PNGs. The reason behind using SVGs is the high pixel density screens.

If anyone has suggestions on how to improve the frames per second without resorting to PNGs, I would greatly appreciate it. Thank you.

javascript jquery css performance animation

Answer 1

Answer №1

My progress towards a solution has been a result of incorporating various suggestions.

While attempting to change the transform property of each element, I encountered another issue. The keyframe animation on those elements was being ignored when JavaScript styles were applied.

To resolve this, I nested the keyframe animation elements and utilized JS to transform the parent element.

I have integrated the advice from @CristianTraìna by moving window.requestAnimationFrame() outside of my mousemove function.

You can view the updated version at the original link: https://codepen.io/thelevicole/project/full/DarVMY/

Unfortunately, CodePen does not offer versioning for projects.

Final functioning code:

(function($) {
'use strict';

var $banner = $('section.interactive');
if ($banner.length) {
var $patterns = $banner.find('.pattern');

var x = 0,
y = 0;

// Bind animation to cursor
$(window).on('mousemove', function(event) {
x = event.pageX;
y = event.pageY;
});

/**
 * Request browser for animation performance
 * @see https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
 */
window.requestAnimationFrame(function animation() {

// Loop through each pattern layer
$patterns.each(function(key) {

// Modify the x,y coords per element to provide "depth"
var modifier = 20 * (key + 1);

// Move background position
$(this).css({
'transform': 'translate('+(x / modifier)+'px, '+(y / modifier)+'px)'
});

});

window.requestAnimationFrame(animation);

});
}

})(jQuery);

/* CSS Styles Here */

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<title>Animation Performance</title>
</head>
<body>
<section class="interactive">
<div class="layers">
<div class="pattern pattern-3">
<div class="inner"></div>
</div>
<div class="pattern pattern-2">
<div class="inner"></div>
</div>
<div class="pattern pattern-1">
<div class="inner"></div>
</div>
</div>
</section>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</body>
</html>

Answer 2

My progress towards a solution has been a result of incorporating various suggestions.

While attempting to change the transform property of each element, I encountered another issue. The keyframe animation on those elements was being ignored when JavaScript styles were applied.

To resolve this, I nested the keyframe animation elements and utilized JS to transform the parent element.

I have integrated the advice from @CristianTraìna by moving window.requestAnimationFrame() outside of my mousemove function.

You can view the updated version at the original link: https://codepen.io/thelevicole/project/full/DarVMY/

Unfortunately, CodePen does not offer versioning for projects.

Final functioning code:

(function($) {
'use strict';

var $banner = $('section.interactive');
if ($banner.length) {
var $patterns = $banner.find('.pattern');

var x = 0,
y = 0;

// Bind animation to cursor
$(window).on('mousemove', function(event) {
x = event.pageX;
y = event.pageY;
});

/**
 * Request browser for animation performance
 * @see https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
 */
window.requestAnimationFrame(function animation() {

// Loop through each pattern layer
$patterns.each(function(key) {

// Modify the x,y coords per element to provide "depth"
var modifier = 20 * (key + 1);

// Move background position
$(this).css({
'transform': 'translate('+(x / modifier)+'px, '+(y / modifier)+'px)'
});

});

window.requestAnimationFrame(animation);

});
}

})(jQuery);

/* CSS Styles Here */

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<title>Animation Performance</title>
</head>
<body>
<section class="interactive">
<div class="layers">
<div class="pattern pattern-3">
<div class="inner"></div>
</div>
<div class="pattern pattern-2">
<div class="inner"></div>
</div>
<div class="pattern pattern-1">
<div class="inner"></div>
</div>
</div>
</section>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</body>
</html>

Answer 3

Answer №2

By utilizing the on method, you are creating a chain of asynchronous functions that respond to events. The initial function listens for an event and triggers another function to listen for subsequent events.

In this scenario, you're monitoring the mousemove event and triggering the requestAnimationFrame event upon detection. However, if multiple mousemove events occur rapidly before requestAnimationFrame executes its callback, it can lead to potential issues.

An effective solution to this issue involves optimizing the code structure:

var x = 0;
var y = 0;
$patterns = $banner.find('.pattern');
$(window).on('mousemove', function(event) {
  x = event.pageX;
  y = event.pageY;
});

window.requestAnimationFrame(function moveBackground() {
  $patterns.each(function(key) {
    var modifier = 20 * (key + 1);
    $(this).css({
      'background-position': (x / modifier)+'px '+(y / modifier)+'px'
    });
  });
  window.requestAnimationFrame(moveBackground);
});

To view a functioning example of this setup (excluding JQuery), feel free to access my project here

Answer 4

By utilizing the on method, you are creating a chain of asynchronous functions that respond to events. The initial function listens for an event and triggers another function to listen for subsequent events.

In this scenario, you're monitoring the mousemove event and triggering the requestAnimationFrame event upon detection. However, if multiple mousemove events occur rapidly before requestAnimationFrame executes its callback, it can lead to potential issues.

An effective solution to this issue involves optimizing the code structure:

var x = 0;
var y = 0;
$patterns = $banner.find('.pattern');
$(window).on('mousemove', function(event) {
  x = event.pageX;
  y = event.pageY;
});

window.requestAnimationFrame(function moveBackground() {
  $patterns.each(function(key) {
    var modifier = 20 * (key + 1);
    $(this).css({
      'background-position': (x / modifier)+'px '+(y / modifier)+'px'
    });
  });
  window.requestAnimationFrame(moveBackground);
});

To view a functioning example of this setup (excluding JQuery), feel free to access my project here

Enhancing webpage performance by updating CSS properties dynamically based on mouse movement using JavaScript

Answer №1

Answer №2

Similar questions

leveraging JQuery plugins alongside Grails resources plugin

ajax is providing identical data when called too frequently

"Exploring the World of Button Coloration

What is the best way to create a brand new item using these characteristics?

Incorporating a jQuery word count and limit within PHP code: a step-by-step guide

Stop the form from refreshing upon submission using an Ajax call in AngularJS

I am in need of eliminating repetitive comments from each post

Using html() to load dynamic data can cause the script to malfunction if the content being loaded contains special characters

Refresh in AJAX, automated loading for seamless transition to a different page

To center a div vertically within a Bootstrap 4.1 container-fluid > row > col, you can use the following method

Creating a dynamic route in Node Express allows for flexible path handling

Using JavaScript to retrieve data from a JSON file and showcase it on a jQuery mobile webpage

Highcharts stretching beyond parent container width in Chrome exclusive

Using JavaScript to we can transfer the function result to an HTML input field

My SF2 app is experiencing issues with AngularJS integration

Guide to adding a label following an input field in a Formik (Input) form using React.js

Client-side image upload problem in Next.js API routes

What is the best way to prevent jest.mock from being hoisted and only use it in a single jest unit test?

Access the information within the tags from a different page

Having trouble with SCSS styles not being applied after refactoring to SCSS modules?