The changing perspective in relation to the current position of a background

Question

The changing perspective in relation to the current position of a background

I am currently working on implementing a parallax effect, which is mostly successful. However, I have encountered a minor issue. Instead of the parallax effect being relative to the element's current position, it abruptly jumps to position 0. How can I adjust the code to make the parallax effect relative to its current position?

Below is the JavaScript code I am using:

$("#caveConfron").mousemove(function(e){
    var x = e.pageX - this.offsetLeft;

    var alreadyY = $("#caveConfron").css("backgroundPositionY");

    $("#caveConfron").css({"backgroundPosition":-(x/85)+"% 0%"});
});

Here is the CSS code related to the element:

#caveConfron{
    width:242px;
    height:344px;
    border:5px solid black;
    background:url('../img/caveConfrontBg.jpg') no-repeat center top;
    position:relative;
}

You can see an example of the issue here: http://jsfiddle.net/gNCjS/

javascript jquery html css

Answer 1

Answer №1

After extensive trial and error, I managed to identify the issue at hand.

Primarily, I realized that when the mouse intersects the center of the div, the x-coordinate of the mouse position should be "0". Therefore, I made the following adjustments without altering the CSS:

$("#caveConfron").mousemove(function(e){
    var x = e.pageX - this.offsetLeft;

    var reduce = $(this).width()/2;

    $("#caveConfron").css({"backgroundPosition":(((-x+reduce)/55)+50)+"% 0%"});
});

The variable reduce is set to half of the div's width. Subsequently, I negate the value of x while adding it to the value of reduce to ensure that if the mouse position of x goes beyond halfway through the div, it will become positive, thus maintaining the center as "0." Additionally, I divide by 55 to minimize abrupt movements on the x-axis, providing a smoother transition (you can adjust this value for a more significant jump if desired; it worked well for my purposes). Furthermore, I add 50 because in the original CSS, the background's position is centered, coinciding with a value of 50%.

I trust my explanation was clear and helpful!

Answer 2

After extensive trial and error, I managed to identify the issue at hand.

Primarily, I realized that when the mouse intersects the center of the div, the x-coordinate of the mouse position should be "0". Therefore, I made the following adjustments without altering the CSS:

$("#caveConfron").mousemove(function(e){
    var x = e.pageX - this.offsetLeft;

    var reduce = $(this).width()/2;

    $("#caveConfron").css({"backgroundPosition":(((-x+reduce)/55)+50)+"% 0%"});
});

The variable reduce is set to half of the div's width. Subsequently, I negate the value of x while adding it to the value of reduce to ensure that if the mouse position of x goes beyond halfway through the div, it will become positive, thus maintaining the center as "0." Additionally, I divide by 55 to minimize abrupt movements on the x-axis, providing a smoother transition (you can adjust this value for a more significant jump if desired; it worked well for my purposes). Furthermore, I add 50 because in the original CSS, the background's position is centered, coinciding with a value of 50%.

I trust my explanation was clear and helpful!

The changing perspective in relation to the current position of a background

Answer №1

Similar questions

The Node.js Express Server runs perfectly on my own machine, but encounters issues when deployed to another server

Reducing size and Assembling JavaScript and CSS

Output PHP Array as JSON for specific content based on conditions

Unable to retrieve the field value from the Json Object

Lamenting the Perils of Losing AngularJS Rootscope Data upon Refresh

Choosing a tab on a website using Python and Selenium

What is the best way to send props to a component that is exported using a Store Provider?

Optimal method for streaming and viewing an mkv video captured with ffmpeg in a web browser

Dynamic Cell Class Assignment in Ag Grid

How can I pass function arguments dynamically to a nested function in Node.js?

Is there a way to showcase a jquery calendar with highlighted days that are unable to be clicked on (read only)?

"Using the d-flex class with Bootstrap 4 tables does not allow them to expand to

What causes the appearance of 'GET/ 304 --' in my code? (vue.js, express)

Ensuring proper alignment of images and text in HTML when resizing

What steps do I need to take in order to show the present value using a range input?

Preserving the initial input values in a secure manner for future reference, utilizing either an object or a

If either the form is invalid or has been submitted, disable the button

Toggle the class and execute the order within a jQuery script

Node functions continue to run smoothly without affecting the loop

Having trouble loading an image after successfully connecting to an API with react.js