特效描述:利用CSS3实现 3D倾斜 视差图片 展示特效。利用CSS3实现3D倾斜视差图片展示特效
代码结构
1. HTML代码
Movies
Popular
Princess Mononoke
Spirited Away
Howl's Moving Castle
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);