Implement apple TV poster parallax effect based on jQuery and CSS3, jquerycss3

Implement apple TV poster parallax effect based on jQuery and CSS3, jquerycss3

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

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 div with a style class of. poster. In this div, there are five layer div s with other styles. There is a shine div on these five layers to add some flashing effects.

CSS Section

First, add the following code to ensure that the height of the webpage body is the whole page height:

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

Some background gradient colors are added to the body:

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

In order for. poster to have a 3D Rotation effect, the parent container needs to set the perspective and transformation effect. As we can see, the parent container of div 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 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, set the position value to absolute, top: 50%, 'left: 100', and the upper margin value to a negative number half of the div height, the margin value on the left is a negative number half the div width. Remember that the center of the. poster is also the center of the entire page.

Shadow Effect

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

div[class *= 'layer-']

. Poster has been designed to see the effect.

Therefore, CSS selects the div containing "layer-" in all class names.

Now, set the position value of all layers to absolute, the background-repeat value to no-repeat, the background-position to top left, and the layer background size to 100% 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;
}

Note that the top, left, right, and bottom values are all-10px, so that the layer size is 20px larger than that of poster, in 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');
}

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

Complete 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, the transforms: translateY, rotate, and rotateY attributes of. poster will change based on the cursor position. 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, return the HTML code to add the data-offset = numeric attribute to each layer element with an animation.

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

Each. layers rule is the same, but we apply it to the attributes of translateY and translateX.

The greater the value of the data-offset attribute, the more obvious the animation effect, you can change these values to experience.

For code readability, we provide. the poster value is assigned to the $ poster variable ,. shine gives the $ shine variable. The $ layer variable represents all layers. w and h represent the 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 the $ (window) mousemove event to implement it. This event will return a JavaScript Object containing the location information we need and other variables that we do not yet 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 to calculate the offsetY and offsetX values, and then apply the parallax effect to. posert and 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 and add a gradient color effect to the absolute position of the. shine div. Set the value of the z-index attribute to 100 so that it is on 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, use the Math. atan2 () function to obtain the angle value of the center point. 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%)');

The above section describes how to achieve the parallax effect of apple TV posters Based on jQuery and CSS3. I hope it will be helpful to you. If you have any questions, please leave a message for me, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!