Question

我试图为我的元素创造一种视差效果。我希望它们在光标移动后稍微移动（最大移动10px）。

我已经设法使用我找到的代码跟随光标在自己的轴上旋转我的元素。

<script>
jQuery(document).ready(function(){
 var myContainer = $('#menuu');
 var sensitivityMultiplier = 0.03;
 var wrapperOffset = myContainer.offset();
 var CenterX = wrapperOffset.left + (myContainer.width()/2) ;
 var CenterY = wrapperOffset.top + (myContainer.height()/2) ;
 
 $(window).mousemove(function(e) {
 var mouseX = e.pageX;
 var mouseY = e.pageY;
 doAwesomeness(mouseX,mouseY);
 });
 
function doAwesomeness(mouseX,mouseY){
 var RelX = ( mouseX - CenterX ) * sensitivityMultiplier;
 var RelY = ( ( mouseY - CenterY ) * -1 ) * sensitivityMultiplier;
 myContainer.css('-webkit-transform', 'perspective(1000px) rotateY(' + RelX + 'deg) rotateX(' + RelY + 'deg)' );
 myContainer.css('transform', 'perspective(1000px) rotateY(' + RelX + 'deg) rotateX(' + RelY + 'deg)' );
 };
 
});
</script>

但我想要实现的目标更多的是＆＃34;翻译＆＃34;而不是＆＃34;旋转＆＃34;。有什么帮助吗？

Answer 1

是的，您尝试翻译而不是轮播，因此请使用translateX代替rotateX和translateY代替rotateY。然后只需将单位更改为像素而不是度数。

function doAwesomeness(mouseX,mouseY){
  var RelX = ( mouseX - CenterX ) * sensitivityMultiplier;
  var RelY = ( ( mouseY - CenterY ) * -1 ) * sensitivityMultiplier;
  myContainer.css('-webkit-transform', 'translateY(' + RelX + 'px) translateX(' + RelY + 'px)' );
  myContainer.css('transform', 'translateY(' + RelX + 'px) translateX(' + RelY + 'px)' );
};

稍微移动鼠标后面的元素

1 个答案: