


Comment obtenir l'effet de parallaxe de l'affiche APPLE TV basé sur CSS3 et jQuery
Cet article présente principalement l'effet de parallaxe de l'affiche APPLE TV basé sur jQuery et CSS3. Les amis qui en ont besoin peuvent se référer à
Utilisez CSS et jQuery pour l'implémenter, essayez de ressembler à l'effet original. .
Dans ce tutoriel, j'utiliserai CSS, HTML et jQuery pour créer un effet de parallaxe Apple TV approximatif. Si vous lisez ceci, je suppose que vous connaissez ce qui précède. trois techniques. Avoir une compréhension de base.
Sans plus attendre, commençons la première partie.
Page HTML
La structure de notre page est la suivante :
<p class="poster"> <p class="shine"></p> <p class="layer-1"></p> <p class="layer-2"></p> <p class="layer-3"></p> <p class="layer-4"></p> <p class="layer-5"></p> </p>
Tout d'abord, vous avez besoin d'un p avec la classe de style .poster, qui contient 5 couches p d'autres styles. Au-dessus de ces cinq couches p, il y a un brillant p pour ajouter un peu d'éclat.
Section CSS
Tout d'abord, ajoutez le code suivant pour vous assurer que la hauteur de la partie du corps de la page Web correspond à la hauteur entière de la page :
body, html { height: 100%; min-height: 100%; }
Donner quelques couleurs de dégradé de fond à la partie du corps :
body { background: linear-gradient(to bottom, #f6f7fc 0%,#d5e1e8 40%); }
Afin de donnez à .poster un effet de rotation 3D, le conteneur parent doit définir les effets de perspective et de transformation. Comme nous pouvons le voir, le conteneur parent de p est le corps lui-même, ajoutez donc le code CSS suivant :
body { background: linear-gradient(to bottom, #f6f7fc 0%,#d5e1e8 40%); transform-style: preserve-3d; transform: perspective(800px); }
Maintenant, stylisez et dimensionnez la carte de manière à ce que Centrez la page et ajoutez des 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; }
Afin de centrer l'affiche, vous devez définir la valeur de position sur absolue , top:50% , 'left:50%', la valeur de la marge supérieure est un nombre négatif qui correspond à la moitié de la hauteur de p et la valeur de la marge à gauche est un nombre négatif qui correspond à la moitié de la largeur de p. Il ne faut pas oublier que le centre du .poster est également le centre de la page entière.
Effet d'ombre
Nous pouvons utiliser le sélecteur CSS suivant pour sélectionner tous les calques :
p[class *= 'layer-']
.poster a été conçu, voyons l'effet.
Ainsi, CSS sélectionne tous les p contenant "layer-" dans le nom de la classe.
Maintenant, définissez la valeur de position de tous les calques sur absolue, la valeur de répétition d'arrière-plan sur aucune répétition, la position d'arrière-plan en haut à gauche et la taille de l'arrière-plan du calque sur 100 % de largeur et de hauteur automatique. .
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; }
Notez que les valeurs de haut, gauche, droite, bas sont toutes -10px, le but est de faire la taille de le calque est 20 px plus grand que l'affiche, donc lors de l'inspection des effets de chaque calque, les bords des calques ne seront pas visibles.
Ce qui suit consiste à ajouter un arrière-plan à chaque calque :
.layer-1 { background-image: url('http://designmodo.com/demo/apple-tv-parallax/images/1.png'); } .layer-2 { background-image: url('http://designmodo.com/demo/apple-tv-parallax/images/2.png'); } .layer-3 { top: 0; bottom: 0; left: 0; right: 0; background-image: url('http://designmodo.com/demo/apple-tv-parallax/images/3.png'); } .layer-4 { background-image: url('http://designmodo.com/demo/apple-tv-parallax/images/4.png'); } .layer-5 { background-image: url('http://designmodo.com/demo/apple-tv-parallax/images/5.png'); }
Dans la partie calque-3, le calque ne bougera pas , donc la taille est Il n'est pas nécessaire qu'elle soit trop grande.
Complétez l'effet statique
Partie JavaScript
Avant de commencer, assurez-vous d'avoir introduit la bibliothèque jQuery, sinon une erreur sera signalée.
La logique de l'effet de parallaxe est la suivante. Chaque fois que la souris bouge, les propriétés de transformation : translationY, rotate, rotateY de .poster changeront en fonction de la position du curseur. Plus le curseur est éloigné du coin supérieur gauche de la page, plus l'effet d'animation sera évident.
La formule est similaire à celle-ci : offsetX=0,5-la position/largeur du curseur à partir du haut de la page.
Afin d'avoir une valeur différente pour chaque élément, multipliez la valeur renvoyée par chaque formule de curseur par une valeur personnalisée, renvoyez le code HTML et ajoutez un décalage de données à chaque élément de calque qui aura une animation = Propriétés. de chiffres.
<p data-offset="15" class="poster"> <p class="shine"></p> <p data-offset="-2" class="layer-1"></p> <p class="layer-2"></p> <p data-offset="1" class="layer-3"></p> <p data-offset="3" class="layer-4"></p> <p data-offset="10" class="layer-5"></p> </p>
Les règles pour chaque .layers sont les mêmes, mais nous les appliquons aux propriétés TranslateY et TranslateX.
Plus la valeur de l'attribut data-offset est grande, plus l'effet d'animation sera évident. Vous pouvez modifier ces valeurs pour en faire l'expérience.
Pour la lisibilité du code, nous attribuons .poster à la variable $poster en JavaScript, .shine à la variable $shine, la variable $layer représente tous les calques, et w et h représentent la largeur et la hauteur de la page. .
var $poster = $('.poster'), $shine = $('.shine'), $layer = $('p[class*="layer-"]');
Maintenant, nous devons considérer le problème de l'obtention de la position du curseur lorsque le curseur se déplace. Nous pouvons utiliser l'événement mousemove de $(window) pour y parvenir. Cet événement renverra un objet JavaScript contenant les informations de position dont nous avons besoin et quelques autres variables dont nous n'avons pas encore besoin.
$(window).on('mousemove', function(e) { var w=e.currentTarget.innerWidth,h=e.currentTarget.innerHeight; var offsetX = 0.5 - e.pageX / w, /* where e.pageX is our cursor X coordinate */ offsetY = 0.5 - e.pageY / h, offsetPoster = $poster.data('offset'), /* custom value for animation depth */ transformPoster = 'translateY(' + -offsetX * offsetPoster + 'px) rotateX(' + (-offsetY * offsetPoster) + 'deg) rotateY(' + (offsetX * (offsetPoster * 2)) + 'deg)'; /* apply transform to $poster */ $poster.css('transform', transformPoster); /* parallax foreach layer */ /* loop thought each layer */ /* get custom parallax value */ /* apply transform */ $layer.each(function() { var $this = $(this); var offsetLayer = $this.data('offset') || 0; /* get custom parallax value, if element docent have data-offset, then its 0 */ var transformLayer = 'translateX(' + offsetX * offsetLayer + 'px) translateY(' + offsetY * offsetLayer + 'px)'; $this.css('transform', transformLayer); }); });
L'étape suivante consiste à utiliser la formule expliquée ci-dessus pour calculer les valeurs de offsetY et offsetX, puis à appliquer l'effet de parallaxe à . posert et chaque couche d'affiche.
Très cool, nous avons maintenant un widget avec effet parallaxe.
Essentiellement terminé
Mais ce n'est pas encore fini, la partie brillante de l'affiche n'a pas encore été posée
Retournez maintenant à la partie CSS et donnez à .shine p un positionnement absolu, ajoutez un effet de dégradé de couleur, définissez la valeur de l'attribut z-index sur 100, afin qu'il soit au-dessus de tous les calques.
.shine { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, rgba(255,255,255,.5) 0%,rgba(255,255,255,0) 60%); z-index: 100; }
Il y a déjà une jolie couche de paillettes sur l'affiche, mais pour obtenir un effet plus réaliste, l'éclairage doit changer à mesure que le curseur se déplace.
更逼真些
我们怎么做呢?可能你还记得无聊的初三数学课,当你想着你在学一些你从来都不会用到的公式的时候,我们现在就用到了。
所以,倾斜的角度应该等于光标与海报中心形成三角形的角度的相反值。(还记得吧,海报的中心就是整个页面的中心啊,也就是页面宽度和高度的二分之一)
角度示意图
首先,找到光标与页面中心形成的三角形的直角边,光标与中心连线后作出一个直角三角形。
然后用 Math.atan2() 函数得到中心点的角度值。注意这个函数的返回值使用弧度值来表示的,所以我们得在CSS中转换成角的度数,用以下公式:
弧度值*180/pi = 角度值
var $poster = $('.poster'); var $shine = $('.shine'); var $layer = $('p[class *= "layer-"]'); $poster.data("offset",15); $(window).on('mousemove', function(e) { var w=e.currentTarget.innerWidth,h=e.currentTarget.innerHeight; var offsetX = 0.5 - e.pageX / w, /* where e.pageX is our cursor X coordinate */ offsetY = 0.5 - e.pageY / h, offsetPoster = $poster.data('offset'), /* custom value for animation depth */ transformPoster = 'translateY(' + -offsetX * offsetPoster + 'px) rotateX(' + (-offsetY * offsetPoster) + 'deg) rotateY(' + (offsetX * (offsetPoster * 2)) + 'deg)'; dy = e.pageY - h / 2, dx = e.pageX - w / 2, theta = Math.atan2(dy,dx), /* get angle in radians */ angle = theta * 180 / Math.PI; /* convert rad in degrees */ /* apply transform to $poster */ $poster.css('transform', transformPoster); /* parallax foreach layer */ /* loop thought each layer */ /* get custom parallax value */ /* apply transform */ $layer.each(function() { var $this = $(this); var offsetLayer = $this.data('offset') || 0; /* get custom parallax value, if element docent have data-offset, then its 0 */ var transformLayer = 'translateX(' + offsetX * offsetLayer + 'px) translateY(' + offsetY * offsetLayer + 'px)'; $this.css('transform', transformLayer); }); });
你会发现角度值的范围是从-180到180度,以下代码修复这个问题让角度值从0-360度:
if (angle < 0) { angle = angle + 360; }
现在角度有了,就可以随着光标的移动来动态改变渐变颜色的角度值:
$shine.css('background', 'linear-gradient(' + (angle - 90) + 'deg, rgba(255,255,255,' + e.pageY / h + ') 0%,rgba(255,255,255,0) 80%)');
以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!
相关推荐:
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

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

Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Article chaud

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)

Explication détaillée de la méthode de référence jQuery : Guide de démarrage rapide jQuery est une bibliothèque JavaScript populaire largement utilisée dans le développement de sites Web. Elle simplifie la programmation JavaScript et fournit aux développeurs des fonctions et fonctionnalités riches. Cet article présentera en détail la méthode de référence de jQuery et fournira des exemples de code spécifiques pour aider les lecteurs à démarrer rapidement. Présentation de jQuery Tout d'abord, nous devons introduire la bibliothèque jQuery dans le fichier HTML. Il peut être introduit via un lien CDN ou téléchargé

Comment utiliser la méthode de requête PUT dans jQuery ? Dans jQuery, la méthode d'envoi d'une requête PUT est similaire à l'envoi d'autres types de requêtes, mais vous devez faire attention à certains détails et paramètres. Les requêtes PUT sont généralement utilisées pour mettre à jour des ressources, comme la mise à jour de données dans une base de données ou la mise à jour de fichiers sur le serveur. Ce qui suit est un exemple de code spécifique utilisant la méthode de requête PUT dans jQuery. Tout d'abord, assurez-vous d'inclure le fichier de la bibliothèque jQuery, puis vous pourrez envoyer une requête PUT via : $.ajax({u

jQuery est une bibliothèque JavaScript rapide, petite et riche en fonctionnalités, largement utilisée dans le développement front-end. Depuis sa sortie en 2006, jQuery est devenu l'un des outils de choix pour de nombreux développeurs, mais dans les applications pratiques, il présente également certains avantages et inconvénients. Cet article analysera en profondeur les avantages et les inconvénients de jQuery et l'illustrera avec des exemples de code spécifiques. Avantages : 1. Syntaxe concise La conception syntaxique de jQuery est concise et claire, ce qui peut grandement améliorer la lisibilité et l'efficacité d'écriture du code. Par exemple,

Comment supprimer l'attribut height d'un élément avec jQuery ? Dans le développement front-end, nous rencontrons souvent le besoin de manipuler les attributs de hauteur des éléments. Parfois, nous pouvons avoir besoin de modifier dynamiquement la hauteur d'un élément, et parfois nous devons supprimer l'attribut height d'un élément. Cet article explique comment utiliser jQuery pour supprimer l'attribut height d'un élément et fournit des exemples de code spécifiques. Avant d'utiliser jQuery pour exploiter l'attribut height, nous devons d'abord comprendre l'attribut height en CSS. L'attribut height est utilisé pour définir la hauteur d'un élément

Titre : jQuery Astuces : Modifier rapidement le texte de toutes les balises a de la page En développement web, nous avons souvent besoin de modifier et d'exploiter des éléments de la page. Lorsque vous utilisez jQuery, vous devez parfois modifier le contenu textuel de toutes les balises de la page en même temps, ce qui peut économiser du temps et de l'énergie. Ce qui suit explique comment utiliser jQuery pour modifier rapidement le texte de toutes les balises a de la page et donne des exemples de code spécifiques. Tout d'abord, nous devons introduire le fichier de la bibliothèque jQuery et nous assurer que le code suivant est introduit dans la page : <

Titre : utilisez jQuery pour modifier le contenu textuel de toutes les balises. jQuery est une bibliothèque JavaScript populaire largement utilisée pour gérer les opérations DOM. En développement web, nous rencontrons souvent le besoin de modifier le contenu textuel de la balise de lien (une balise) sur la page. Cet article expliquera comment utiliser jQuery pour atteindre cet objectif et fournira des exemples de code spécifiques. Tout d’abord, nous devons introduire la bibliothèque jQuery dans la page. Ajoutez le code suivant dans le fichier HTML :

Comment savoir si un élément jQuery possède un attribut spécifique ? Lorsque vous utilisez jQuery pour exploiter des éléments DOM, vous rencontrez souvent des situations dans lesquelles vous devez déterminer si un élément possède un attribut spécifique. Dans ce cas, nous pouvons facilement implémenter cette fonction à l'aide des méthodes fournies par jQuery. Ce qui suit présentera deux méthodes couramment utilisées pour déterminer si un élément jQuery possède des attributs spécifiques et joindra des exemples de code spécifiques. Méthode 1 : utilisez la méthode attr() et l'opérateur typeof // pour déterminer si l'élément a un attribut spécifique

jQuery est une bibliothèque JavaScript populaire largement utilisée pour gérer la manipulation DOM et la gestion des événements dans les pages Web. Dans jQuery, la méthode eq() est utilisée pour sélectionner des éléments à une position d'index spécifiée. Les scénarios d'utilisation et d'application spécifiques sont les suivants. Dans jQuery, la méthode eq() sélectionne l'élément à une position d'index spécifiée. Les positions d'index commencent à compter à partir de 0, c'est-à-dire que l'index du premier élément est 0, l'index du deuxième élément est 1, et ainsi de suite. La syntaxe de la méthode eq() est la suivante : $("s
