Partage du code source des effets de différence visuelle basés sur JQuery et CSS3 pour imiter l'affiche Apple TV background_jquery

L'effet est illustré ci-dessous :

Voir la démo Télécharger le code source

Structure HTML

Apple TV est un décodeur TV haute définition lancé par Apple après Airport Express. Si vous l'avez déjà utilisé, vous serez certainement attiré par les effets visuels sympas des affiches de films.

La structure HTML de cet effet de différence visuelle utilise un dc6dce4a544fdca2df29d5ac0ea9906b comme conteneur, et chaque dc6dce4a544fdca2df29d5ac0ea9906b

<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>是用于制作流光效果的图层。

Style CSS

Pour que l'élément enveloppé .poster crée un effet de rotation 3D, son élément parent doit définir la perspective et le style de transformation.

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

La taille de l'affiche ici est définie sur 320 x 500 pixels fixes, centrée par rapport à la page, lui donnant un effet de coins arrondis et des effets d'ombre.

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

L'affiche est centrée en utilisant la méthode de positionnement absolu : gauche et haut sont respectivement à 50 %, puis les marges gauche et supérieure sont définies sur des valeurs de largeur et de hauteur négatives.

Tous les "calques" de l'affiche peuvent être sélectionnés via le sélecteur div[class*="layer-"]. Tous les calques sont définis sur un positionnement absolu, l'image d'arrière-plan n'est pas répétée, la position de l'arrière-plan est définie sur le coin supérieur gauche et la taille de l'arrière-plan est définie sur une largeur de 100 % et une hauteur automatique.

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

Notez que les valeurs des attributs haut, gauche, droite et bas dans le code ci-dessus sont toutes de -10 pixels. Ils sont utilisés pour rendre les dimensions du calque 20 pixels plus grandes que les dimensions de l'affiche. La raison en est de masquer les bords du calque lors de la création d'un effet de différence visuelle.

Enfin, définissez une image d'arrière-plan pour chaque calque.

.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

Le principe de cet effet de différence visuelle est qu'à chaque fois que l'utilisateur bouge la souris, les transformations : propriétés translationY, rotate et rotateY de .poster changeront en fonction de la position de la souris. Plus la souris est éloignée du coin supérieur gauche, plus l'animation sera visible sur une grande zone.

La formule de calcul est similaire à offsetX = 0,5 – position de la souris / largeur de la fenêtre.

Afin de donner des vitesses d'animation différentes à chaque calque, elle doit être multipliée par une valeur de vitesse d'animation personnalisée. Cette valeur est fournie par data-offset="number" sur la balise HTML.

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

Plus la valeur du décalage des données est grande, plus la zone d'animation visible est grande.

Le code JS pour l'ensemble de l'effet de différence visuelle est le suivant :

var $poster = $('.poster'),
 $shine = $('.shine'),
 $layer = $('div[class*="layer-"]');
$(window).on('mousemove', function(e) {
 var w = $(window).width(), //窗口宽度
  h = $(window).height(), /窗口高度
  offsetX = 0.5 - e.pageX / w, //鼠标X坐标
  offsetY = 0.5 - e.pageY / h, //鼠标Y坐标
  dy = e.pageY - h / 2, //@h/2 = 海报容器中心
  dx = e.pageX - w / 2, //@w/2 = 海报容器中心
  theta = Math.atan2(dy, dx), //鼠标和海报中心的RAD角度
  angle = theta * 180 / Math.PI - 90, //转换 rad 为 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
 $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 = 'translateX(' + offsetX * offsetLayer + 'px) translateY(' + offsetY * offsetLayer + 'px)';
  $this.css('transform', transformLayer);
 });