1

i'm trying to make an "animation" using javascript's "mousemove" You can see it here

This is the code i'm 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>

Turn out the animation is not working on firefox, any ideas from where the problem come ? Thanks or your precious help

rsz
  • 1,141
  • 1
  • 18
  • 38
Yagayente
  • 341
  • 2
  • 19
  • I think this article might help you out: http://stackoverflow.com/questions/22716333/firefox-javascript-mousemove-not-the-same-as-jquery-mousemove – ImInThatCorner Oct 20 '15 at 11:05
  • Firefox uses -moz-transform http://stackoverflow.com/questions/7572884/webkit-transform-alternative-for-firefox – BenG Oct 20 '15 at 11:05
  • you are using -webkit-transform which is only for webkit browsers. insted use -moz-transform: rotateY(-90deg);; -webkit-transform:rotateY(-90deg); transform:rotateY(-90deg); – Snm Oct 20 '15 at 11:07

1 Answers1

0

$("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>
Snm
  • 435
  • 4
  • 15