仿Apple TV海报背景视觉差特效

PetitQ 图片/图形 2018-11-18 1.78K 0 0

这是一款效果非常炫酷的 jQuery 和 CSS3 仿 Apple TV 海报背景视觉差特效。该视觉差特效在使用鼠标在屏幕上下左右移动的时候，海报中的各种元素就会以不同的速度运动，形成视觉差效果，并且还带有一些流光特效。

HTML 结构

Apple TV 是由苹果公司继 Airport Express 之后推出的一款高清电视机顶盒产品。如果你曾经使用过，一定会被其中的炫酷电影海报视觉差特效所吸引。该视觉差特效的 HTML 结构使用一个<div>作为容器，在它里面的每一个<div>都是一个“层”。

也想出现在这里？联系我们吧

```
<div class="poster">
```
```
  <div class="shine"></div>
```
```
  <div class="layer-1"></div>
```
```
  <div class="layer-2"></div>
```
```
  <div class="layer-3"></div>
```
```
  <div class="layer-4"></div>
```
```
  <div class="layer-5"></div>
```
```
</div>
```

<div .shine>是用于制作流光效果的图层。

CSS 样式

为了使包裹元素.poster 制作出 3D 旋转效果，它的父元素需要设置透视和 transform-style。

```
body {
```

  background: linear-gradient(to bottom, #f6f7fc 0%,#d5e1e8 40%);

```
  transform-style: preserve-3d;
```
```
  transform: perspective(800px);
```
```
}
```

这里的海报大小设置为固定的 320x500 像素，相对于页面居中，为它制作圆角效果和一些阴影效果。

```
.poster {
```
```
  width: 320px;
```
```
  height: 500px;
```
```
  position: absolute;
```
```
  top: 50%; left: 50%;
```
```
  margin: -250px 0 0 -160px;
```
```
  border-radius: 5px;
```

  box-shadow: 0 45px 100px rgba(0, 0, 0, 0.4);

```
  overflow:hidden;
```
```
}
```

海报的居中采用的是绝对定位居中法：left 和 top 分别为 50%，然后设置 margin-left 和 margin-top 为负的宽度值和高度值。海报中所有的“层”可以通过 div[class*="layer-"]选择器来选择。所有的图层都被设置为绝对定位，背景图片不重复，background-position 设置到左上角位置，背景的大小设置为 100%的宽度和自动高度。

```
div[class*="layer-"] {
```
```
  position: absolute;
```
```
  top: -10px;
```
```
  left: -10px;
```
```
  right: -10px; 
```
```
  bottom: -10px;
```
```
  background-size: 100% auto;
```
```
  background-repeat: no-repeat;
```
```
  background-position: 0 0;
```
```
  transition:0.1s;
```
```
}
```

注意上面代码中的 top，left，right 和 bottom 属性的值都是-10 像素。它们用于使图层的尺寸比海报的尺寸大 20 像素。这样做的原因是在产生视觉差效果是可以隐藏图层的边部。最后为每一个图层设置背景图片。

```
.layer-1 {
```

  background-image: url('images/1.png');

```
}
```
```
.layer-2 {
```

  background-image: url('images/2.png');

```
}
```
```
.layer-3 {
```
```
  top: 0; bottom: 0;
```
```
  left: 0; right: 0;
```

  background-image: url('images/3.png');

```
}
```
```
.layer-4 {
```

  background-image: url('images/4.png');

```
}
```
```
.layer-5 {
```

  background-image: url('images/5.png');

```
}
```

JavaScript

该视觉差效果的原理是每次用户移动鼠标是时候，.poster 的 transforms: translateY、rotate 和 rotateY 属性将根据鼠标的位置发生变化。鼠标距离左上角越远，动画可见的区域就越多。计算的公式类似于 offsetX = 0.5 – 鼠标位置 / 窗口的宽度。为了给各个层不同的动画速度，这里需要在乘以一个自定义的动画速率值，这个值由 HTML 标签上的 data-offset="number"提供。

<div data-offset="-2" class="layer-1"></div>

```
<div class="layer-2"></div>
```

<div data-offset="1" class="layer-3"></div>

<div data-offset="3" class="layer-4"></div>

<div data-offset="10" class="layer-5"></div>

data-offset 的值越大，可见的动画区域就越大。
整个视觉差效果的 JS 代码如下：

```
var $poster = $('.poster'),
```
```
  $shine = $('.shine'),
```
```
  $layer = $('div[class*="layer-"]');
```
```
 
```
```
$(window).on('mousemove', function(e) {
```

  var w = $(window).width(), //窗口宽度

    h = $(window).height(), /窗口高度

    offsetX = 0.5 - e.pageX / w, //鼠标X坐标

    offsetY = 0.5 - e.pageY / h, //鼠标Y坐标

    dy = e.pageY - h / 2, //@h/2 = 海报容器中心

    dx = e.pageX - w / 2, //@w/2 = 海报容器中心

    theta = Math.atan2(dy, dx), //鼠标和海报中心的RAD角度

    angle = theta * 180 / Math.PI - 90, //转换 rad 为 degrees

    offsetPoster = $poster.data('offset'),

    transformPoster = 'translateY(' + -offsetX * offsetPoster + 'px) rotateX(' + (-offsetY * offsetPoster) + 'deg)

                       rotateY(' + (offsetX * (offsetPoster * 2)) + 'deg)';

```
 
```
```
  //get angle between 0-360
```
```
  if (angle < 0) {
```
```
    angle = angle + 360;
```
```
  }
```
```
 
```
```
  //gradient angle and opacity
```

  $shine.css('background', 'linear-gradient(' + angle + 'deg, rgba(255,255,255,' + e.pageY / h * .5 + ') 0%,rgba(255,255,255,0) 80%)');

```
  //poster transform
```

  $poster.css('transform', transformPoster);

```
 
```
```
  //parallax foreach layer
```
```
  $layer.each(function() {
```
```
    var $this = $(this),
```

      offsetLayer = $this.data('offset') || 0,

      transformLayer = 'translateX(' + offsetX * offsetLayer + 'px) translateY(' + offsetY * offsetLayer + 'px)';

```
 
```

    $this.css('transform', transformLayer);

```
  });
```

仿 Apple TV 海报背景视觉差特效

已有 444 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

图片/图形

仿Apple TV海报背景视觉差特效

HTML 结构

CSS 样式

JavaScript

仿 Apple TV 海报背景视觉差特效

相关文章

360度产品图片3D旋转展示特效

JS + CSS实现的鼠标悬停弹出效果

纯CSS3用户卡片设计效果

发表回复取消回复

热销模板

图片/图形

HTML 结构

CSS 样式

JavaScript

仿 Apple TV 海报背景视觉差特效

相关文章

发表回复 取消回复

热销模板

发表回复取消回复