Créer une image interactive parallaxe

Sep 16, 2025
Comment

[dix]

Défilement de parallaxe n'est plus la prudence garantie, mais il y a eu d'autres moyens d'utiliser des techniques de parallaxe pour engager vos visiteurs et améliorer votre expérience utilisateur .

Jeter un coup d'œil à Site de M. Fisk , conçu par Bmo Et vous remarquerez une sorte de parallaxe différente: son image principale de couleur vive se déplace en 3D, en réponse à vos mouvements de la souris.

  • 5 conseils pour CSS Super-Fast

C'est un effet impressionnant qui n'est pas trop difficile à mettre en œuvre; Suivez simplement ces étapes pour donner à votre site un sens de la profondeur accrocheur.

Créer votre propre site accrocheur avec le parfait hébergement Web service et Générateur de site Web outil. Et, en cours de route, enregistrez vos fichiers de conception dans le meilleur stockage en ligne .

01. Initier HTML

La première étape consiste à définir le document HTML, qui consiste en un conteneur HTML pour stocker les sections de la tête et du corps. Bien que la section principale soit principalement responsable du chargement des ressources externes CSS et JavaScript, la section du corps stockera les éléments de contenu à créer à l'étape 02. 

 & lt;! DOCTYPE HTML & GT;
& lt; html & gt;
& lt; tête & gt;
& lt; titre & gt; souris Scroll & lt; / titre & gt;
& lt; link rel = "stylesheet" type = "text / css" href = "styles.css" / & gt;
& lt; script src = "code.js" & gt; & lt; / script & gt;
& lt; / tête & gt;
& lt; corps & gt;
*** ÉTAPE 2 ICI
& lt; / corps & gt;
& lt; / html & gt;

02. Éléments de contenu

La technique permettra à tout conteneur de contenu à l'aide de l'attribut Data-Parallax pour afficher l'effet. Chaque élément enfant de premier niveau s'affichera avec la présentation de Parallaxe. Cet exemple définit trois couches enfants pour la parallaxe, mais vous pouvez ajouter plus si vous le souhaitez. Vous pouvez également ajouter du contenu à ces couches telles que le texte ou des images; PNG ou SVG avec transparence fonctionnera mieux. 

 & lt; Article Data-Parallax & GT;
  & lt; div & gt; & lt; / div et gt;
  & lt; div & gt; & lt; / div et gt;
  & lt; div & gt; & lt; / div et gt;
& lt; / article & gt;

03. Style de conteneur Parallax

Créez un nouveau fichier appelé 'styles.css'. Le premier ensemble de règles de ce fichier définit la taille par défaut du conteneur de parallaxe et son mode de position. Il est important d'utiliser un positionnement relatif de sorte que les éléments de l'enfant puissent être placés par rapport à partout où le conteneur est situé. La largeur et la hauteur sont définies pour couvrir l'écran complet pour permettre une interactivité maximale. 

 [Data-Parallaxe] {
  Position: relatif;
  largeur: 100vw;
  Hauteur: 100vh;
}

04. Enfants de parallaxe

Chacun des premiers éléments de niveau à l'intérieur du conteneur de données-parallaxe est dimensionné et positionné pour apparaître de manière centralisée. Parallèlement au positionnement relatif des parents, le pourcentage est utilisé comme unité de mesure permettant de placer le dimensionnement et le positionnement par rapport au conteneur de parallaxe. Pour cet exemple, un fond rouge transparent est utilisé pour démontrer l'effet - vous pouvez le remplacer par une image PNG ou SVG de votre choix à l'aide de @background: URL ("Votre image ici"). 

 [Data-Parallaxe] & GT; * {
  Position: absolu;
  largeur: 50%;
  Hauteur: 50%;
  à gauche: 25%;
  TOP: 25%;
  frontière: 1px solide # 000;
  Contexte: RGBA (255,0,0 ,,25)
}

05. Initier le JavaScript

Créez un nouveau fichier appelé 'code.js'. JavaScript sera utilisé pour contrôler les réponses aux interactions de la souris de l'utilisateur. Nous ne voulons pas que le JavaScript exécute n'importe lequel du code JavaScript jusqu'à ce que la page soit complètement chargée, d'où le code des étapes 06 et 07 place une fonction déclenchée par l'événement de chargement, qui s'active lorsque la fenêtre a terminé le chargement. 

 window.addeventlistener ("charger", fonction () {
  *** Étape 6 ici
});

06. Recherche de nœuds

La première activité de JavaScript à exécuter immédiatement après la page est prête à trouver toutes les couches de parallaxe. Premièrement, les conteneurs de parallaxe se trouvent, suivis de leurs enfants. Chaque enfant a un numéro d'index qui leur est appliqué sous l'attribut «Data-Index». 

 AR nœuds = document.QuerySelectorallall ("[Data-Parallaxe]");
pour (var i = 0; i & lt; nœuds.length; i ++) {
  var enfants = nœuds [i] .children;
  pour (var n = 0; n & lt; enfants.length; n ++) {
  enfants [n] .setatTtribute ("index de données", n + 2);
  }
  *** ÉTAPE 7 ICI
}

07. Auditeurs de parallaxe

La dernière étape consiste à appliquer un auditeur d'événement pour tout mouvement de souris survenant sur le conteneur de parallaxe. Toute action de ce type déclenche une fonctionnalité permettant de calculer les nouvelles positions des couches de parallaxe basées sur la position de la souris et l'attribut index de données défini à l'étape 06 - entraînant une mise à jour de chaque couche à différents pas. Le résultat de chaque calcul est appliqué aux couches via l'attribut de style. 

 NODES [I] .AddeventListener ("Mousemove", fonction (E) {
  var elms = ceci.children;
  pour (var c = 0; c & lt; elms.length; c ++) {
  var diviseur = parseint (elms [c] .getatTatribute ("index de données"));
  var startx = this.offsetwidth / 4;
  var starty = ceci.offetheight / 8;
  elms [c] .style.left = STARTX - (((((E.Screenx / diviseur) -E.clientx) / 3) + "px";
  elms [c] .style.top = Starty - ((((((eScreeny / diviseur) -E.clienty) / 3) + "px";
  }
});

Cet article a été publié à l'origine dans le numéro 272 de Creative Web Design Magazine Concepteur web . Achetez le numéro 272 ici ou Abonnez-vous à Web Designer ici .

Articles Liés:

  • Animate svg avec javascript
  • Créer des effets liquides avec webgl
  • 10 façons d'éviter les problèmes de compatibilité entre navigateurs croisés

Comment - Most Popular Articles

Comment utiliser le stockage en nuage comme créatif

Comment Sep 16, 2025

[DIX] [DIX] [DIX] [dix] (Crédit d'image: Jan Vašek de Pixabay) [DIX] Pourquoi Avez..

Typographie de la marque: un guide complet

Comment Sep 16, 2025

[DIX] [DIX] [DIX] [dix] Pentagamme A Créé une police de Caractères sur Mesure Pour le Théâtre Public ..

Comment mettre en œuvre des modes lumineux ou sombres dans CSS

Comment Sep 16, 2025

[DIX] [DIX] [DIX] [dix] [DIX] LA SPÉCIFICATION CSS Évolue Jamais. Le Processus de Mise en Œuvre de Nou..

Commencez avec Babel 7

Comment Sep 16, 2025

[DIX] [DIX] [DIX] [dix] [DIX] JavaScript est unique en raison de la grandeur de l'Écosystéme. BIEN QUE ..

Peinture d'eau ondulant dans les huiles

Comment Sep 16, 2025

Lorsque vous peignez de l'eau ondulante avec quelque chose, vous prenez la tâche de peindre une réflexion perturbée. Cela peut être difficile à imaginer, alors j'aime souvent faire ma pr..

Préparez une carte pour la peinture en 3 étapes faciles

Comment Sep 16, 2025

[dix] [dix] [dix] [dix] Je vais partager le plus rapide technique de peinture ..

Comment créer des caractères de bande dessinée à fourrure

Comment Sep 16, 2025

Page 1 sur 2: Page 1 [dix] Page 1 [dix] Page 2 Conception de personnages est un art. Swiff est l'his..

Comment se déplacer entre Daz Studio et Zbrush

Comment Sep 16, 2025

[dix] [dix] [dix] [dix] Pour les nouveaux arrivants de Zbrush , l'inte..

Catégories