Use JQuery and CSS3 to share the source code of a visual effect similar to an Apple TV poster background, and use jquerycss3

Use JQuery and CSS3 to share the source code of a visual effect similar to an Apple TV poster background, and use jquerycss3

The results are as follows:

View demo download source code

HTML Structure

Apple TV is a HDTV set-top box launched by Apple following Airport Express. If you have used it before, it will certainly be attracted by the visual effects of cool movie posters.

The HTML structure of this visual difference effect uses a <div> as the container, and each <div> in it 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. shine> is a layer used to create a streamer effect.

CSS style

To make the wrap element. poster produce a 3D Rotation effect, its parent element needs to be set to perspective and transform-style.

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

The poster size is set to a fixed X pixel. Compared to the center of the page, a rounded corner effect and some shadow effects are created for the poster.

.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 adopts the absolute Center Method: left and top are respectively 50%, and then the width and height values of margin-left and margin-top are set to negative.

All the "layers" in the poster can be selected using the div [class * = "layer-"] selector. All layers are set to absolute positioning, the background image is not repeated, the background-position is set to the upper 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 top, left, right, and bottom attributes in the code above are both-10 pixels. They are used to make the layers 20 pixels larger than the poster size. The reason for this is that the side of the layer can be hidden in the poor visual effect.

Finally, set the background image 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 difference is that every time a user moves the mouse, the transforms: translateY, rotate, and rotateY attributes of the. poster will change according to the mouse position. The farther the mouse is from the upper left corner, the more visible the animation is.

The formula is similar to offsetX = 0.5-The mouse position/window width.

To give different layers different animation speeds, multiply them by a Custom Animation rate value provided by data-offset = "number" on the HTML Tag.

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

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

The JS Code for poor visual effects 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 (),/window height offsetX = 0.5-e. pageX/w, // The X coordinate of the mouse offsetY = 0.5-e. pageY/h, // Y coordinate of the mouse 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), // RAD angle of the mouse and poster center = theta * 180/Math. PI-90, // convert rad to degrees 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 implements shine.css ('background', 'linear-gradient ('+ angle + 'deg, rgba (255,255,255,' + e. pageY/h *. 5 + ') 0%, rgba (255,255,255, 0) 80%)'); // poster transform implements poster.css ('transform', transformPoster); // parallax foreach layer $ layer. each (function () {var $ this = $ (this), offsetLayer = $ this. data ('offset') | 0, transformLayer = 'translatex ('+ offsetX * offsetLayer + 'px) translateY (' + offsetY * offsetLayer + 'px )'; export this.css ('transform', transformLayer );});