炫酷多层背景视觉差特效

所属分类:UI,媒体-悬停,图片展示

 15341  217  查看评论 (3)
分享到微信朋友圈
X
炫酷多层背景视觉差特效 ie兼容12

HTML结构:

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

<div class="wrapper">
  <div class="ad">
    <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);
相关插件-悬停,图片展示

纯css3鼠标悬停hover按钮动画事件插件

css3 transition属性制作多种按钮悬停动画特效,css3悬停按钮、CSS3过渡效果、CSS3点击按钮过渡效果
  悬停
 42817  676

CSS3圆形图片鼠标经过旋转效果

CSS3圆形图片鼠标经过旋转效果,图片上有简短标题和说明,兼容主流浏览器
  悬停
 32628  424

响应式网站图标

悬停变换效果
  悬停
 33777  368

jQuery鼠标悬停图文展示效果

网站常用效果,jQuery鼠标悬停图文展示
  悬停
 17000  261

讨论这个项目(3)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    kelisi123 0
    2021/7/22 17:26:00
    为甚恶魔小芬的脸绿了😀
        eh?eh!0
        2021/9/14 18:13:58
        是的,他绿了
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复