An example of implementing a parallax effect using CSS3+ jQuery

Use CSS and jQuery to implement it, try to look the same as the original effect.

Final rendering

In this tutorial, I will use CSS, HTML and jQuery to create an approximate Apple TV parallax effect. If you Reading this, I assume you have a basic understanding of the above three techniques.

Without further ado, let’s start the first part.

HTML page

Our page structure is as follows:

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

First, we need a style class .poster p, in this p contains 5 layers of other styles p. On top of these five layers p there is a shine p to add some sparkle.

CSS Part

First, add the following code to ensure that the height of the body part of the web page is the entire page height:

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

and then body Some background gradient colors:

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

In order to give .poster a 3D rotation effect, the parent container needs to set perspective and transformation effects. As we can see, the parent container of p is body itself, so add the following CSS code:

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

Now set the style and size of the card so that it fits on the page Center, add some rounded corners and shadow effects:

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

In order to center the poster, you need to set the value of position to absolute, top:50% , 'left:50%', the upper margin value is a negative number that is half the height of p, and the left margin value is p A negative number that is half the width. What needs to be remembered is that the center of .poster is also the center of the entire page.

Shadow effect

We can use the following CSS selector to select all layers:

p[class *= 'layer-']

.poster has been designed, let’s see the effect.

So, CSS selects all class names that contain "layer-" p.

Now, set the position value of all layers to absolute, <a href="http://www.php.cn/wiki/899.html" target="_blank">background-repeat</a> to the no-repeat, <a href="http://www.php.cn/wiki/896.html" target="_blank">background-position</a> is top left, and the size of the layer background is 100% width and automatic height.

p[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;
}

noticed that the values ​​​​of top,left,right,bottom are all -10px, the purpose is to make The size of the layer is 20px larger than poster, so that when inspecting the effects of each layer, the edges of the layer will not be visible.

The following is to add a background to each layer:

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

In the layer-3 part, the layer will not move, so the size does not need to be too large.

Complete the static effect

JavaScript part

Before you start, please make sure you have introduced the jQuery library, otherwise an error will be reported of.

The logic of the parallax effect is like this. Whenever the mouse moves, according to the position of the cursor, .poster's transforms: translateY,rotate,rotateY attributes will be changed. The farther the cursor is from the upper left corner of the page, the more obvious the animation effect will be.

The formula is similar to this: offsetX=0.5-the position/width of the cursor from the top of the page.

In order to have a different value for each element, multiply the value returned by each cursor formula by a custom value, return the HTML code and add to each layer element that will have animation. data-offset=Number attribute.

<p data-offset="15" class="poster">
    <p class="shine"></p>
    <p data-offset="-2" class="layer-1"></p>
    <p class="layer-2"></p>
    <p data-offset="1" class="layer-3"></p>
    <p data-offset="3" class="layer-4"></p>
    <p data-offset="10" class="layer-5"></p>
</p>

The rules for each .layers are the same, but we apply them to the translateY and translateX properties.

data-offset The larger the value of the attribute, the more obvious the animation effect will be. You can change these values ​​to experience it.

For the sake of code readability, we assign .poster to the $poster variable in JavaScript, and .shine to $ shine variable, $layer variable represents all layers, w,h represents the width and height of the page.

var $poster = $('.poster'),$shine = $('.shine'),$layer = $('p[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和每一个海报层。

非常酷啊，现在我们就有了一个有视差效果的小部件了。

基本完成

但是还没完,海报上的光泽部分还没设置

现在回到CSS部分，给.shine p 绝对定位，添加一个渐变颜色效果，设置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;
}

已经有了一个漂亮的闪光层在海报上，但是为了达到更逼真的效果，光照应该随着光标的移动而变化。

更逼真些

我们怎么做呢？可能你还记得无聊的初三数学课，当你想着你在学一些你从来都不会用到的公式的时候，我们现在就用到了。

所以，倾斜的角度应该等于光标与海报中心形成三角形的角度的相反值。（还记得吧，海报的中心就是整个页面的中心啊，也就是页面宽度和高度的二分之一）

角度示意图

首先，找到光标与页面中心形成的三角形的直角边，光标与中心连线后作出一个直角三角形。

然后用 Math.atan2() 函数得到中心点的角度值。注意这个函数的返回值使用弧度值来表示的，所以我们得在CSS中转换成角的度数，用以下公式：

弧度值*180/pi = 角度值

var $poster = $('.poster');    var $shine = $('.shine');    var $layer = $('p[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;
}

现在角度有了，就可以随着光标的移动来动态改变渐变颜色的角度值：

<code class="lsl">$shine.css(&#39;background&#39;, &#39;linear-gradient(&#39; + (angle - <span class="hljs-number">90) + &#39;deg, rgba(<span class="hljs-number">255,<span class="hljs-number">255,<span class="hljs-number">255,&#39; + e.pageY / h + &#39;) <span class="hljs-number">0%,rgba(<span class="hljs-number">255,<span class="hljs-number">255,<span class="hljs-number">255,<span class="hljs-number">0) <span class="hljs-number">80%)&#39;);<br/><br/></span></span></span></span></span></span></span></span></span></span></code>

学习过程中遇到什么问题或者想获取学习资源的话，欢迎加入学习交流群
343599877，我们一起学前端！

注意 ：减去90度的原因是 linear-gradient 属性的需要，如果你使用 -webkit-linear-gradient,-moz-linear-gradient属性就没有必要。

The above is the detailed content of An example of implementing a parallax effect using CSS3+ jQuery. For more information, please follow other related articles on the PHP Chinese website!