炫酷Apple TV多层背景视觉差特效

PetitQ 图片/图形 2018-11-19 1.35K 0 0

这是一款使用 jQuery 和 CSS3 制作的炫酷 Apple TV 多层背景视觉差特效。该视觉差特效在鼠标移动时，屏幕中的各个图层会以 3D 的方式跟随旋转。并且带有炫酷的流光效果。

HTML 结构

该 Apple TV 背景视觉差的基本 HTML 结构如下：其中.light 和.light-2 是流光层。余下的 3 个层是背景图片层。

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

```
<div class="wrapper">
```
```
  <div class="container">
```
```
    <div class="layer light"></div>
```

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

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

CSS 样式

包裹容器.wrapper 设置了固定的高度，定位方式为相对定位，并且设置透视度 perspective 为 800，使其转换为 3D 空间。

```
.wrapper {
```
```
  position: relative;
```
```
  height: 800px;
```
```
  -webkit-perspective: 800;
```
```
  perspective: 800;
```
```
}
```

所有的图层.layer 元素都采用绝对定位，并使用 will-change 属性告诉浏览器对即将执行的 transform 进行优化。

```
.layer {
```
```
  position: absolute;
```
```
  will-change: transform;
```
```
}
```

视觉差容器.container 使用绝对定位，相对于包裹容器居中。overflow 属性设置为 hidden，同时设置圆角和阴影效果。并使用 transform-style: preserve-3d;来使所有子元素在 3D 空间中展现。由于 IE 不支持该属性，所以在 IE 中没有 3D 效果。

```
.container {
```
```
  position: absolute;
```
```
  left: 50%;
```
```
  top: 50%;
```
```
  width: 840px;
```
```
  height: 500px;
```
```
  margin-left: -420px;
```
```
  margin-top: -250px;
```
```
  background: black;
```
```
  overflow: hidden;
```
```
  border-radius: 3px;
```
```
  -webkit-transform-style: preserve-3d;
```
```
  transform-style: preserve-3d;
```
```
  will-change: transform;
```

  box-shadow: 0 60px 100px rgba(0, 0, 0, 0.5);

```
}
```

3 个背景图层同样居中定位，使用 transform 属性将其缩小 0.7 倍。

```
.layer-1,
```
```
.layer-2,
```
```
.layer-3 {
```
```
  top: 50%;
```
```
  left: 50%;
```
```
  margin-left: -630px;
```
```
  margin-top: -375px;
```
```
  width: 1260px;
```
```
  height: 750px;
```
```
  -webkit-transform: scale(0.7);
```
```
          transform: scale(0.7);
```
```
}
```
```
.layer-1 {
```
```
  background-image: url(../img/1.jpg);
```
```
}
```
```
 
```
```
.layer-2 {
```
```
  background-image: url(../img/2.png);
```
```
}
```
```
 
```
```
.layer-3 {
```
```
  background-image: url(../img/3.png);
```
```
}
```

流光层也居中定位，使用椭圆渐变作为背景，并设置背景混合模式 mix-blend-mode 为 color-dodge 模式。并分别为各个层设置背景图像。

```
.light {
```
```
  top: 50%;
```
```
  left: 50%;
```
```
  margin-left: -840px;
```
```
  margin-top: -800px;
```
```
  width: 1680px;
```
```
  height: 1000px;
```

  background: -webkit-radial-gradient(ellipse closest-side at center, #6c6c6c, #000000);

  background: radial-gradient(ellipse closest-side at center, #6c6c6c, #000000);

```
  mix-blend-mode: color-dodge;
```
```
  opacity: .6;
```
```
  z-index: 3;
```
```
}
```
```
 
```
```
.light-2 {
```
```
  z-index: 4;
```

  background: -webkit-radial-gradient(ellipse closest-side at center, #ffffff, #000000);

  background: radial-gradient(ellipse closest-side at center, #ffffff, #000000);

```
  mix-blend-mode: screen;
```
```
  opacity: .3;
```
```
}
```

JavaScript

该视觉差特效使用 jQuery 代码来处理鼠标移动时为各个图层应用不同的 CSS transform 属性，来达到视觉差效果。

```
var $body = $('body');
```
```
    var WIDTH = $body.width();
```
```
    var HEIGHT = $body.height();
```
```
    var $ad = $('.container');
```
```
    var $light = $ad.find('.light');
```
```
    var $layer1 = $ad.find('.layer-1');
```
```
    var $layer2 = $ad.find('.layer-2');
```
```
    var $layer3 = $ad.find('.layer-3');
```
```
 
```
```
    function moveAd(e) {
```
```
      var xPer = e.clientX / WIDTH;
```
```
      var yPer = e.clientY / HEIGHT;
```
```
 
```
```
      var rotateX = 5 - (yPer * 10);
```
```
      var rotateY = -5 + (xPer * 10);
```
```
 
```
```
      $ad.css({
```

        transform: 'rotateX(' + rotateX + 'deg) rotateY(' + rotateY + 'deg) '

```
      });
```
```
 
```

      var translateX = -5 + (xPer * 10);

      var translateY = -5 + (yPer * 10);

```
 
```
```
      $layer2.css({
```

        transform: 'scale(.7) translateX(' + translateX + 'px) translateY(' + translateY + 'px)'

```
      });
```
```
 
```
```
      $layer3.css({
```

        transform: 'scale(.7) translateX(' + (translateX * 2) + 'px) translateY(' + (translateY * 2) + 'px)'

```
      });
```
```
 
```
```
      var lightX = 800 - (xPer * 1600);
```
```
      var lightY = 300 - (yPer * 600);
```
```
 
```
```
      $light.css({
```

        transform: 'translateX(' + lightX + 'px) translateY(' + lightY + 'px)'

```
      });
```
```
    }
```
```
 
```
```
    $body.on('mousemove', moveAd);
```

炫酷 Apple TV 多层背景视觉差特效

已有 338 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

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

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

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

图片/图形

炫酷Apple TV多层背景视觉差特效

HTML 结构

CSS 样式

JavaScript

炫酷 Apple TV 多层背景视觉差特效

相关文章

带方向感知功能的js图片遮罩层插件

Medium. 图片缩放预览jQuery插件

网格布局内容切换展示UI界面设计

发表回复取消回复

热销模板

图片/图形

HTML 结构

CSS 样式

JavaScript

炫酷 Apple TV 多层背景视觉差特效

相关文章

发表回复 取消回复

热销模板

发表回复取消回复