Créer un effet de fond de parallaxe contrôlé par la souris

Sep 15, 2025

Comment

[DIX] [DIX] [DIX] [dix]

(Crédit d'image: Renaud Rohlinger)

[DIX]

LES SITES AVEC Défilement de Parallaxe Continent D'Être Populaires Pour une Raison: ILS Créent Une Expérée de navigation Agréable et Engagéante pour l'utilisateur. NOUS Avons Déjà Examiné Le Meilleur Magnifique Défilement de parallaxe Des sites Web pour vous inspirer, Maisque QUE QUE FAITES-VOUS SI VOULEZ EN FACEE L'UN DES VÔTRES?

[DIX]

Héuqueur, Le Développeur Français Créatif Rohlinger Est-ce que Vous Vous Montrer les Cordes Pour Cordères, pour Cordes, Pouve Parallaxe Que vous Vous Pouvez Contrôler avec Vélon Souris. Découvrirez les Résultats Étonans sur site fils , puis AppRenzz de Rohlinger Lui-Même Ci-Dessous sur la Manière Ne vous vulez pas Pouvez Reproduire L'Effet Dans Votre Prochain Projet.

VOUS POUVEZ AUSSI ESSAYER L'UN D'ENTRE EUX Constructeurs de sites web ET PENDANT QUE VOUS ENVISAGEZ DE VOS PERFORMANCES DE VÉRIFIER SITE, VÉRIFiez votre Hébergement Web LE SERVICE TRAVAILLE POUR VOUS. OBTENU UN SITE DE LOURD MÉDIA? SAUVEGARER AVEC FIBLE stockage en ligne .

01. Définir le Cadre de document HTML

La Première Étape consistait à Définir le Cadre du document HTML. Ceci est composé du conteneur HTML Qui Décrit Le Document Comme Ayant des sections pour la Tête et Le Corps. BIEN QUE LA SECTION DE TÊTE RELIE LES FICHIERS JavaScript et CSS externes, LA SECTION DU CORPS EST UTILISÉE POUR DÉFINIR LES ÉLEMENTS DE CONTENU DE LA PAGE À L'ÉTAPE 2.

 & lt ;! DOCTYPE HTML & GT;
& lt; HTML & GT;
& lt; têté & gt;
& lt; Titre & GT; Fond de parallaxe & lt; / Titre & GT;
& lt; lien rel = "stylesheet" type = "text / css"
href = "styles.css" / & gt;
& lt; script src = "code.js" & gt; & lt; / script & gt;
& lt; / têté & gt;
& lt; Corps & GT;
   *** Étape 2 ICI
& lt; / corps & gt;
& lt; / html & gt;

02. Identifiant Le CONTENU HTML

La Teneur Corporelle consistait en un texte d'affichage et de l'ONU CONNUENEUR DIV EN UTILISANT LE Données-Parallaxe attribut. C'EST CET ÉLEMENT DE CONNUENEUR QUI SERA UTILISÉ POUR L'Arrière-Plan de la Parallaxe, Chacun de Ses Élénements d'Enfant Étant Styés AVEC Les Images de Fond Requises. Dans l'exemple, Le Conteneur Comporte Trois Couches d'Image à Créer à Partir des Éléments de Div.

[DIX]

 & lt; H1 & GT; Bonjour! & Lt; / h1 & gt;
& lt; 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; / div et gt;

03. Créer Nations Conteneur CSS Parallaxe

Créer Un nouveau Nouveau Fichier appelé styles.css . LA PREMIÈRE ÉTAPE DE CE FICHIER DE LA COULEUR DE CONTENU PAR DEÉFAUT À BLANC ET LES PARAMÈRES DU CONNUNEUR DE FOND DE PARALLAXE. Le positionnement du positionnement EST Appliqué sur le conteneur de Parallaxe Pour Permettre Qu'il Refete Dans La Même Position que le Contenu Des Défilements sur Elle. UNE COULEUR PAR DEÉFAUT EST APPLIQUÉE COMPE COULEUR DE PAGE, TANDIS QU'UN INDEX Z Négatif Permet de Permet au Contenu de la page.

 HTML, Corps {
   Couleur: #fff;
}
[Data-Parallaxe] {
   Position: fixe;
   grandeur: 100vw;
   Hauteeur: 100vh;
   TOP: 0;
   à Gauche: 0;
   z-index: -1;
   Couleur de Fond: # 000;
}

[DIX]

04. Configureur Les Couches CSS Parallaxe

Chacune des Couches d'Image Est Définie Versez Utiliseur ONU Positionnement Absolu Absolue à la Fenêtre du Navigureur. L'IMAGE DE PARALLAXE DANS CET EXEMPE SERA BASÉE SUR UN MODÈLE DE TAILLE SPÉCIFIQUE QUI EST DÉFINI sur la Répétition. VOUS POUVEZ CHOISIR DE RÉPÉTER L'IMAGE UNIQUENT À L'AIDE DE RÉPÉTITION-Y OU HORIZONTALEMENT À L'AIDE DE RÉPÉTITION-X.

 [Data-Parallaxe]& Gt; * {
   Position: Absolu;
   grandeur: 100vw;
   Hauteeur: 100vh;
   Contexte-Répéter: Répéter;
   Taille de l'Arrière-Plan: 20vw 20vw;
}

05. UtiliseZ des Couches de Fond CSS

Bien que Chacune des Couches d'Image Paramètres de Position et de Taille Définis à l'Étape 4, Chaque Couche Utilisez UNE image unique. Le Sélecteur Nth-Enfant est Utilisé pour Référencer Chaque Élément Individuel Dans Le Conteneur de Parallaxe. L'attribut de fond-image est Utilisé pour Dessiner Deux Lignes Qui Crée Nations Unies de grille Lorsque Est Carrelé. Les Couches Inférieures Utilisents des Couleurs Plus Sombres Versez Aider à FAnnir UNE Perception de la Profondeur.

 [Data-Parallaxe] & GT; *: Nth-Enfant (1) {
   Image de fond:
      Gradient Linéléaire (à Droite, # 333 1Px,
  1px transparent),
      Gradient LINÉAIRE (EN BAS, # 333 1PX,
  transparent 1px);
}
[Data-Parallaxe] & GT; *: Nth-Enfant (2) {
   Image de fond:
      Gradient Linéléaire (à Droite, # 777 1Px,
1px transparent),
      Gradient LINÉAIRE (EN BAS, # 777 1PX,
transparent 1px);
}
[Data-Parallaxe] & GT; *: Nth-Enfant (3) {
   image de fond
      Gradient Linéléaire (à Droite, #fff,
1px transparent),
      Gradient LINÉAIRE (EN BAS, #FFF 1PX,
 transparent 1px);
}

06. Effecteur L'initiation de Couche JavaScript

Créer Un nouveau Nouveau Fichier appelé code.js . Cette Étape Fonction Le Conteneur de Parallaxe et Initierie Chacidum de Ses Couches d'Image Avecle Le Index de Données Attributant Qui Sera Utilisé à l'Étape 7. Cela DOIT Être Effecué à Partir d'une Fonction Connecte de la Fenêtre du Navigate, de Sorte Que Le code N'est Exécuté que Lorsque La Teneur Corporelle de la page EST PRÊTE.

 Fenêtre.addeventListener ("Charge", Fonction () {
   Var Conteneur = document.
QuerySelector ("[Data-Parallaxe]");
   Var enfin = conteneur.children;
   verser (var n = 0; n & lt; enfantnodes.length; n ++) {
      EnfantsNodes [N] .SettattattattatTtribuer ("Index de Données", N + 1);
   }
   **** Étape 7 ICI
});

07. Calculateur Le Mouvement de la Souris JavaScript

L'EFFET REPOSE SUR LE DÉLACEMENT DES IMAGES ASSOCIEES À CHAQUE COUCHE DE PARALLEXE EN RÉPONSE AU MOUVÉE DE LA SOURIS. LE CONNUNEUR DE PARALLAXE IDENTIFIÉ À L'ÉTAPE 6 A UN ONU Souris L'AUDITEUR D'ÉVÉNEMENTS CI-JOIME, QUI DÉCLENCHE UNE FONCTION VERRE REPUISSIONNER DES IMAGES DE FOND DES COUCHES DE PARALLAXE CHAQUE FOIS QUIL Y A MOUVEMENT DE SOURIS. Chaque Couche A ONU Calcul de Mouvement Basé sur Le Numéro d'indice Appliqué à l'Étape 6.

 conteneur.addeventlistener ("Mousemove",
 Fonction (e) {
   var elms = ceci.children;
   verser (var c = 0; c & lt; elms.length; c ++) {
      var motion = parseint (elms [c].
getattribute ("Index de Données")) / 10;
      var x = (((e.clientx) * Mouvement) + "px";
      var y = (((e.cienty) * mouvement) + "px"; elms [c] .style.backgroundPosition = x +
"" + y;
   }
});

Article CET A Été Publié à L'Origine Dans Creative Web Design Magazine Concepteur web . Achetez le Numéro 290 Maintenant.

Articles Liènes:

10 Meilleurs Cadres CSS EN 2019
Commentaire Ajouter une animation à SVG AVEC CSS
52 OUTILS DE CONCEPTION WEB POUR VOUS ARTIDE ARIDER À Travailler Plus intelligent EN 2019

[DIX] [DIX]

[DIX]

Créer un effet de fond de parallaxe contrôlé par la souris

01. Définir le Cadre de document HTML

02. Identifiant Le CONTENU HTML

03. Créer Nations Conteneur CSS Parallaxe

04. Configureur Les Couches CSS Parallaxe

05. UtiliseZ des Couches de Fond CSS

06. Effecteur L'initiation de Couche JavaScript

07. Calculateur Le Mouvement de la Souris JavaScript

Comment - Most Popular Articles

Affinity Designer: Comment utiliser l'outil de stylo

Comment créer une application de tableau de bord avec réaction

Peindre une scène de conte de fées classique avec procréate

4 étapes faciles pour améliorer votre rendu

Construire un site de commerce électronique à partir de zéro

Dessine un portrait de crayon d'un chien

Comment concevoir la couverture de livre parfaite

Comment créer un Geofilter Snapchat dans Photoshop

Catégories