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

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

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

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

Outils d'IA chauds

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

Générez AI Hentai gratuitement.

Afficher plus

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)

1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Meilleurs paramètres graphiques

1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Solution d'énigmes de coquille

2 Il y a quelques semaines By DDD

R.E.P.O. Comment réparer l'audio si vous n'entendez personne

1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Commandes de chat et comment les utiliser

1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌

Afficher plus

Outils chauds

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Afficher plus

Sujets chauds

Où se trouve l'entrée de connexion pour la messagerie Gmail ?

7539

15

Tutoriel CakePHP

1380

52

Quel est le format du nom de compte de Steam

83

11

Clé d'activation Win11 permanent

55

19

NYT Connexions Indices et réponses

21

86

Afficher plus