"Creating dynamic movement for a collection of layered images through asynchronous operations in JavaScript: A step

Question

"Creating dynamic movement for a collection of layered images through asynchronous operations in JavaScript: A step

I have a collection of 10 shapes that together form an intricate square image, depicted in the diagram below. My goal is to animate each shape by utilizing the output of a periodic function such as sine, which would dynamically respond to the user's mouse position. Each shape should move in a unique pattern influenced by different frequencies and periods, resulting in a captivating visual effect where the shapes constantly shift relative to one another as the user hovers over them.

https://i.sstatic.net/TMghS.png

Currently, I have succeeded in animating a single shape with the following code:

$(document).mousemove(function(e){
        var track = function(ampl, freq) {
        return {
            x   : ampl * Math.sin(freq*e.pageX),
            y   : ampl*1.6 * Math.sin(freq*e.pageY)
        };
    }

        var current = track(10, 0.05);
    $("#image").css({left:current.x, top:current.y});

});

My challenge now lies in extending this functionality to apply to the other 9 shapes showcased in this jsfiddle. How can I achieve this integration?

javascript jquery html css

Answer 1

Answer №1

To achieve a similar effect, I recommend following this approach: http://jsfiddle.net/jfhk8bye/

track = function(ampl, freq, pageX, pageY) {
    return {
        x   : ampl * Math.sin(freq*pageX),
        y   : ampl*1.6 * Math.sin(freq*pageY)
    };
}
$imgs = $('img.image')
$(document).mousemove(function(e)
{
    $imgs.each(function()
  {
    var $img = $(this);
    var current = track($img.data('ampl'), $img.data('freq'), e.pageX, e.pageY);
    console.log(current);
    $img.css({left:current.x, top:current.y});
  });
});

The changes made include:

Converted image IDs to classes and updated corresponding CSS accordingly.
Added data attributes to store frequencies and amplitudes for better HTML control.
Optimized and adjusted the JavaScript code as needed.

Answer 2

To achieve a similar effect, I recommend following this approach: http://jsfiddle.net/jfhk8bye/

track = function(ampl, freq, pageX, pageY) {
    return {
        x   : ampl * Math.sin(freq*pageX),
        y   : ampl*1.6 * Math.sin(freq*pageY)
    };
}
$imgs = $('img.image')
$(document).mousemove(function(e)
{
    $imgs.each(function()
  {
    var $img = $(this);
    var current = track($img.data('ampl'), $img.data('freq'), e.pageX, e.pageY);
    console.log(current);
    $img.css({left:current.x, top:current.y});
  });
});

The changes made include:

Converted image IDs to classes and updated corresponding CSS accordingly.
Added data attributes to store frequencies and amplitudes for better HTML control.
Optimized and adjusted the JavaScript code as needed.

Answer 3

Answer №2

Perhaps a solution could look something similar to this: http://jsfiddle.net/g7Lpnw5b/

Substitute your id's with class names, since multiple elements cannot have the same identifier, then loop through the elements to relocate them to different positions. You may need to adjust the parameters of the track function in order to achieve the desired movement of the shapes.

Answer 4

Perhaps a solution could look something similar to this: http://jsfiddle.net/g7Lpnw5b/

Substitute your id's with class names, since multiple elements cannot have the same identifier, then loop through the elements to relocate them to different positions. You may need to adjust the parameters of the track function in order to achieve the desired movement of the shapes.

Answer 5

Answer №3

It's accurate what @charsi mentioned.

For obtaining a distinct index value and applying it in the functions sin and cos, make sure to utilize $.each(index,el).

Check out this demonstration

function move(amplification, frequency, ind,x_coord,y_coord) {
  return {
    x   : amplification * Math.sin(frequency*x_coord + ind),
    y   : amplification*1.6 * Math.sin(frequency*y_coord + ind)
  };
}

$(document).mousemove(function(e){
    $(".image").each(function(ind,el){
           var current = move(5, 0.05, ind, e.pageX, e.pageY);
       $(this).css({left:current.x, top:current.y});
    });
});

Update: Ensure that the function is placed outside of the mousemove event

Answer 6

It's accurate what @charsi mentioned.

For obtaining a distinct index value and applying it in the functions sin and cos, make sure to utilize $.each(index,el).

Check out this demonstration

function move(amplification, frequency, ind,x_coord,y_coord) {
  return {
    x   : amplification * Math.sin(frequency*x_coord + ind),
    y   : amplification*1.6 * Math.sin(frequency*y_coord + ind)
  };
}

$(document).mousemove(function(e){
    $(".image").each(function(ind,el){
           var current = move(5, 0.05, ind, e.pageX, e.pageY);
       $(this).css({left:current.x, top:current.y});
    });
});

Update: Ensure that the function is placed outside of the mousemove event

Answer 7

Answer №4

Each image must have a unique identifier to avoid jQuery only affecting the first one found. Assign different ids to each image and include them in the list individually. Be sure to update the current value before each image to prevent alignment issues.

Answer 8

Each image must have a unique identifier to avoid jQuery only affecting the first one found. Assign different ids to each image and include them in the list individually. Be sure to update the current value before each image to prevent alignment issues.

"Creating dynamic movement for a collection of layered images through asynchronous operations in JavaScript: A step

Answer №1

Answer №2

Answer №3

Check out this demonstration

Answer №4

Similar questions

The Establishment Embrace of AJAX Interaction

Enable the modal window to be scrollable

AngularJS Array Indexing

Permanently remove the span tag and any associated text from the HTML document

What is the process of replacing fetch with JavaScript?

Top approach for creating/previewing a website using PHP, CSS, and MYSQL

The custom tooltips feature in Google linecharts will function properly only when the focus target is set to category

Pagination in the jQuery datatables plugin is not functioning as expected

Is it possible to transmit image form data to a PHP function in order to facilitate uploading?

The Django framework does not apply color to the Bootstrap Navbar as expected

Hierarchy segment for CSS selection

In what specific format does this plugin expect the callback string to be encoded as? (jquery-ui-multisearch)

Storing user browsing history and showcasing a randomly chosen page

PHP - Real-time form validation?

Spending additional time retrieving data with DataTables

Don't proceed until the condition is satisfied with Selenium-Webdriver

Retrieve information from cache following the completion of an ajax request

Utilize PHP to extract data from a SQL database and dynamically create li elements within a ul container for every row retrieved

Is it possible to compare data from two separate firestore collections before making updates to documents within each of them?

Using jQuery to switch classes when the input is invalid