TV海报视差效果www.bifa88.com

依据jQuery和CSS3达成电脑软件LE 电视机海报视差效果,jquerycss3

用CSS和jQuery来贯彻它,尽量看起来和原效劳等同。

www.bifa88.com 1

本课程里,笔者将利用CSS,HTML和jQuery来成立三个近似Apple
电视视差效果,假若您正在翻阅,小编固然你对上述两种技艺皆有大旨的问询。

废话非常少说,起始首先片段。

HTML页面

作者们的页面结构像上边那样:

<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>

第一,需求二个样式类为 .poster 的 div ,在那些 div 里满含5个别的样式的层
div。在那七个层 div 上有叁个 shine div来加多一些闪光效果。

CSS部分

先是,增加以下代码确认保障网页 body 部分的冲天是全体页面中度:

body, html { height: 100%; min-height: 100%; }

再给 body 部分片段背景渐变颜色:

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

为了让 .poster
有3D旋转的机能,父容器供给设置透视和改动效果。如大家所见,div的父容器便是body 本人,所以增加以下CSS代码:

body {
  background: linear-gradient(to bottom, #f6f7fc 0%,#d5e1e8 40%);
  transform-style: preserve-3d;
  transform: perspective(800px);
}

最近给卡片设置样式跟大小,让它在页面居中,增多一些圆角跟阴影效果:

.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;
}

为了让海报居中,要求设置 position 的值为 absolute,top:二分之一 , ‘left:百分之五十’,
上部的 margin 值是 div 中度的四分之二的负数,右侧的 margin 值是 div
宽度的四分之二的负数。须求记住的是 .poster 的骨干也是一体页面包车型大巴基本。

黑影效果

咱俩能够用以下的CSS选择器来挑选具备的层:

div[class *= 'layer-']

.poster 已经规划好了,来看看效果。

因此,CSS采用了颇具class类名里满含“layer-”的 div。

到现在,设置富有的层的 position 值是 absolute, background-repeat 值为
no-repeat, background-position 为 top left,
层背景的分寸为百分之百增长幅度和电动中度。

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 的值都以-10px,目标是让层的轻重缓急比 poster
的大20px,那样在各样层开展验证效果的时候就不会看出层的边缘部分了。

以下是给各种层增多背景:

.layer-1 {
  background-image:url('http://designmodo.com/demo/apple-tv-parallax/images/1.png');
}
.layer-2 {
  background-image:url('http://designmodo.com/demo/apple-tv-parallax/images/2.png');
}
.layer-3 {
  top: 0; bottom: 0;
  left: 0; right: 0;
  background-image:url('http://designmodo.com/demo/apple-tv-parallax/images/3.png');
}
.layer-4 {
  background-image:url('http://designmodo.com/demo/apple-tv-parallax/images/4.png');
}
.layer-5 {
  background-image:url('http://designmodo.com/demo/apple-tv-parallax/images/5.png');
}

在 layer-3 部分, 层不会移动,所以尺寸就不用太大了。

完了静态效果

JavaScript部分

在初叶以前,请确认保障已经引进了jQuery库,不然会报错的。

视差效果的逻辑是那样的,每当鼠标移动的时候,依照光标的地方,.poster 的
transforms:translateY,rotate,rotateY
属性将会变动。光标距离页面左上角越远,动画的效应越生硬。

公式就像是于那样的:offsetX=0.5-光标距离页面最上端的职位/宽度。

为了各种成分的值都不等同,将给每四个光标公式再次回到的值乘以叁个自定义的值,重临HTML的代码给种种会有动画的层元素加多data-offset=数字 的性质。

<div data-offset="15" class="poster">
  <div class="shine"></div>
  <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>
</div>

每二个 .layers 的条条框框都千篇一律,不过大家给他们采纳到 translateY 和
translateX 属性上。

data-offset 属性的值越大,动画的机能越通晓,能够转移这个值体验下。

为了代码可读性,大家在JavaScript里给 .poster 赋值给 $poster 变量,.shine
给 $shine 变量,$layer 变量代表全数层,w,h代表页面包车型地铁大幅和可观。

var $poster = $('.poster'),
$shine = $('.shine'),
$layer = $('div[class*="layer-"]');

现在,要求思虑下当光标移动的时候获得到光标地方的标题。我们能够用
$(window) 的 mousemove
事件来兑现,那个事件会回来叁个JavaScript对象,含有我们须求的岗位音讯和其他界分我们暂且还用不到的变量。

$(window).on('mousemove', function(e) {
  var w=e.currentTarget.innerWidth,h=e.currentTarget.innerHeight;
  var offsetX = 0.5 - e.pageX / w, /* where e.pageX is our cursor X coordinate */
  offsetY = 0.5 - e.pageY / h,
  offsetPoster = $poster.data('offset'), /* custom value for animation depth */
  transformPoster = 'translateY(' + -offsetX * offsetPoster + 'px) rotateX(' + (-offsetY * offsetPoster) + 'deg) rotateY(' + (offsetX * (offsetPoster * 2)) + 'deg)';
  /* apply transform to $poster */
  $poster.css('transform', transformPoster);
  /* parallax foreach layer */
  /* loop thought each layer */
  /* get custom parallax value */
  /* apply transform */
  $layer.each(function() {
    var $this = $(this);
    var offsetLayer = $this.data('offset') || 0; /* get custom parallax value, if element docent have data-offset, then its 0 */
    var transformLayer = 'translateX(' + offsetX * offsetLayer + 'px) translateY(' + offsetY * offsetLayer + 'px)';
    $this.css('transform', transformLayer);
  });
});

下一步,正是用地方表明的公式来总括offsetY和offsetX的值,然后正是把视差效果应用到.posert和每贰个海报层。

不行酷啊,现在大家就有了贰个有视差效果的小部件了。

www.bifa88.com 2

核心做到

唯独还没完,海报上的光明部分还没安装

前天回到CSS部分,给.shine div
相对定位,增加二个渐变颜色效果,设置z-index属性值为100,让它在全体层的上面。

.shine {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(90deg, rgba(255,255,255,.5) 0%,rgba(255,255,255,0) 60%);
  z-index: 100;
}

已经有了贰个地利人和的闪光层在海报上,然则为了到达更逼真的效力,光照顾该乘机光标的移动而转变。

www.bifa88.com 3

更逼真些

小编们如何做啊?或许您还记得无聊的初三数学课,当你想着你在学一些您根本都不会用到的公式的时候,大家今日就用到了。

所以,倾斜的角度应该等于光标与海报为主产生三角形的角度的相反值。(还记得吗,海报的主导正是一切页面包车型客车主干啊,也正是页面宽度和惊人的百分之五十)

www.bifa88.com 4

角度暗示图

第一,找到光标与页面大旨产生的三角的直角边,光标与宗旨连线后作出三个直角三角形。

接下来用 Math.atan2()
函数到手核心点的角度值。注意那些函数的再次来到值使用弧度值来表示的,所以大家得在CSS中转变到角的度数,用以下公式:

弧度值*180/pi = 角度值

var $poster = $('.poster');
  var $shine = $('.shine');
  var $layer = $('div[class *= "layer-"]');
  $poster.data("offset",15);
  $(window).on('mousemove', function(e) {
    var w=e.currentTarget.innerWidth,h=e.currentTarget.innerHeight;
    var offsetX = 0.5 - e.pageX / w, /* where e.pageX is our cursor X coordinate */
    offsetY = 0.5 - e.pageY / h,
    offsetPoster = $poster.data('offset'), /* custom value for animation depth */
    transformPoster = 'translateY(' + -offsetX * offsetPoster + 'px) rotateX(' + (-offsetY * offsetPoster) + 'deg) rotateY(' + (offsetX * (offsetPoster * 2)) + 'deg)';
    dy = e.pageY - h / 2,
    dx = e.pageX - w / 2,
    theta = Math.atan2(dy,dx), /* get angle in radians */
    angle = theta * 180 / Math.PI; /* convert rad in degrees */
    /* apply transform to $poster */
    $poster.css('transform', transformPoster);
    /* parallax foreach layer */
    /* loop thought each layer */
    /* get custom parallax value */
    /* apply transform */
    $layer.each(function() {
      var $this = $(this);
      var offsetLayer = $this.data('offset') || 0; /* get custom parallax value, if element docent have data-offset, then its 0 */
      var transformLayer = 'translateX(' + offsetX * offsetLayer + 'px) translateY(' + offsetY * offsetLayer + 'px)';
      $this.css('transform', transformLayer);
    });
  });

你会意识角度值的界定是从-180到180度,以下代码修复那几个主题材料让角度值从0-360度:

if (angle < 0) {
  angle = angle + 360;
}

前些天角度有了,就足以趁机光标的移位来动态改换渐变颜色的角度值:

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

以上所述是小编给大家介绍的依赖jQuery和CSS3贯彻应用程式LE
TV海报视差效果,希望对大家有着扶助,假如大家有别的疑问请给本身留言,笔者会及时复苏大家的。在此也特别谢谢大家对帮客之家网址的帮忙!

TV海报视差效果,jquerycss3
用CSS和jQuery来促成它,尽量看起来和原效劳等同。
本教程里,笔者将采取CSS,HTML和jQuery来创…

用CSS和jQuery来促成它,尽量看起来和原坚守同样。

用CSS3 & jQuery创立apple 电视海报视差效果,用css3写的icon小Logo

用CSS和jQuery来落到实处它,尽量看起来和原遵循同样。

www.bifa88.com 5
最后效果图

本课程里,作者将使用CSS,HTML和jQuery来创立一个近似Apple
彩TV差效果,若是你正在翻阅,作者倘让你对上述三种技术都有宗旨的摸底。

废话相当的少说,初阶率先某些。

www.bifa88.com 6

HTML页面

我们的页面结构像上面那样:

<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>

第一,供给贰个体制类为 .poster 的 div ,在这个 div 里包括5个别的样式的层 div。在那多个层 div 上有多少个 shine div来增添一些闪亮效果。

本学Corey,作者将利用CSS,HTML和jQuery来创造叁个近似Apple
电视机视差效果,假使您正在读书,小编要是你对上述二种技能都有基本的问询。

CSS部分

首先,添加以下代码确定保证网页 body 部分的冲天是任何页面高度:

body, html { height: 100%; min-height: 100%; }

再给 body 部根据地部背景渐变颜色:

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

为了让 .poster 有3D旋转的听从,父容器供给安装透视和转移效果。如小编辈所见,div的父容器便是 body 自个儿,所以加多以下CSS代码:

body {
    background: linear-gradient(to bottom, #f6f7fc 0%,#d5e1e8 40%);
    transform-style: preserve-3d;
    transform: perspective(800px);
}

今天给卡牌设置样式跟大小,让它在页面居中,增添一些圆角跟阴影效果:

.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;
}

为了让海报居中,须要安装 position 的值为 absolutetop:50% ,
‘left:50%’,
上部的 margin 值是 div 中度的八分之四的负数,左侧包车型地铁 margin 值是 div 宽度的二分一的负数。须求牢记的是 .poster 的中央也是一体页面包车型地铁核心。

www.bifa88.com 7
黑影效果

大家能够用以下的CSS选用器来选用具备的层:

div[class *= 'layer-']

.poster 已经规划好了,来拜候效果。

于是,CSS选拔了具有class类名里饱含“layer-”的 div

最近,设置有着的层的 position 值是 absolutebackground-repeat 值为 no-repeatbackground-position 为 top left,
层背景的高低为百分之百上升的幅度和活动中度。

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 的值都以-10px,指标是让层的大大小小比 poster 的大20px,那样在一一层开展查看效果的时候就不拜候到层的边缘部分了。

以下是给每种层增添背景:

.layer-1 {
    background-image: url('http://designmodo.com/demo/apple-tv-parallax/images/1.png');
}

.layer-2 {
    background-image: url('http://designmodo.com/demo/apple-tv-parallax/images/2.png');
}

.layer-3 {
    top: 0; bottom: 0;
    left: 0; right: 0;
    background-image: url('http://designmodo.com/demo/apple-tv-parallax/images/3.png');
}

.layer-4 {
    background-image: url('http://designmodo.com/demo/apple-tv-parallax/images/4.png');
}

.layer-5 {
    background-image: url('http://designmodo.com/demo/apple-tv-parallax/images/5.png');
}

在 layer-3 部分, 层不会移动,所以尺寸就无须太大了。

www.bifa88.com 8
做到静态效果

废话十分的少说,开头率先有个别。

JavaScript部分

在开端在此之前,请保管已经引进了jQuery库,不然会报错的。

视差效果的逻辑是这么的,每当鼠标移动的时候,依据光标的岗位,.poster 的 transforms:translateY,rotate,rotateY 属性将会退换。光标距离页面左上角越远,动画的成效越明白。

公式就就如于如此的:offsetX=0.5-光标距离页面顶部的岗位/宽度。

为了每一种成分的值都不相同样,将给每贰个光标公式重返的值乘以一个自定义的值,再次回到HTML的代码给各种会有动画的层成分增添 data-offset=数字 的属性。

<div data-offset="15" class="poster">
    <div class="shine"></div>
    <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>
</div>

每一个 .layers 的条条框框都一致,不过大家给他们利用到 translateY 和 translateX 属性上。

data-offset 属性的值越大,动画的效应越显然,能够改换那几个值体验下。

为了代码可读性,大家在JavaScript里给 .poster 赋值给 $poster 变量,.shine 给 $shine 变量,$layer 变量代表全数层,w,h代表页面包车型地铁上升的幅度和冲天。

var $poster = $('.poster'),
$shine = $('.shine'),
$layer = $('div[class*="layer-"]’);

近日,要求思考下当光标移动的时候得到到光标地点的主题素材。我们得以用 $(window) 的 mousemove 事件来促成,这些事件会回到二个JavaScript对象,含有大家须要的职位新闻和另外部分大家最近还用不到的变量。

$(window).on('mousemove', function(e) {
    var w=e.currentTarget.innerWidth,h=e.currentTarget.innerHeight;
    var offsetX = 0.5 - e.pageX / w, /* where e.pageX is our cursor X coordinate */
    offsetY = 0.5 - e.pageY / h,
    offsetPoster = $poster.data('offset'), /* custom value for animation depth */
    transformPoster = 'translateY(' + -offsetX * offsetPoster + 'px) rotateX(' + (-offsetY * offsetPoster) + 'deg) rotateY(' + (offsetX * (offsetPoster * 2)) + 'deg)';

    /* apply transform to $poster */
    $poster.css('transform', transformPoster);

    /* parallax foreach layer */
    /* loop thought each layer */
    /* get custom parallax value */
    /* apply transform */
    $layer.each(function() {
        var $this = $(this);
        var offsetLayer = $this.data('offset') || 0; /* get custom parallax value, if element docent have data-offset, then its 0 */
        var transformLayer = 'translateX(' + offsetX * offsetLayer + 'px) translateY(' + offsetY * offsetLayer + 'px)';

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

下一步,正是用位置表达的公式来总计offsetYoffsetX的值,然后就是把视差效果应用到.posert和每三个海报层。

那么些酷啊,今后大家就有了二个有视差效果的小部件了。

www.bifa88.com 9
基本做到

然则还没完,海报上的白内障部分还没安装

最近赶回CSS部分,给.shine div
相对定位,增加叁个渐变颜色效果,设置z-index属性值为100,让它在全部层的上面。

.shine {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(90deg, rgba(255,255,255,.5) 0%,rgba(255,255,255,0) 60%);
    z-index: 100;
}

一度有了叁个卓绝的闪光层在海报上,不过为了达到更逼真的效应,光照管该乘机光标的位移而变化。

www.bifa88.com 10
更逼真些

我们如何是好呢?恐怕你还记得无聊的初三数学课,当您想着你在学一些您根本都不会用到的公式的时候,大家将来就用到了。

所以,倾斜的角度应该等于光标与海报为主变成三角形的角度的相反值。(还记得吗,海报的主导正是整整页面包车型大巴主导啊,也便是页面宽度和中度的四分之二)

www.bifa88.com 11
角度暗示图

率先,找到光标与页面中央产生的三角形的直角边,光标与大旨连线后作出一个直角三角形。

然后用 Math.atan2() 函数到手主题点的角度值。注意那些函数的重回值使用弧度值来代表的,所以大家得在CSS中转变到角的度数,用以下公式:

弧度值*180/pi = 角度值

var $poster = $('.poster');
    var $shine = $('.shine');
    var $layer = $('div[class *= "layer-"]');

    $poster.data("offset",15);

    $(window).on('mousemove', function(e) {
        var w=e.currentTarget.innerWidth,h=e.currentTarget.innerHeight;
        var offsetX = 0.5 - e.pageX / w, /* where e.pageX is our cursor X coordinate */
        offsetY = 0.5 - e.pageY / h,
        offsetPoster = $poster.data('offset'), /* custom value for animation depth */
        transformPoster = 'translateY(' + -offsetX * offsetPoster + 'px) rotateX(' + (-offsetY * offsetPoster) + 'deg) rotateY(' + (offsetX * (offsetPoster * 2)) + 'deg)';

        dy = e.pageY - h / 2,
        dx = e.pageX - w / 2,
        theta = Math.atan2(dy,dx), /* get angle in radians */
        angle = theta * 180 / Math.PI; /* convert rad in degrees */

        /* apply transform to $poster */
        $poster.css('transform', transformPoster);

        /* parallax foreach layer */
        /* loop thought each layer */
        /* get custom parallax value */
        /* apply transform */
        $layer.each(function() {
            var $this = $(this);
            var offsetLayer = $this.data('offset') || 0; /* get custom parallax value, if element docent have data-offset, then its 0 */
            var transformLayer = 'translateX(' + offsetX * offsetLayer + 'px) translateY(' + offsetY * offsetLayer + 'px)';

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

你会发觉角度值的限量是从-180到180度,以下代码修复那些难题让角度值从0-360度:

if (angle < 0) {
    angle = angle + 360;
}

前些天角度有了,就足以随着光标的运动来动态改动渐变颜色的角度值:

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

读书进度中相见哪些难点依然想获得学习能源的话,款待参预学习沟通群
343599877,大家一起学前端!

小心 :减去90度的开始和结果是 linear-gradient 属性的要求,假诺你利用 -webkit-linear-gradient,-moz-linear-gradient品质就从不需求。

转译

jQuery创制apple
TV海报视差效果,用css3写的icon小Logo用CSS和jQuery来完成它,尽量看起来和原坚守等同。 最后效果图
本教程里,笔者将使…

HTML页面

小编们的页面结构像上面那样:

<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>

第一,须求一个样式类为 .poster 的 div ,在那个 div 里满含5个别的样式的层
div。在那三个层 div 上有三个 shine div来增加一些闪光效果。

CSS部分

先是,增添以下代码确定保障网页 body 部分的冲天是总体页面中度:

body, html { height: 100%; min-height: 100%; }

再给 body 部总部部背景渐变颜色:

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

为了让 .poster
有3D旋转的效应,父容器需求设置透视和退换效果。如大家所见,div的父容器便是body 本人,所以加多以下CSS代码:

body {
  background: linear-gradient(to bottom, #f6f7fc 0%,#d5e1e8 40%);
  transform-style: preserve-3d;
  transform: perspective(800px);
}

现行反革命给卡片设置样式跟大小,让它在页面居中,加多一些圆角跟阴影效果:

.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;
}

为了让海报居中,须求安装 position 的值为 absolute,top:二分之一 , ‘left:百分之五十’,
上部的 margin 值是 div 中度的八分之四的负数,左边的 margin 值是 div
宽度的一半的负数。须要记住的是 .poster 的为主也是整个页面包车型地铁中央。

黑影效果

咱俩得以用以下的CSS选用器来挑选具备的层:

div[class *= 'layer-']

.poster 已经规划好了,来看看效果。

进而,CSS采纳了具备class类名里包蕴“layer-”的 div。

前天,设置富有的层的 position 值是 absolute, background-repeat 值为
no-repeat, background-position 为 top left,
层背景的轻重为百分百上涨的幅度和机动高度。

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 的值都以-10px,目标是让层的尺寸比 poster
的大20px,那样在依次层实行考察效果的时候就不探访到层的边缘部分了。

以下是给种种层增多背景:

.layer-1 {
  background-image:url('http://designmodo.com/demo/apple-tv-parallax/images/1.png');
}
.layer-2 {
  background-image:url('http://designmodo.com/demo/apple-tv-parallax/images/2.png');
}
.layer-3 {
  top: 0; bottom: 0;
  left: 0; right: 0;
  background-image:url('http://designmodo.com/demo/apple-tv-parallax/images/3.png');
}
.layer-4 {
  background-image:url('http://designmodo.com/demo/apple-tv-parallax/images/4.png');
}
.layer-5 {
  background-image:url('http://designmodo.com/demo/apple-tv-parallax/images/5.png');
}

在 layer-3 部分, 层不会活动,所以尺寸就绝不太大了。

成功静态效果

JavaScript部分

在开首从前,请保管已经引进了jQuery库,不然会报错的。

视差效果的逻辑是这般的,每当鼠标移动的时候,遵照光标的职位,.poster 的
transforms:translateY,rotate,rotateY
属性将会改造。光标距离页面左上角越远,动画的功用越掌握。

公式就就好像于如此的:offsetX=0.5-光标距离页面最上端的岗位/宽度。

为了每一个元素的值都不均等,将给每一个光标公式再次来到的值乘以三个自定义的值,重临HTML的代码给每一个会有动画的层成分增加data-offset=数字 的属性。

<div data-offset="15" class="poster">
  <div class="shine"></div>
  <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>
</div>

每三个 .layers 的平整都同样,但是大家给他俩接纳到 translateY 和
translateX 属性上。

data-offset 属性的值越大,动画的作用越明显,可以更换那些值体验下。

为了代码可读性,我们在JavaScript里给 .poster 赋值给 $poster 变量,.shine
给 $shine 变量,$layer 变量代表全数层,w,h代表页面包车型地铁幅度和中度。

var $poster = $('.poster'),
$shine = $('.shine'),
$layer = $('div[class*="layer-"]');

当今,须要思考下当光标移动的时候获得到光标地方的主题素材。我们可以用
$(window) 的 mousemove
事件来促成,那个事件会重返一个JavaScript对象,含有我们必要的地方音讯和另外一些大家有的时候还用不到的变量。

$(window).on('mousemove', function(e) {
  var w=e.currentTarget.innerWidth,h=e.currentTarget.innerHeight;
  var offsetX = 0.5 - e.pageX / w, /* where e.pageX is our cursor X coordinate */
  offsetY = 0.5 - e.pageY / h,
  offsetPoster = $poster.data('offset'), /* custom value for animation depth */
  transformPoster = 'translateY(' + -offsetX * offsetPoster + 'px) rotateX(' + (-offsetY * offsetPoster) + 'deg) rotateY(' + (offsetX * (offsetPoster * 2)) + 'deg)';
  /* apply transform to $poster */
  $poster.css('transform', transformPoster);
  /* parallax foreach layer */
  /* loop thought each layer */
  /* get custom parallax value */
  /* apply transform */
  $layer.each(function() {
    var $this = $(this);
    var offsetLayer = $this.data('offset') || 0; /* get custom parallax value, if element docent have data-offset, then its 0 */
    var transformLayer = 'translateX(' + offsetX * offsetLayer + 'px) translateY(' + offsetY * offsetLayer + 'px)';
    $this.css('transform', transformLayer);
  });
});

下一步,就是用地点表明的公式来总结offsetY和offsetX的值,然后便是把视差效果应用到.posert和每三个海报层。

特别酷啊,现在大家就有了三个有视差效果的小部件了。

www.bifa88.com 12

基本产生

不过还没完,海报上的光华部分还没设置

明日赶回CSS部分,给.shine div
相对定位,增加一个渐变颜色效果,设置z-index属性值为100,让它在全体层的地点。

.shine {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(90deg, rgba(255,255,255,.5) 0%,rgba(255,255,255,0) 60%);
  z-index: 100;
}

业已有了多少个大好的闪光层在海报上,不过为了达到更逼真的成效,光照料该乘机光标的活动而生成。

www.bifa88.com 13

更逼真些

大家如何是好呢?恐怕您还记得无聊的初三数学课,当你想着你在学一些您根本都不会用到的公式的时候,大家今后就用到了。

由此,倾斜的角度应该相等光标与海报为主形成三角形的角度的相反值。(还记得吗,海报的主干正是整整页面包车型地铁宗旨啊,也等于页面宽度和中度的五成)

www.bifa88.com 14

角度暗示图

首先,找到光标与页面核心产生的三角的直角边,光标与中央连线后作出二个直角三角形。

然后用 Math.atan2()
函数到手核心点的角度值。注意这些函数的再次回到值使用弧度值来表示的,所以大家得在CSS中间转播换来角的度数,用以下公式:

弧度值*180/pi = 角度值

var $poster = $('.poster');
  var $shine = $('.shine');
  var $layer = $('div[class *= "layer-"]');
  $poster.data("offset",15);
  $(window).on('mousemove', function(e) {
    var w=e.currentTarget.innerWidth,h=e.currentTarget.innerHeight;
    var offsetX = 0.5 - e.pageX / w, /* where e.pageX is our cursor X coordinate */
    offsetY = 0.5 - e.pageY / h,
    offsetPoster = $poster.data('offset'), /* custom value for animation depth */
    transformPoster = 'translateY(' + -offsetX * offsetPoster + 'px) rotateX(' + (-offsetY * offsetPoster) + 'deg) rotateY(' + (offsetX * (offsetPoster * 2)) + 'deg)';
    dy = e.pageY - h / 2,
    dx = e.pageX - w / 2,
    theta = Math.atan2(dy,dx), /* get angle in radians */
    angle = theta * 180 / Math.PI; /* convert rad in degrees */
    /* apply transform to $poster */
    $poster.css('transform', transformPoster);
    /* parallax foreach layer */
    /* loop thought each layer */
    /* get custom parallax value */
    /* apply transform */
    $layer.each(function() {
      var $this = $(this);
      var offsetLayer = $this.data('offset') || 0; /* get custom parallax value, if element docent have data-offset, then its 0 */
      var transformLayer = 'translateX(' + offsetX * offsetLayer + 'px) translateY(' + offsetY * offsetLayer + 'px)';
      $this.css('transform', transformLayer);
    });
  });

你会发觉角度值的限量是从-180到180度,以下代码修复那个标题让角度值从0-360度:

if (angle < 0) {
  angle = angle + 360;
}

现行反革命角度有了,就足以趁机光标的运动来动态改换渐变颜色的角度值:

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

如上所述是笔者给我们介绍的依靠jQuery和CSS3达成应用程式LE
电视机海报视差效果,希望对大家持有辅助,假诺大家有其余疑问请给作者留言,笔者会及时回复大家的。在此也极其多谢大家对台本之家网址的支持!

您可能感兴趣的小说:

  • jQuery视差滚动效应网页完结形式经验总括
  • 五款援救你完毕惊艳视差滚动效应的jQuery插件