首页 网站特效 PHP/Mysql 网站模板 视频教程 整站源码 云服务器 免责声明

素材码 > 图片代码 > js+css3鼠标移动图片卡片倾斜视差交互动画特效

js+css3鼠标移动图片卡片倾斜视差交互动画特效

更新时间:2018-11-11 码币:1
357058607
js+css3鼠标移动图片卡片倾斜视差交互动画特效 应用简介

js+css3鼠标移动图片卡片倾斜视差交互动画特效,图片卡片结合背景图片,通过鼠标指针移动位置出现不同角度的倾斜视差效果。

js代码

<script> 
var cards = document.querySelector(".cards"); 
var images = document.querySelectorAll(".card__img"); 
var backgrounds = document.querySelectorAll(".card__bg"); 
var range = 40
 
// const calcValue = (a, b) => (((a * 100) / b) * (range / 100) -(range / 2)).toFixed(1); 
var calcValue = function calcValue(a, b) {return (a / b * range - range / 2).toFixed(1);}// thanks @alice-mx 
 
var timeout = void 0
document.addEventListener('mousemove'function (_ref) {var x = _ref.x,y = _ref.y; 
  if (timeout) { 
    window.cancelAnimationFrame(timeout); 
  } 
 
  timeout = window.requestAnimationFrame(function () { 
    var yValue = calcValue(y, window.innerHeight); 
    var xValue = calcValue(x, window.innerWidth); 
    console.log(xValue, yValue); 
    cards.style.transform = "rotateX(" + yValue + "deg) rotateY(" + xValue + "deg)"
 
    [].forEach.call(images, function (image) { 
      image.style.transform = "translateX(" + -xValue + "px) translateY(" + yValue + "px)"
    }); 
 
    [].forEach.call(backgrounds, function (background) { 
      background.style.backgroundPosition = xValue * .45 + "px " + -yValue * .45 + "px"
    }); 
  }); 
}, false);</script>


  • 收藏
  • 投诉
评论列表