Use CSS3 & amp; jQuery to create apple TV poster parallax effects, and use icons written in css3

Use CSS3 & jQuery to create an apple TV poster parallax effect, and use a small icon written in css3

Implement it with CSS and jQuery, and try to look the same as the original effect.

Final

In this tutorial, I will use CSS, HTML, and jQuery to create a parallax effect similar to Apple TV. If you are reading it, I suppose you have a basic understanding of the above three technologies.

Start the first part.

HTML page

The page structure is as follows:

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

First, you need a style class.posterOfdiv, In thisdivContains five layers of other stylesdiv. In these five layersdivThere isshineDiv to add some flashing effects.

CSS Section

First, add the following code to ensure the webpagebodyThe part height is the whole page height:

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

ThenbodySome background gradient colors:

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

To make.posterWith 3D Rotation effect, the parent container needs to set the perspective and transformation effect. As we have seen,divThe parent container of isbodySo 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 for the card to center the page and 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;}

To center the poster, you must setpositionIsabsolute,top:50%, 'Left: 50% ', upper partmarginThe value isdivNegative Number of half of the height, leftmarginThe value isdivThe negative number of half of the width. Remember that.posterIs also the center of the entire page.

Shadow Effect

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

div[class *= 'layer-']

.posterIt has been designed. Let's see the effect.

Therefore, CSS Selects all class names containing "layer -"div.

Now, setpositionThe value isabsolute,background-repeatThe value isno-repeat,background-positionIstop leftThe layer background is 100% in width and automatic height.

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

Notestop,left,right,bottomThe value is-10px, which is used to compare the layer size.posterIn this way, the edge part of the layer will not be seen during the inspection of each layer.

Add a background for 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');}

Inlayer-3The layer won't move, so the size won't be too large.

Complete the static effect JavaScript Section

Before you start, make sure that you have introduced the jQuery library. Otherwise, an error will be reported.

The logic of the parallax effect is as follows: when the mouse moves, based on the cursor position,.posterOftransforms：translateY,rotate,rotateYThe property will change. The farther the cursor is from the upper left corner of the page, the more obvious the animation effect.

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

To make the values of each element different, multiply the value returned by each cursor formula by a custom value and return the HTML code to add an animated layer element.Data-offset = Number.

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

Every.layersThe rules are the same, but we apply themtranslateYAndtranslateXAttribute.

data-offsetThe larger the attribute value, the more obvious the animation effect. You can change these values to experience it.

For code readability, we provide.posterAssigned$posterVariable,.shineTo$shineVariable,$layerVariables represent all layers,w,hThe width and height of the page.

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

Now, you need to consider the problem of getting the cursor position when the cursor moves. We can use$(window)OfmousemoveThis event returns a JavaScript Object that contains the location information we need and other variables that we do not currently use.

$(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);    });});

The next step is to use the formula described above for calculation.offsetYAndoffsetXAnd then apply the parallax effect.posertAnd each poster layer.

It's cool. Now we have a small part with a parallax effect.

Basic completion

However, the glossy part of the poster has not been set yet.

Now return to the CSS section.shineDiv absolute positioning, add a gradient color effect, Setz-indexThe property value is 100, so that it is on top of all layers.

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

There is already a beautiful flashing layer on the poster, but in order to achieve a more realistic effect, the light should change with the movement of the cursor.

More lifelike

What should we do? Maybe you still remember the boring third-year math class. When you think about the formulas you never used before, we will use them now.

Therefore, the tilt angle should be the opposite of the triangle angle formed between the cursor and the poster center. (Remember, the center of the poster is the center of the entire page, that is, 1/2 of the page width and height)

Angle

First, find the straight corner of the triangle formed by the cursor and the center of the page, and draw a right triangle after connecting the cursor with the center.

Then useMath.atan2()Function to obtain the angle value of the center. Note that the return value of this function is expressed in radians, so we have to convert it to the angle degree in CSS. Use the following formula:

Radian value * 180/pi = angle value

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

You will find that the angle value ranges from-180 to 180 degrees. The following Code fixes the problem to make the angle value range from 0 to degrees:

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

Now the angle is ready, you can dynamically change the angle value of the gradient color as the cursor moves:

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

If you have any questions during the learning process or want to obtain learning resources, join the learning exchange group.
343599877. Let's learn the front-end together!

Note: The reason for subtracting 90 degrees is:linear-gradientAttribute needs, if you use-webkit-linear-gradient,-moz-linear-gradientAttribute is unnecessary.

Translate https://designmodo.com/apple-tv-effect/