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

Exploring the dichotomy between controlled and uncontrolled elements within React. The _class attribute causing unexpected changes in an un

I created a custom Checkbox component that is essentially a styled checkbox with a 'fake element' acting as the original one. Custom Checkbox Component import React, {Component} from 'react'; import FormGroup from 'react-bootstra ...

javascriptreactjscheckboxreact-bootstrap

Text cannot be aligned

I recently encountered an issue where I center-aligned some text and positioned it using top:20%. Everything was working fine until I added a paragraph under it. At that point, the element moved back to its original position and the top:20% positioning did ...

htmlcssweb

Creating unique shaders with THREE.ShaderLibLearn how to craft personalized shaders using THREE

I've been diving into the world of THREEJS shader materials. So far, I've grasped the concept of how uniforms, vertexShader, and fragmentShader work together to manipulate and color vertices and fragments in the realm of glsl and webgl. I've ...

javascriptthree.jswebglaframewebgl-extensions

Is there a way to combine all the text on an HTML page into one continuous string without losing the CSS styling?

If I want to change all the text within every HTML element on a page to just the letter "A", how would I do it? Let's say I have a webpage set up like this: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

javascripthtml

Update the state within a callback to display corresponding content in a React component

Struggling with rendering conditional content based on the presence of a value. In my component, if an API key is not provided, I want to display an input field with a button. Once the API key is stored using `electron-json-storage` and set as a state, the ...

javascriptreactjscallbackelectron

Issue with capturing mouse position in canvas when hovering over <h1> element above it

I am working on a project using React Three Fiber to animate a 3D model that follows the mouse cursor. However, I have noticed that when the mouse hovers over some divs or headings on top of the canvas element, the animation freezes and becomes choppy unti ...

javascriptreactjsanimationthree.jsreact-three-fiber

Say goodbye to executable_path in Selenium 4 with webdriver_manager! Looking to use Firefox with the latest Selenium version? Let's explore

Currently in the process of migrating my testing project from Selenium 3 to Selenium 4, encountering warnings regarding the deprecation of "executable_path". Struggling to find the correct method of implementing webdriver_manager for Firefox with Selenium ...

seleniumfirefoxautomationwebdriver-manager

The filtertoolbar in jqgrid is not showing the filter operators such as equality (==), inequality (!=), and greater than or equal

I am struggling with setting up a filter toolbar on jqgrid. I have managed to display the filter toolbar, but unfortunately, I am unable to change the filter operator as the operators menu is not appearing on the grid. Additionally, the default search oper ...

jqueryasp.net-mvcjqgrid

Create a dedicated jQuery mobile login page in a separate HTML file

I am creating a hybrid app using JQM v1.4. The initial page is the login page and users must log in to access the content pages. Therefore, I plan to separate the HTML pages as follows: - Login page on its own, and all other content pages will be combine ...

jqueryjquery-mobile

I'm looking to add CSS transitions, like fade-ins, to a list of items in React in a way that the animations occur one after the other upon rendering. How can this be achieved?

I've scoured the depths of Stack Overflow and combed through countless pages on the internet in search of an answer to my query, but alas, I have not found a solution. So, my apologies if this question is a duplicate. Here's my conundrum: https ...

javascriptcssreactjscss-animationscss-transitions

Error: Unable to execute this.context.router.push due to it not being a function

I recently encountered an issue where the browser console displayed the same message as the post title. The problem occurred when trying to navigate to a profile page after clicking a dropdown button. contextTypes: { router: React.PropTypes.func }, _h ...

javascriptreactjscomponentsreact-router

How can we effectively create a table page object in Protractor that can handle various table selectors?

Recently, I have been delving into writing e2e tests in Protractor using page objects with JavaScript/Node.js. After reading numerous Stack Overflow posts and Julie's pages, as well as studying ProtractorPageObjects, I've come across an issue. A ...

javascriptseleniumprotractorend-to-endpageobjects

Tips for crafting paragraphs that double as sieves

I'm trying to simplify and shorten this code. I have three HTML paragraphs acting as filters: "all", "positive," and "negative", referring to reviews. Each has a corresponding div for reviews: "allcont", "poscont", and "negcont". Clicking on any of th ...

javascripthtmlcss

What steps are needed to enable the keyboard on a Otree application for mobile devices?

I previously utilized an Implicit Association Task (IAT) in an experiment conducted on computers. However, I now need to adapt this IAT for use on tablets or mobile devices. Here is how the IAT appears on a cellular device: https://i.stack.imgur.com/kNwo ...

javascriptpythonhtmlotree

JavaScript - Executing the change event multiple times

Below is the table I am working with: <table class="table invoice-items-table"> <thead> <tr> <th>Item</th> <th>Quantity</th> <th>Price</th> & ...

javascriptjquery

The first argument in the Node.appendChild function does not adhere to the Node interface when trying to append to a new element

Hey there, I'm new to web development and could use some help. I'm encountering an error where I am trying to add an href attribute to an image tag. Here is my code: function linkus() { var a = document.getElementsByTagName("img"); ...

javascriptnode.js

Table of Wordpress posts

There has been a question on how to easily add tables to blog posts without having to use HTML. While some are comfortable inserting the code directly into the blog, others like my friend prefer alternatives that don't involve coding. Is there a simpl ...

htmlcsswordpresscontent-management-system

What is the best way to upload an object in React using fetch and form-data?

Currently, I am facing an issue where I need to send a file to my express app as the backend. The problem lies in the fact that my body is being sent as type application/json, but I actually want to send it as form-data so that I can later upload this file ...

javascripthtmlnode.jsreactjsexpress

The issue with $.parseJSON when encountering double quotes

Could someone please clarify why a JSON string with double quotes can disrupt the functionality of $.parseJSON? This example works: [{"type":"message","content":{"user":"tomasa", "time":"1321722536", "text":"asdasdasd"}}] And so does this one: [{"type" ...

javascriptjqueryjson

Background wrapper does not reach full height of page

I am currently dealing with a website template that has a background image in the wrapper. However, when I view the site on a 13" laptop screen, the text extends below the fold because the wrapper only covers above the fold. This results in my content not ...

htmlcss