基于JQuery和CSS3实现仿Apple TV海报背景视觉差特效源码分享

下面是关于“基于JQuery和CSS3实现仿Apple TV海报背景视觉差特效源码分享”的完整攻略。

简介

该效果可以在网页上实现一个带有3D效果的海报展示区域，即类似于苹果电视背景的风格。展示区域可以响应鼠标或手指触摸的动作，具有视差特效，让用户可以在视觉上感受到立体的效果，增强该区域的互动性。

技术栈

该效果的实现主要采用的技术是jQuery和CSS3。

实现步骤

安装jQuery库

在网页HTML代码中引入jQuery库文件。可以使用CDN地址或下载到本地服务器。示例中使用CDN地址。

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

布置HTML代码

在网页中添加一个容器，用来显示海报的展示区域。如下：

<div id="poster">
  <div class="container">
    <div class="poster-list">
      <ul>
        <!-- 海报列表项 -->
        <li>
          <img src="./images/poster1.jpg" alt="poster 1">
        </li>
        ...
      </ul>
    </div>
  </div>
</div>

其中，poster-list类包含了所有海报的列表项，poster-list ul li表示每个海报项。

添加CSS样式

为海报容器添加自定义的样式，包括容器宽度、高度，以及各项样式细节。示例如下：

#poster {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
  z-index: -1;
}

.container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
  position: relative;
}

.poster-list {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotateX(0deg) rotateY(0deg);
  transition: all 1.5s ease-out;
}

重点是container类中的transform属性，它可以让网页元素实现3D效果。改变这个属性中的rotateX和rotateY值可以影响到元素的旋转方向和速度。

添加JavaScript代码

为海报容器添加JavaScript代码，实现响应鼠标或手指触摸的动作的代码。如下：

var container = document.querySelector('.container');
var posterList = document.querySelector('.poster-list ul');
var posters = document.querySelectorAll('.poster-list ul li');

var hWidth = $(window).width() / 2;
var hHeight = $(window).height() / 2;

var backface = function(event) {
  var $poster = $(this);
  var x = event.clientX - hWidth;
  var y = event.clientY - hHeight; 
  var rad = Math.atan2(y, x);
  var degree = (rad * (180 / Math.PI) * -1) - 90;
  $poster.css({
    transform: 'rotateX('+ Math.ceil(y/hHeight * -12) +'deg) rotateY('+ Math.ceil(x/hWidth * 12) +'deg) '
  });
};

for(var i = 0, len = posters.length; i < len; i++) {
  var poster = posters[i];
  poster.addEventListener("mousemove", backface, false);
  poster.addEventListener("touchstart", backface, false);
}

该代码中的backface函数实现了鼠标动作时展示效果的改变。包括了鼠标位置的计算和角度转换等需要的处理，还使用了transform属性对海报容器进行了3D效果的渲染。最后，为海报容器添加了mousemove和touchstart两种事件，监听鼠标和手指触摸的动作。