Implementation of visual effects against AppleTV poster backgrounds based on JQuery and CSS3 source code sharing _ jquery

This is a very cool jQuery and CSS3 imitation AppleTV poster background visual effect. When the visual difference effect moves the mouse around the screen, the various elements in the poster move at different speeds to form the visual difference effect, and also has some special effects of streamer. 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

As a container

Is a "layer ".

 
 
 
 
 
 

 
  
It 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 p [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.

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

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 = $ ('P [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 );});