How to achieve the effect of parallax on Apple TV posters based on CSS3 and jquery

Source: Internet
Author: User
Tags in degrees
This article mainly describes the implementation of the Apple TV poster parallax effect based on jquery and CSS3, and the friends you need can refer to the following

Use CSS and jquery to make it look as if it were the original effect.

In this tutorial, I'll use css,html and jquery to create an approximate Apple TV parallax effect, and if you're reading, I'm assuming you have a basic understanding of the three technologies mentioned above.

Nonsense not much to say, to begin the first part.

HTML page

Our page structure looks like this:

<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, you need a style class for the. Poster p, which contains 5 other styles of layer p in this p. On these five layers P there is a shine p to add some flash effect.

CSS Section

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

Body, HTML {height:100%; min-height:100%;}

Then give the body part some background gradient color:

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

In order for the. Poster to have a rotation effect, the parent container needs to set the perspective and transform effects. As we can see, the parent container of P is the 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, let it center on the page, add some fillet and shadow effect:

. 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 margin value at the top is half the negative of the P height, and the margin value on the left is half the negative of the P width. It is to be remembered that the center of the poster is also the center of the entire page.

Shadow effect

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

P[class *= ' layer-']

The. Poster has been designed to look at the effect.

Therefore, the CSS selects all the "layer-" p in the class name.

Now, the position value for all the layers is absolute, the background-repeat value is No-repeat, the background-position is top left, the size of the layer background is 100% width and the auto 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;}

Note that the value of Top,left,right,bottom is -10px, the purpose is to make the layer size than poster 20px, so that at each layer of the inspection effect will not see the edge of the layer.

The following is 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 ');}

In the layer-3 section, the layer does not move, so the dimensions do not have to be too large.

Complete the static effect

JavaScript section

Before you start, make sure you've introduced the jquery library, or you'll get an error.

The logic of parallax effect is this, whenever the mouse moves, depending on the position of the cursor, the Transforms:translatey,rotate,rotatey property of the. Poster will change. The farther the cursor is from the upper-left corner of the page, the more dramatic the animation.

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

For each element's value to be different, the value returned by each cursor formula is multiplied by a custom value, and the HTML code is returned to each animated layer element to add the data-offset= number attribute.

<p data-offset= "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= "Ten" class= "Layer-5" ></p ></p>

Each of the. Layers rules are the same, but we apply them to the Translatey and TranslateX properties.

The larger the value of the Data-offset property, the more pronounced the animation will be, which can be changed under the experience of these values.

For code readability, we assign. Poster to the $poster variable in JavaScript,. 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-"] ");

Now you need to consider the problem of getting to the cursor position when the cursor is moving. We can do this with the MouseMove event of $ (window), which returns a JavaScript object that contains the location information we need and some other variables that we can't use temporarily.

$ (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, offsetposte R = $poster. Data (' offset '),/* Custom value for animation depth */Transformposter = ' Translatey (' +-offsetx * offsetpos  ter + ' 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 */$laye    R.each (function () {var $this = $ (this); var offsetlayer = $this. Data (' offset ') | | 0; /* Get custom Parallax value, if element docent has data-offset, then its 0 */var transformlayer = ' TranslateX (' + of    FSETX * offsetlayer + ' px) translatey (' + OffsetY * offsetlayer + ' px) ';  $this. CSS (' transform ', transformlayer); });});

The next step is to use the formula explained above to calculate the values of offsety and offsetx, and then apply the parallax effect to the. Posert and each poster layer.

Very cool, now we have a small part with a parallax effect.

Basic completion

But not yet, the glossy part of the poster hasn't been set yet.

Now go back to the CSS section and give the. Shine P absolute Positioning, add a gradient color effect, set the Z-index property value to 100, and let it 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 has been a beautiful glitter layer on the poster, but in order to achieve a more realistic effect, the light should change as the cursor moves.

More realistic.

How do we do it? Maybe you remember the boring third day math class, and when you think about the formula you're never going to use, we use it now.

Therefore, the angle of inclination should be equal to the opposite value of the angle of the triangle formed by the cursor and the center of the poster. (Remember, the center of the poster is the center of the entire page, which is one-second of the width and height of the page)

Angle

First, find the right-angled edge of the triangle formed by the cursor and the center of the page, and make a right triangle after the cursor is connected to the center.

Then use the math.atan2 () function to get the angle value of the center point. Note that the return value of this function is represented by the Radian value, so we have to change the degree of the angle in the CSS to use the following formula:

Radian Value *180/pi = angle value

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, OFFSETP Oster = $poster. Data (' offset '),/* Custom value for animation depth */Transformposter = ' Translatey (' +-offsetx * off    Setposter + ' 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 has data-offset, then its 0 */var transformlayer = ' TranslateX (' +      OffsetX * offsetlayer + ' px) translatey (' + OffsetY * offsetlayer + ' px) ';    $this. CSS (' transform ', transformlayer);  }); });

You will find that the range of angle values is from-180-180 degrees, and the following code fixes this problem so that the angle value is from 0-360 degrees:

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

Now that the angle is there, 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,2 55,0) (80%) ');

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.