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


Posted in Javascript onSeptember 21, 2015

效果展示如下:

基于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);
 });
Javascript 相关文章推荐
将CKfinder整合进CKEditor3.0的新方法
Jan 10 Javascript
ASP.NET jQuery 实例18 通过使用jQuery validation插件校验DropDownList
Feb 03 Javascript
jQuery提交多个表单的小技巧
Jul 27 Javascript
javascript上下方向键控制表格行选中并高亮显示的方法
Feb 13 Javascript
JS基于面向对象实现的放烟花效果
May 07 Javascript
jQuery带进度条全屏图片轮播特效代码分享
Jun 28 Javascript
基于jQuery实现搜索关键字自动匹配功能
Mar 26 Javascript
使用JavaScript触发过渡效果的方法
Jan 19 Javascript
浅谈webpack 构建性能优化策略小结
Jun 13 Javascript
layui 弹出层回调获取弹出层数据的例子
Sep 02 Javascript
Vue调用后端java接口的实例代码
Oct 28 Javascript
js键盘事件实现人物的行走
Jan 17 Javascript
Java Mybatis框架入门基础教程
Sep 21 #Javascript
JS实现仿微博可关闭弹出层效果
Sep 21 #Javascript
jQuery+HTML5美女瀑布流布局实现方法
Sep 21 #Javascript
JavaScript实现网页加载进度条代码超简单
Sep 21 #Javascript
Javascript验证方法大全
Sep 21 #Javascript
JavaScript验证Email(3种方法)
Sep 21 #Javascript
基于jQuery实现多层次的手风琴效果附源码
Sep 21 #Javascript
You might like
关于php 接口问题(php接口主要也就是运用curl,curl函数)
2013/07/01 PHP
PHP中4种常用的抓取网络数据方法
2015/06/04 PHP
php 时间time与日期date之间的使用详解及区别
2016/11/07 PHP
JavaScript 组件之旅(四):测试 JavaScript 组件
2009/10/28 Javascript
js中的如何定位固定层的位置
2014/06/15 Javascript
JS实现判断滚动条滚到页面底部并执行事件的方法
2014/12/18 Javascript
jquery中change()用法实例分析
2015/02/06 Javascript
js中实现字符串和数组的相互转化详解
2016/01/24 Javascript
jquery编写Tab选项卡滚动导航切换特效
2020/07/17 Javascript
bootstrap网页框架的使用方法
2016/05/10 Javascript
星期几的不同脚本写法(推荐)
2016/06/01 Javascript
JavaScript获取服务器时间的方法详解
2016/12/11 Javascript
利用HBuilder打包前端开发webapp为apk的方法
2017/11/13 Javascript
轻量级JS Cookie插件js-cookie的使用方法
2018/03/22 Javascript
Three.js实现简单3D房间布局
2018/12/30 Javascript
Vue的双向数据绑定实现原理解析
2020/02/17 Javascript
vue Treeselect下拉树只能选择第N级元素实现代码
2020/08/31 Javascript
[55:47]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第三局
2016/02/27 DOTA
Python程序设计入门(1)基本语法简介
2014/06/13 Python
python让图片按照exif信息里的创建时间进行排序的方法
2015/03/16 Python
linux平台使用Python制作BT种子并获取BT种子信息的方法
2017/01/20 Python
Python实现抓取网页生成Excel文件的方法示例
2017/08/05 Python
Python实现学生成绩管理系统
2020/04/05 Python
Python面向对象编程之继承与多态详解
2018/01/16 Python
Python实现读取Properties配置文件的方法
2018/03/29 Python
python八皇后问题的解决方法
2018/09/27 Python
Python实现App自动签到领取积分功能
2018/09/29 Python
pandas重新生成索引的方法
2018/11/06 Python
世界上最大的巴士旅游观光公司:Big Bus Tours
2016/10/20 全球购物
外贸英语毕业生自荐信
2013/11/14 职场文书
母亲节感恩活动记录
2014/03/16 职场文书
课例研修方案
2014/05/31 职场文书
公司市场专员岗位职责
2014/06/29 职场文书
基层党员群众路线教育实践活动个人对照检查材料思想汇报
2014/10/05 职场文书
javaScript Array api梳理
2021/03/31 Javascript
JavaScript 防篡改对象的用法示例
2021/04/24 Javascript