Based on jquery and CSS3 to realize Apple TV poster background visual difference effect source sharing _jquery

The results show as follows:

View Demo Download source code

HTML structure

Apple TV is a high-definition TV set-top box product launched by the company following Airport Express. If you've ever used one, you'll be attracted by the visual difference effects of the cool movie poster.

The visual difference effect of the HTML structure uses a <div> as a container, in which each <div> is a "layer."

<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>
<div.shine> Is the layer used to make streamer effects.

CSS Styles

In order to make the parcel element. Poster produces a 3D rotation effect, its parent element needs to set perspective and Transform-style.

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

The poster size here is set to a fixed 320x500 pixel, which makes rounded corners and some shadow effects relative to the center of the page.

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

The center of the poster is the absolute centering method: Left and top are 50% respectively, and then set Margin-left and margin-top as negative width and height values.

All "layers" in the poster can be selected by div[class*= the "layer-" selector. All layers are set to absolute positioning, the background image is not duplicated, the background-position is set to the top left corner, and the background size is set 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 values of the top,left,right and bottom properties in the above code are 10 pixels. They are used to make the layer size 20 pixels larger than the poster size. The reason for this is that when the visual difference effect is generated, the edge of the layer can be hidden.

Finally, set a background picture for each layer.

. layer-1 {
 background-image:url (' images/1.png ');
layer-2 {
 background-image:url (' images/2.png ');
layer-3 {
 top:0; bottom:0;
 left:0; right:0;
 Background-image:url (' images/3.png ');
layer-4 {
 background-image:url (' images/4.png ');
layer-5 {
 background-image:url (' images/5.png ');
}

Javascript

The principle of this visual aberration is that each time the user moves the mouse, the. Poster transforms:translatey, rotate, and Rotatey properties change depending on the mouse position. The farther the mouse is from the top left corner, the more areas the animation can see.

The calculated formula is similar to OffsetX = 0.5– the width of the mouse position/window.

To give each layer a different animation speed, it needs to be multiplied by a custom animation rate value, which is provided by the data-offset= "number" on the HTML tab.

<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= "Ten" class= "Layer-5" ></div>

The larger the value of the Data-offset, the greater the visible animation area.

The entire visual difference effect of the JS code is as follows:

var $poster = $ ('. Poster '), $shine = $ ('. Shine '), $layer = $ (' div[class*= ' layer-"]);  $ (window). On (' MouseMove ', function (e) {var w = $ (window). Width (),//Window width h = $ (window). Height (),/windows height OffsetX = 0.5 -E.PAGEX/W,//mouse x coordinate OffsetY = 0.5-e.pagey/h,//mouse y-coordinate dy = e.pagey-h/2,//@H/2 = poster container Center dx = e.pagex-w /2,//@W/2 = poster Container Center theta = math.atan2 (dy, dx),//Mouse and Poster center rad angle angle = theta * 180/math.pi-90,//convert RAD to Degree s offsetposter = $poster. Data (' offset '), Transformposter = ' Translatey (' +-offsetx * offsetposter + ' px ') rotatex (' + 
 (-offsety * offsetposter) + ' deg ' Rotatey (' + (OffsetX * (Offsetposter * 2)) + ' deg ';
 Get angle between 0-360 if (angle < 0) {angle = angle + 360; //gradient angle and opacity $shine. CSS (' background ', ' linear-gradient (' + angle + ' deg, Rgba (255,255,255, ' + e.pagey
 /h *. 5 + ') 0%,rgba (255,255,255,0) 80%) ');
 Poster transform $poster. css (' transform ', transformposter); Parallax foreach Layer $layer. Each (function () {var $this = $ (this), Offsetlayer = $this. Data (' offset ') | | 0, transformlayer = ' t
  Ranslatex (' + OffsetX * offsetlayer + ' px ') translatey (' + OffsetY * offsetlayer + ' px ');
 $this. CSS (' transform ', transformlayer); });