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

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

comme conteneur, et chaque

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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>

Copier après la connexion

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

Copier après la connexion

Étiquettes associées：

jquery_css3 jquery控制css3动画

source：php.cn

Article précédent：jQuery implémente des effets de menu dynamiques qui répondent au scrolling_jquery de la souris Article suivant：Tutoriel de base pour démarrer avec Java Mybatis Framework_Basic Knowledge

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur