js+css3鼠标移动图片卡片互动画特效

js+css3鼠标移动图片卡片互动画特效

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

使用方法
HTML代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<div class="cards">
  <h3>Movies</h3>
  <h1>Popular</h1>
  <div class="card card__one">
    <div class="card__bg"></div>
    <img class="card__img" src="img/3dr_mono.png" />
    <div class="card__text">
      <p class="card__title">Princess Mononoke</p>
    </div>
  </div>
  <div class="card card__two">
    <div class="card__bg"></div>
    <img class="card__img" src="img/3dr_chihiro.png" />
    <div class="card__text">
      <p class="card__title">Spirited Away</p>
    </div>
  </div>
  <div class="card card__three">
    <div class="card__bg"></div>
    <img class="card__img" src="img/3dr_howlcastle.png" />
    <div class="card__text">
      <p class="card__title">Howl's Moving Castle</p>
    </div>
  </div>
</div>

Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
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);
当前内容只有登录了才能查看,如果您已经注册,请登录
0

发表评论