Firefox not responding to mouse movements

I am experimenting with creating an "animation" using JavaScript's "mousemove" Check it out here

This is the code I am currently using

$("body").mousemove(function(e){
var wWidth = $("body").width()/2
var wHeight = $("body").height()/2
var posX;
var posY;
posX = e.pageX - (wWidth);
posY = e.pageY - (wHeight)

posX = scaleBetween(posX,-90,90,wWidth,-wWidth);
posY = scaleBetween(posY,-90,90,wHeight,-wHeight);
    //$("body").text("Position X"+ posX.toString() +" Y"+ posY.toString());

$("#hero").css('-webkit-transform', 'rotate3d(0,1,0,'+(posX)+'deg)' + 'rotate3d(1,0,0,'+(-posY)+'deg)' )
});

function scaleBetween(unscaledNum, minAllowed, maxAllowed, min, max){
    return (maxAllowed-minAllowed)*(unscaledNum-min)/(max - min) + minAllowed;
}


$("body").mousemove(function(e){
var wWidth = $("body").width()/2
var wHeight = $("body").height()/2
var posX;
var posY;
posX = e.pageX - (wWidth);
posY = e.pageY - (wHeight)

posX = scaleBetween(posX,90,-90,wWidth,-wWidth);
posY = scaleBetween(posY,-90,90,wHeight,-wHeight);
    //$("body").text("Position X"+ posX.toString() +" Y"+ posY.toString());

$("#hero2").css('-webkit-transform', 'rotate3d(0,1,0,'+(posX)+'deg)' + 'rotate3d(1,0,0,'+(-posY)+'deg)' )
});

function scaleBetween(unscaledNum, minAllowed, maxAllowed, min, max){
    return (maxAllowed-minAllowed)*(unscaledNum-min)/(max - min) + minAllowed;
}
body{

width:100vw;
height:100vh;
margin: 0px;
}



.bighero {
position: absolute;
width:100%; 
height: 100%;
display : table-cell;
vertical-align : middle;
horinzontal-align : middle;
text-align:center;
z-index: 500;
}

img {
width:100vw;
height:50vh;
}

#hero2 {
margin-top: -5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="bighero">
<div id="hero">
<img src="http://cdn.playbuzz.com/cdn/0079c830-3406-4c05-a5c1-bc43e8f01479/7dd84d70-768b-492b-88f7-a6c70f2db2e9.jpg"/>
</div>

<div id="hero2">
<img src="http://cdn.playbuzz.com/cdn/0079c830-3406-4c05-a5c1-bc43e8f01479/7dd84d70-768b-492b-88f7-a6c70f2db2e9.jpg"/>
</div>
</div>

</body>

The animation does not seem to be working on Firefox, any insights on what could be causing this issue? Thank you for your help

javascriptjqueryhtmlcssfirefox

Answer №1

$("body").mousemove(function(e){
var wWidth = $("body").width()/2
var wHeight = $("body").height()/2
var posX;
var posY;
posX = e.pageX - (wWidth);
posY = e.pageY - (wHeight)

posX = scaleBetween(posX,-90,90,wWidth,-wWidth);
posY = scaleBetween(posY,-90,90,wHeight,-wHeight);
    //$("body").text("Position X"+ posX.toString() +" Y"+ posY.toString());

$("#hero").css('-webkit-transform', 'rotate3d(0,1,0,'+(posX)+'deg)' + 'rotate3d(1,0,0,'+(-posY)+'deg)' )

$("#hero").css('-moz-transform', 'rotate3d(0,1,0,'+(posX)+'deg)' + 'rotate3d(1,0,0,'+(-posY)+'deg)' )
$("#hero").css('transform', 'rotate3d(0,1,0,'+(posX)+'deg)' + 'rotate3d(1,0,0,'+(-posY)+'deg)' )
});

function scaleBetween(unscaledNum, minAllowed, maxAllowed, min, max){
    return (maxAllowed-minAllowed)*(unscaledNum-min)/(max - min) + minAllowed;
}


$("body").mousemove(function(e){
var wWidth = $("body").width()/2
var wHeight = $("body").height()/2
var posX;
var posY;
posX = e.pageX - (wWidth);
posY = e.pageY - (wHeight)

posX = scaleBetween(posX,90,-90,wWidth,-wWidth);
posY = scaleBetween(posY,-90,90,wHeight,-wHeight);
    //$("body").text("Position X"+ posX.toString() +" Y"+ posY.toString());


$("#hero2").css('-webkit-transform', 'rotate3d(0,1,0,'+(posX)+'deg)' + 'rotate3d(1,0,0,'+(-posY)+'deg)' )

$("#hero2").css('-moz-transform', 'rotate3d(0,1,0,'+(posX)+'deg)' + 'rotate3d(1,0,0,'+(-posY)+'deg)' )
$("#hero2").css('transform', 'rotate3d(0,1,0,'+(posX)+'deg)' + 'rotate3d(1,0,0,'+(-posY)+'deg)' )

});

function scaleBetween(unscaledNum, minAllowed, maxAllowed, min, max){
    return (maxAllowed-minAllowed)*(unscaledNum-min)/(max - min) + minAllowed;
}
body{

width:100vw;
height:100vh;
margin: 0px;
}



.bighero {
position: absolute;
width:100%; 
height: 100%;
display : table-cell;
vertical-align : middle;
horinzontal-align : middle;
text-align:center;
z-index: 500;
}

img {
width:100vw;
height:50vh;
}

#hero2 {
margin-top: -5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="bighero">
<div id="hero">
<img src="http://cdn.playbuzz.com/cdn/0079c830-3406-4c05-a5c1-bc43e8f01479/7dd84d70-768b-492b-88f7-a6c70f2db2e9.jpg"/>
</div>

<div id="hero2">
<img src="http://cdn.playbuzz.com/cdn/0079c830-3406-4c05-a5c1-bc43e8f01479/7dd84d70-768b-492b-88f7-a6c70f2db2e9.jpg"/>
</div>
</div>

</body>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Combine multiple jQuery click functions into a single function

One issue I am facing on my website is that there are multiple modules, each of which can be disabled by the user. The problem lies in the fact that I have a separate script for each module. Hence, my query: How can I combine these scripts into one (perhap ...

javascriptjqueryhtml

Having issues with importing images in Next.js using the Next Images package

Having trouble with importing images locally from the images folder. Error message: "Module not found: Can't resolve '../images/banner1.jpg'" https://i.stack.imgur.com/Dv90J.png Attempting to access images in ImagesSlider.js file at compo ...

javascriptreactjsimagenext.js

Why is the toggle functioning properly?

After much trial and error, I finally got my toggle functionality working with the following code. I was surprised that toggling the width actually changed the display settings, but it did the trick! It's still a bit mysterious to me how it all works ...

jqueryhtmlcss

Ajax form submission with FormData encountered an error: status 200 OK

I am attempting to upload a file using Ajax. The status of the Error is 200 and it shows as ok. The response text contains my MasterPage HTML Code. When debugging with a breakpoint in the method, I noticed that the request never reached the Back-end. H ...

c#jqueryajax

When using jQuery, you can utilize the mouse over event to display elements with the same class within an each loop

I am struggling with a hover effect on my webpage. I have three visible elements and three hidden elements, and I want each visible element to display only one hidden element when hovered over. However, the issue is that currently, hovering over a visible ...

htmljquerycss

Unable to get 100% height to work properly in HTML5 ASP.net because of the DOCTYPE

I'm currently working on creating an Asp.net website with a unique single-page portfolio style for the homepage. Each project or section should be 100% height of the viewport, stacked underneath each other to make use of anchor tags. However, I'm ...

cssasp.nethtmlheight

PHP is not processing the HTML form I submitted

HTML: <form method="post" action="create.php"> Job #: <input type="text" name="jobnum"> <br> Program: <input type="text" name="program"><br /> Ship Date: <input type="text" name="shipdate"><br /> Description: < ...

phphtmlformshttp-post

The format of the date cannot be modified when using DesktopDatePicker as a React Component

I've been attempting to modify the appearance of the component, but the UI keeps showing the date in month-year format. <DesktopDatePicker inputVariant="outlined" label="Pick-up date" id="date ...

javascriptreactjs

Ways to hide a div element when the size of the window is decreased

I need help with keeping my logo fixed on the header of my website. You can view an example of the issue here: Currently, when the window is resized to a certain height, the logo (The sun) changes position. How can I ensure that it remains fixed in place? ...

htmlcssfixedgraphical-logo

What are some creative ways to reveal a concealed card through animation?

I have a collection of MUI cards where one card remains hidden until the others are expanded. My goal is to add animation to the hidden card so it doesn't abruptly appear. Below is the styling and logic for achieving this: ** Styling ** const useStyl ...

javascriptreactjsmaterial-uicss-animationshidden

Error with Chakra UI and React Hook Form mismatched data types

Struggling with creating a form using ChakraUI and React-Hook-Form in TypeScript. The errors seem to be related to TypeScript issues. I simply copied and pasted this code from the template provided on Chakra's website. Here is the snippet: import { ...

javascriptreactjstypescriptreact-hook-formchakra-ui

How can I change :hover to a clickable element instead?

I attempted to create a full-width accordion with the following code: .page { margin: 0; padding: 0; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; height: 100vh; } .content { -webkit- ...

javascriptjqueryhtmlcss

CSS: Create a form with two input fields where the left field is adjustable in width and the right field fills up

------------- -------------------------------------------------- | some unique text | | some more original content, varying length | ------------- -------------------------------------------------- |<---------------------- 100% width ------------------ ...

css

Exploring ways to create a dynamic background image that allows the rest of the page to float over seamlessly

Currently working on a responsive website and almost done with the build. However, I came across a site where an image appears to be floating behind the rest of the webpage content. Tried searching for a solution using w3.css without any luck. Any sugge ...

htmlcssresponsive-design

Prevent sticky div from overlapping with footer

I currently have a social link menu that is fixed to the left side of my page, structured like this: <footer id="colophon"></footer> <div> <nav> <ul id="social"> <li>Link1</li> ...

javascripthtmlcss

Tips for sending <p> data to a router function with HTML

I am currently working on a page where users are presented with a list of unverified accounts, each containing its own form element. Each form has a "submit" button that triggers a POST call to /verify. However, I am facing an issue where the data within t ...

javascripthtmlnode.jsexpresshandlebars.js

How to Implement Button Disable Feature in jQuery When No Checkboxes Are Selected

I need help troubleshooting an issue with a disabled button when selecting checkboxes. The multicheck functionality works fine, but if I select all items and then deselect one of them, the button disables again. Can someone assist me with this problem? Be ...

javascriptjqueryhtml

unable to view the contents of the template using the directive

I am facing an issue with the Directive, as it is not adding an element to the Template. This directive has been included in the .html file. There are no errors being displayed in the console. directive.js: app.directive('myDirective', function ...

angularjshtmlangularjs-directive

Unable to retrieve file path from image selection in JavaScript by clicking on a button

I am trying to create a simple browsing feature that only accepts images. However, after clicking the button, I am unable to retrieve the full path in JavaScript. All I can get is the filename. JavaScript <script type="text/javascript"> functio ...

javascriptjqueryhtmlimage-uploading

The Google Maps geocoding service fails to provide accurate location information

I am currently attempting to utilize the Google Maps Geocoding API within my JavaScript code. Below is the snippet I have written: var geocoder = new google.maps.Geocoder(); function geocodeAddress() { var address = document.getElementById("address").v ...

javascriptgoogle-mapsgeocodinggoogle-geocoding-api