DIV跷跷板特效，3D视差效果

最新推荐文章于 2023-11-25 15:26:02 发布

默默地写代码

最新推荐文章于 2023-11-25 15:26:02 发布

阅读量778

点赞数 1

分类专栏： html JavaScript css3动画文章标签： 3D视差效果前端3D视差效果

本文链接：https://blog.csdn.net/qq_38334525/article/details/78741894

版权

JavaScript 同时被 3 个专栏收录

32 篇文章 0 订阅

订阅专栏

html

8 篇文章 0 订阅

订阅专栏

css3动画

6 篇文章 0 订阅

订阅专栏

这里写图片描述

css:
.avatar_author {
    background-color: rgba(236, 238, 239, 0) !important;
    box-shadow: 0 0 10px 1px #ccc;
    transition: all .3s linear;
    transform-origin: 50%;
}

html:
<div class="avatar_author jumbotron p-y-1">
    <img src="0.jpg" style="width: 100%" alt="">
    <p class="lead" style="font-size: 12px;color: rgba(123, 123, 123, 0.76);">本次他结合自身的资深阅历，及对行业技术领域的发展动向</p>
</div>

js:
<script>
    // DIV跷跷板效果；
    var el = document.querySelector('.avatar_author');
    el.addEventListener('mousemove', (e) => {
        // Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。
      var this_px = el.getBoundingClientRect().left;
      var this_py = el.getBoundingClientRect().top;
      var box_width = el.getBoundingClientRect().width;
      var box_height = el.getBoundingClientRect().height;
      var scroll_top = document.documentElement.scrollTop + document.body.scrollTop;

      var mouseX = e.pageX - this_px;
      var mouseY = e.pageY - scroll_top - this_py;
      var X;
      var Y;

      X = mouseX - box_width / 2;
      Y = box_height / 2 - mouseY;

      el.style.transform = `perspective(2000px) rotateY(${X / 10}deg) rotateX(${Y / 10}deg)`;
      el.style.boxShadow = `${-X / 20}px ${Y / 20}px 50px rgba(0, 0, 0, 0.5)`;
    })


    el.addEventListener('mouseleave', () => {
      el.style.transform = `perspective(2000px) rotateY(0deg) rotateX(0deg)`;
      el.style.boxShadow = '';
    })
</script>