0
onmousemove 이벤트를 사용하는 방법을 배우지 만 작동하지 않을 수 있습니다. 마우스를 따라 다니는 것과 같은 효과를 내기 위해 약간의 이미지를 기울여야합니다. 이것은 내가 달성하고자하는 것입니다 : https://tympanus.net/Development/PhotographyWebsiteConcept/#onmousemove 이벤트가 작동하지 않습니다.
를이 코드입니다 :
<div class="container-fluid" >
<div class="row" onmousemove="myFunction(event)">
<div class="col-sm-12" >
<div class="hero" id="myDIV">
<div class="hero__back hero__back--static"></div>
<div class="hero__back hero__back--mover" id="move" style="transform: perspective(1000px) translate3d(-3.08931px, 9.6px, 48px) rotate3d(-0.96, -0.308931, 0, 2deg);"></div>
<div class="hero__front"></div>
</div>
</div>
</div>
</div>
이 JS입니다 : 클래스 행의 사업부가 어떤 높이가 없기 때문에 내 생각
<script>
function myFunction(e) {
var xVal = -1/(win.height/2)*e.clientY + 1;
var yVal = 1/(win.width/2)*e.clientX - 1;
var transX = 20/(win.width)*e.clientX - 10;
var transY = 20/(win.height)*e.clientY - 10;
var transZ = 100/(win.height)*e.clientY - 50;
var coor = "Coordinates: (" + x + "," + y + ")";
document.getElementById("move").style.transform = 'perspective(1000px) translate3d(' + transX + 'px,' + transY + 'px,' + transZ + 'px) rotate3d(' + xVal + ',' + yVal + ',0,2deg)';
document.getElementById("move").style.WebkitTransform = 'perspective(1000px) translate3d(' + transX + 'px,' + transY + 'px,' + transZ + 'px) rotate3d(' + xVal + ',' + yVal + ',0,2deg)';
}
</script>