One place for hosting & domains

      Comment créer un effet parallaxe avec défilement en pure CSS


      Introduction

      La technologie CSS moderne constitue un outil puissant que vous pouvez utiliser pour créer de nombreuses fonctionnalités d’interface utilisateur (UI) avancées. Auparavant, ces caractéristiques reposaient sur des bibliothèques JavaScript.

      Au cours de ce guide, vous allez configurer quelques lignes de CSS pour créer un effet scrolling parallax sur une page Web. Vous utiliserez des images de placekitten.com comme images de balise d’arrière-plan.

      Une fois que vous aurez fini ce tutoriel, vous aurez une page Web avec un effet parallaxe avec défilement en pure CSS.

      Avertissement : les propriétés expérimentales de CSS utilisées dans cet article ne fonctionnent pas sur tous les navigateurs. Ce projet a été testé et fonctionne sur Chrome. Cette technique ne fonctionne pas correctement avec Firefox, Safari et iOS, en raison de certaines optimisations de ces navigateurs.

      Étape 1 — Création d’un nouveau projet

      Pour cette étape, utilisez la ligne de commande afin de configurer un nouveau dossier de projet et des fichiers. Pour commencer, ouvrez votre terminal et créez un nouveau dossier de projet.

      Saisissez la commande suivante pour créer le dossier de projet :

      Pour cet exercice, appelez le dossier css-parallax. Maintenant, passez dans le dossier css-parallax :

      Ensuite, créez un fichier index.html dans votre dossier css-parallax avec la commande nano suivante :

      Placez l'intégralité du HTML du projet dans ce fichier.

      Au cours de la prochaine étape, vous allez commencer à créer la structure de la page Web.

      Étape 2 — Configuration de la structure de l'application

      Au cours de cette étape, vous allez ajouter le HTML dont vous avez besoin pour créer la structure du projet.

      Ajoutez le code suivant dans votre fichier index.html :

      css-parallax/index.html

      
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
          <title>CSS Scrolling Parallax</title>
        </head>
        <body></body>
      </html>
      

      Il s'agit de la structure de base de plupart des pages Web qui utilisent HTML.

      Ajoutez le code suivant dans la balise <body> :

      css-parallax/index.html

      
      <body>
      ...
         <main>
            <section class="section parallax bg1">
               <h1>Cute Kitten</h1>
            </section>
            <section class="section static">
               <h1>Boring</h1>
            </section>
            <section class="section parallax bg2">
               <h1>Fluffy Kitten</h1>
            </section>
         </main>
      ...
      </body>
      
      

      Ce code crée trois sections différentes. Deux auront une image en arrière-plan et l'autre aura un arrière-plan statique.

      Au cours des étapes suivantes, vous allez ajouter les styles de chaque section en utilisant les catégories que vous avez ajoutées dans le HTML.

      Étape 3 — Création d'un fichier CSS et ajout du CSS initial

      Au cours de cette étape, vous allez créer un fichier CSS. Ensuite, vous allez ajouter le CSS initial dont vous avez besoin pour formater le site Web et créer l'effet de parallaxe.

      Tout d'abors, créez un fichier styles.css dans votre dossier css-parallax avec la commande nano suivante :

      C'est là que vous allez mettre tout le CSS dont vous avez besoin pour créer l'effet parallaxe avec défilement.

      Ensuite, commencez par la catégorie .wrapper. Ajoutez le code suivant dans votre fichier styles.css :

      css-parallax/styles.css

      .wrapper {
        height: 100vh;
        overflow-x: hidden;
        overflow-y: auto;
        perspective: 2px;
      }
      

      La catégorie .wrapper configure les propriétés de perspective et de défilement sur toute la page.

      Pour que l'effet fonctionne, la hauteur de l'habillage doit être configurée sur une valeur fixe. Vous pouvez utiliser l'unité de visualisation vh configurée sur 100 pour obtenir la pleine hauteur de visualisation à l'écran.

      Lorsque vous dimensionnez les images, une barre de défilement horizontale apparaîtra à l'écran. Donc, vous pouvez la désactiver en ajoutant overflow-x: hidden;. La propriété perspective simule la distance de l'unité de visualisation aux pseudo-éléments que vous allez créer et continuer à transformer dans le CSS.

      Au cours de l'étape suivante, vous allez ajouter plus de CSS pour formater votre page Web.

      Étape 4 — Ajout des styles pour la catégorie .section

      Au cours de cette étape, vous allez ajouter des styles à la catégorie .section.

      À l'intérieur de votre fichier styles.css, ajoutez le code suivant en dessous de la catégorie de l'habillage :

      css-parallax/styles.css

      
      .wrapper {
        height: 100vh;
        overflow-x: hidden;
        perspective: 2px;
      }
      .section { 
        position: relative;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        text-shadow: 0 0 5px #000;
      }
      

      La catégorie .section définit les propriétés de taille, d'affichage et de texte des principales sections.

      Configurez la position sur relative pour que l'enfant .parallax::after puisse être exactement positionné par rapport à l'élément parent .section.

      Chaque section dispose d'une view-height(vh) de 100 pour prendre en charge la pleine hauteur de l'unité de visualisation. Vous pouvez modifier et configurer cette valeur comme bon vous semble pour chaque section.

      Enfin, les autres propriétés de CSS permettent de formater et d'ajouter un style au texte dans chaque section. Elles vous permettent de positionner le texte au centre de chaque section et d'ajouter une couleur : white.

      Ensuite, vous allez ajouter un pseudo-élément et le formater pour créer l'effet parallaxe sur deux des sections de votre HTML.

      Étape 5 — Ajout de styles pour la catégorie .parallax

      Au cours de cette étape, vous allez ajouter des styles à la catégorie .parallax.

      Tout d'abord, vous allez ajouter un pseudo-élément dans la catégorie .parallax à formater.

      Remarque : vous pouvez consulter les docs web de MDN pour en savoir plus sur les pseudo-éléments de CSS.

      Ajoutez le code suivant sous la catégorie .section :

      css-parallax/styles.css

      ...
      
      .section {
        position: relative;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        text-shadow: 0 0 5px #000;
      }
      
      .parallax::after {
        content: " ";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        transform: translateZ(-1px) scale(1.5);
        background-size: 100%;
        z-index: -1;
      }
      ...
      

      La catégorie .parallax ajoute un pseudo-élément ::after à l'image d'arrière-plan et procède aux transformations nécessaires pour l'effet parallaxe.

      Le pseudo-élément est le dernier enfant de l'élément ayant la catégorie .parallax.

      La première moitié du code affiche et positionne le pseudo-élément. La propriété transform écarte le pseudo-élément de la caméra sur z-index, puis elle le rééchelonne pour remplir l'unité de visualisation.

      Comme le pseudo-élément se trouve plus loin, il semble se déplacer plus lentement.

      Au cours de la prochaine étape, vous allez ajouter les images de l'arrière plan et le style de l'arrière-plan statique.

      Étape 6 — Ajout des images et de l'arrière-plan pour chaque section

      Au cours de cette étape, vous allez ajouter les dernières propriétés de CSS pour intégrer les images d'arrière-plan et la couleur de fond de la section statique.

      Tout d'abord, ajoutez une couleur de fond unie à la section .static en utilisant le code suivant après la catégorie .parallax::after :

      css-parallax/styles.css

      ...
      
      .parallax::after {
        content: " ";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        transform: translateZ(-1px) scale(1.5);
        background-size: 100%;
        z-index: -1;
      }
      
      .static {
        background: red;
      }
      ...
      

      La catégorie .static ajoute un arrière-plan à la section statique qui n'a pas d'image.

      Les deux sections portant la catégorie .parallax disposent également d'une catégorie supplémentaire qui est différente pour chacune d'elles. Utilisez les classes .bg1 et .bg2 pour ajouter les images d'arrière-plan de chatons.

      Ajoutez le code suivant à la catégorie .static :

      css-parallax/styles.css

      ...
      
      .static {
        background: red;
      }
      .bg1::after {
        background-image: url('https://placekitten.com/g/900/700');
      }
      
      .bg2::after {
        background-image: url('https://placekitten.com/g/800/600');
      }
      
      ...
      

      Les catégories .bg1, .bg2 ajoutent les images d'arrière-plan correspondant à chaque section.

      Les images proviennent du site web placekitten. Il s'agit d'un service qui met à disposition des photos de chatons que vous pouvez utiliser en tant que supports de présentation.

      Maintenant que tout le code de l'effet parallaxe avec défilement est ajouté, vous pouvez le lier à votre fichier styles.css dans votre index.html.

      Étape 7 — Liaison de styles.css et ouverture de index.html dans votre navigateur

      Au cours de cette étape, vous allez lier votre fichier styles.css et ouvrir le projet dans votre navigateur pour voir l'effet parallaxe avec défilement.

      Tout d'abord, ajoutez le code suivant à la balise <head> dans le fichier index.html :

      css-parallax/index.html

       ...
      <head>
        <meta charset="UTF-8" />
        <^>
        <link rel="stylesheet" href="https://www.digitalocean.com/community/tutorials/styles.css" />
        <^>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>CSS Parallax</title>
      </head>
      
      ...
      

      Maintenant, vous pouvez ouvrir votre fichier index.html dans votre navigateur :

      GIF illustrant l'effet parallaxe avec défilement

      C'est fait, vous avez configuré une page web avec un effet de défilement qui fonctionne. Consultez ce référentiel GitHub pour voir le code complet.

      Conclusion

      Grâce à cet article, vous avez configuré un projet avec un fichier index.html et styles.css et vous disposez maintenant d'une page Web fonctionnelle. Vous y avez ajouté la structure de votre page Web et créé les styles des diverses sections du site.

      Vous pouvez éloigner les images ou l'effet parallaxe que vous utilisez pour qu'ils se déplacent plus lentement. Il vous faudra modifier la quantité de pixels sur perspective et les propriétés transform. Si vous ne souhaitez pas que l'image d'arrière-plan défile, utilisez background-attachment: fixed; au lieu de perspective/translate/scale.



      Source link

      Wie man einen Parallax Scrolling-Effekt mit Pure CSS in Chrome erstellt.


      Einführung

      Modernes CSS ist ein leistungsstarkes Werkzeug, mit dem Sie viele erweiterte Funktionen der Benutzeroberfläche (UI) erstellen können. In der Vergangenheit waren diese Funktionen auf JavaScript-Bibliotheken angewiesen.

      In diesem Leitfaden werden Sie einige CSS-Zeilen einrichten, um einen scrolling parallax -Effekt auf einer Webseite zu erzeugen. Sie werden Bilder aus placekitten.com als Platzhalter-Hintergrundbilder verwenden.

      Sobald Sie das Tutorial abgeschlossen haben, haben Sie eine Webseite mit einem reinen CSS scrolling parallax-Effekt.

      Warnung: Dieser Artikel verwendet experimentelle CSS-Eigenschaften, die nicht browserübergreifend funktionieren. Dieses Projekt wurde getestet und funktioniert auf Chrome. Diese Technik funktioniert nicht gut in Firefox, Safari und iOS aufgrund der Optimierungen einiger dieser Browser.

      Schritt 1 — Erstellen eines neuen Projekts

      In diesem Schritt verwenden Sie die Befehlszeile, um einen neuen Projektordner und -Dateien einzurichten. Öffnen Sie zunächst Ihr Terminal und erstellen Sie einen neuen Projektordner.

      Geben Sie den folgenden Befehl ein, um den Projektordner zu erstellen.

      In diesem Fall haben Sie den Ordner css-parallax bezeichnet. Wechseln Sie nun in den Ordner css-parallax:

      Erstellen Sie als Nächstes eine index.html -Datei in Ihrem Ordner css-parallax mit dem Befehl nano:

      Sie werden das gesamte HTML für das Projekt in diese Datei einfügen.

      Im nächsten Schritt beginnen Sie, die Struktur der Webseite zu erstellen.

      Schritt 2 — Einrichten der Anwendungsstruktur

      In diesem Schritt fügen Sie das HTML hinzu, das benötigt wird, um die Struktur des Projekts zu erstellen.

      In Ihrer Datei index.html fügen Sie den folgenden Code hinzu.

      css-parallax/index.html

      
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
          <title>CSS Scrolling Parallax</title>
        </head>
        <body></body>
      </html>
      

      Dies ist die grundlegende Struktur der meisten Webseiten, die HTML verwenden.

      Fügen Sie den folgenden Code in die <body> Funktion ein:

      css-parallax/index.html

      
      <body>
      ...
         <main>
            <section class="section parallax bg1">
               <h1>Cute Kitten</h1>
            </section>
            <section class="section static">
               <h1>Boring</h1>
            </section>
            <section class="section parallax bg2">
               <h1>Fluffy Kitten</h1>
            </section>
         </main>
      ...
      </body>
      
      

      Dieser Code erstellt drei verschiedene Abschnitte. Zwei werden ein Hintergrundbild haben, und einer wird ein statischer, einfacher Hintergrund sein.

      In den nächsten Schritten fügen Sie die Stile für jeden Abschnitt mit den Klassen hinzu, die Sie in HTML verwenden.

      Schritt 3 — Erstellen einer CSS-Datei und Hinzufügen von Initial-CSS

      In diesem Schritt erstellen Sie eine CSS-Datei. Dann fügen Sie die Initial-CSS hinzu, die benötigt wird, um die Website zu gestalten und den Parallax-Effekt zu erstellen.

      Erstellen Sie als Nächstes eine styles.css -Datei in Ihrem Ordner css-parallax mit dem Befehl nano:

      Hier legen Sie alle CSS an, die für den Parallaxen-Scrolling-Effekt erforderlich sind.

      Als Nächstes beginnen Sie mit der Klasse .wrapper. In Ihrer Datei styles.css fügen Sie den folgenden Code hinzu:

      css-parallax/styles.css

      .wrapper {
        height: 100vh;
        overflow-x: hidden;
        overflow-y: auto;
        perspective: 2px;
      }
      

      Die Klasse .wrapper legt die Perspektive und die Scroll-Eigenschaften für die gesamte Seite fest.

      Die Höhe des Wrappers muss auf einen festen Wert eingestellt werden, damit der Effekt funktioniert. Sie können die viewport-Einheit vh auf 100 einstellen, um die volle Höhe des Ansichtsfensters des Bildschirms zu erhalten.

      Wenn Sie die Bilder skalieren, fügen Sie dem Bildschirm eine horizontale Bildlaufleiste hinzu, so dass Sie diese deaktivieren können, indem Sie overflow-x: hidden; hinzufügen. Die perspective Eigenschaft simuliert den Abstand vom Viewport zu den Pseudo-Elementen, die Sie im CSS erstellen und weiter transformieren.

      Im nächsten Schritt fügen Sie weitere CSS hinzu, um Ihre Webseite zu gestalten.

      Schritt 4 — Hinzufügen von Stilen für die .section Klasse

      In diesem Schritt fügen Sie Stile der Klasse .section hinzu.

      In Ihrer Datei styles.css fügen Sie den folgenden Code unterhalb der wrapper-Klasse hinzu:

      css-parallax/styles.css

      
      .wrapper {
        height: 100vh;
        overflow-x: hidden;
        perspective: 2px;
      }
      .section { 
        position: relative;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        text-shadow: 0 0 5px #000;
      }
      

      Die Klasse .section definiert die Größe, Anzeige und Texteigenschaften für die Hauptabschnitte.

      Legen Sie eine Position relativ fest, damit das untergeordnete Element .parallax::after absolut bezogen auf das übergeordnete Element .section positioniert werden kann.

      Jeder Abschnitt hat eine Ansicht-Höhe(vh) von 100 ,um die volle Höhe des Ansichtsfensters einzunehmen. Dieser Wert kann geändert und für jeden Abschnitt auf die von Ihnen gewünschte Höhe eingestellt werden.

      Schließlich werden die restlichen CSS-Eigenschaften verwendet, um den Text innerhalb jedes Abschnitts zu formatieren und zu gestalten. Das positioniert den Text in der Mitte jedes Abschnitts und fügt eine Farbe Weiß hinzu.

      Als Nächstes fügen Sie ein Pseudo-Element hinzu und gestalten es so aus, dass der Parallaxen-Effekt in zwei Bereichen in Ihrem HTML erstellt wird.

      Schritt 5 — Hinzufügen von Stilen für die .parallax -Klasse

      In diesem Schritt fügen Sie Stile der .parallax -Klasse hinzu.

      Zuerst fügen Sie ein Pseudo-Element in der zu gestaltenden .parallax -Klasse hinzu.

      Anmerkung: Sie können MDN-Web-Dokumente aufrufen, um mehr über CSS zu erfahren.

      Fügen Sie den folgenden Code unterhalb der .section -Klasse hinzu:

      css-parallax/styles.css

      ...
      
      .section {
        position: relative;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        text-shadow: 0 0 5px #000;
      }
      
      .parallax::after {
        content: " ";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        transform: translateZ(-1px) scale(1.5);
        background-size: 100%;
        z-index: -1;
      }
      ...
      

      Die .parallax -Klasse fügt ein ::after -Pseudo-Element dem Hintergrundbild hinzu und liefert die für den Parallaxen-Effekt erforderlichen Transformationen.

      Das Pseudo-Element ist das untergeordnetste Element mit der Klasse des .parallax.

      Die erste Hälfte des Codes zeigt und positioniert das Pseudo-Element. Die transformierende Eigenschaft verschiebt das Pseudo-Element zurück von der Kamera auf dem z-index und skaliert es dann wieder nach oben, um das Ansichtsfenster auszufüllen.

      Da das Pseudo-Element weiter entfernt ist, scheint es sich langsamer zu bewegen.

      Im nächsten Schritt fügen Sie die Hintergrundbilder und den statischen Hintergrundstil hinzu.

      Schritt 6 — Hinzufügen der Bilder und des Hintergrunds für jeden Abschnitt

      In diesem Schritt ergänzen Sie die endgültigen CSS-Eigenschaften, um die Hintergrundbilder und die Hintergrundfarbe des statischen Abschnitts hinzuzufügen.

      Fügen Sie zunächst eine einfarbige Hintergrundfarbe dem .static Abschnitt mit dem folgenden Code nach der Klasse .parallax::after hinzu.

      css-parallax/styles.css

      ...
      
      .parallax::after {
        content: " ";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        transform: translateZ(-1px) scale(1.5);
        background-size: 100%;
        z-index: -1;
      }
      
      .static {
        background: red;
      }
      ...
      

      Die .static Klasse fügt dem statischen Abschnitt, der kein Bild hat, einen Hintergrund hinzu.

      Die beiden Abschnitte mit der .parallax -Klasse haben auch eine zusätzliche Klasse, die für jeden Bereich anders ist. Verwenden Sie die Klassen .bg1 und .bg2, um die Kätzchen-Hintergrundbilder hinzuzufügen.

      Fügen Sie den folgenden Code unterhalb der .static Klasse hinzu:

      css-parallax/styles.css

      ...
      
      .static {
        background: red;
      }
      .bg1::after {
        background-image: url('https://placekitten.com/g/900/700');
      }
      
      .bg2::after {
        background-image: url('https://placekitten.com/g/800/600');
      }
      
      ...
      

      Die .bg1, .bg2-Klassen fügen die jeweiligen Hintergrundbilder für jeden Abschnitt hinzu.

      Die Bilder sind aus der placekitten -Webseite. Es handelt sich um einen Bilderservice von Kätzchen zur Verwendung als Platzhalter.

      Nachdem nun der gesamte Code für den Parallax Scrolling-Effekt hinzugefügt wurde, können Sie Ihre Datei styles.css mit Ihrer index.html verlinken.

      Schritt 7 — Verknüpfen von styles.css und Öffnen von index.html in Ihrem Browser

      In diesem Schritt verknüpfen Sie Ihre Datei styles.css und öffnen das Projekt in Ihrem Browser, um den Parallax Scrolling-Effekt zu sehen.

      Fügen Sie zunächst den folgenden Code dem <head>-Tag in der Datei index.html hinzu.

      css-parallax/index.html

       ...
      <head>
        <meta charset="UTF-8" />
        <^>
        <link rel="stylesheet" href="https://www.digitalocean.com/community/tutorials/styles.css" />
        <^>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>CSS Parallax</title>
      </head>
      
      ...
      

      Jetzt können Sie Ihre Datei index.html in Ihrem Browser öffnen:

      Scrolling Parallax-Effekt-GIF

      Damit haben Sie eine funktionierende Webseite mit einem Scrolling-Effekt eingerichtet. Sehen Sie sich dieses GitHub-Repository an, um den vollen Code zu sehen.

      Zusammenfassung

      In diesem Artikel haben Sie ein Projekt mit einer index.html und einer Datei styles.css eingerichtet und haben nun eine funktionsfähige Webseite. Sie haben die Struktur Ihrer Webseite hinzugefügt und Stile für die verschiedenen Abschnitte auf der Seite erstellt.

      Es ist möglich, die von Ihnen verwendeten Bilder oder den Parallax-Effekt weiter weg zu legen, damit sie sich langsamer bewegen. Sie müssen die Pixelmenge in den Eigenschaften perspective und transform ändern. Wenn Sie nicht möchten, dass ein Hintergrundbild überhaupt scrollen soll, verwenden Sie background-attachment: fixed; anstelle von perspective/translate/scale.



      Source link

      Cómo crear un efecto de paralaje de desplazamiento con Pure CSS en Chrome


      Introducción

      Modern CSS es una potente herramienta que puede usar para crear diversas funciones avanzadas de interfaz de usuario (UI). En el pasado, estas funciones dependían de las bibliotecas de JavaScript.

      En esta guía, configurará algunas líneas CSS para crear un efecto de paralaje de desplazamiento en una página web. Usará imágenes de placekitten.com como imágenes de marcador de posición en segundo plano.

      Tendrá una página web con un efecto puro de paralaje de desplazamiento de CSS una vez que haya completado el tutorial.

      Advertencia: En este artículo, se utilizan propiedades experimentales de CSS que no funcionan en los distintos navegadores. Este proyecto se probó y funciona en Chrome. Esta técnica no funciona bien en Firefox, Safari e iOS por algunas de las optimizaciones de esos navegadores.

      Paso 1: Crear un nuevo proyecto

      En este paso, utilice la línea de comandos para configurar una nueva carpeta y archivos de proyecto. Para comenzar, abra su terminal y cree una nueva carpeta de proyecto.

      Escriba el siguiente comando para crear la carpeta del proyecto:

      En este caso, nombre la carpeta css-parallax. Ahora, posiciónese en la carpeta css-parallax:

      Luego, cree un archivo index.html en su carpeta css-parallax con el comando nano:

      Pondrá todo el HTML para el proyecto en este archivo.

      En el siguiente paso, comenzará a crear la estructura de la página web.

      Paso 2: Configurar la estructura de la aplicación

      En este paso, añadirá el HTML que necesita para crear la estructura del proyecto.

      Dentro de su archivo index.html, agregue el siguiente código:

      css-parallax/index.html

      
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
          <title>CSS Scrolling Parallax</title>
        </head>
        <body></body>
      </html>
      

      Esta es la estructura básica de la mayoría de las páginas web que utilizan HTML.

      Añada el siguiente código en la etiqueta <body>:

      css-parallax/index.html

      
      <body>
      ...
         <main>
            <section class="section parallax bg1">
               <h1>Cute Kitten</h1>
            </section>
            <section class="section static">
               <h1>Boring</h1>
            </section>
            <section class="section parallax bg2">
               <h1>Fluffy Kitten</h1>
            </section>
         </main>
      ...
      </body>
      
      

      Este código crea tres secciones diferentes. Dos tendrán una imagen de fondo, y una será un fondo estático y simple.

      En los siguientes pasos, añadirá los estilos para cada sección usando las clases que añadió en el HTML.

      Paso 3: Crear un archivo CSS y agregar el CSS inicial

      En este paso, creará un archivo CSS. Luego, añadirá en el CSS inicial que necesita para diseñar el sitio web y crear el efecto de paralaje.

      Primero, cree el archivo styles.css en su carpeta css-parallax con el comando nano:

      Aquí es donde pondrá todo el CSS que necesita para crear el efecto de paralaje de desplazamiento.

      Luego, comience con la clase .wrapper. Dentro de su archivo styles.css, añada el siguiente código:

      css-parallax/styles.css

      .wrapper {
        height: 100vh;
        overflow-x: hidden;
        overflow-y: auto;
        perspective: 2px;
      }
      

      La clase .wrapper establece las propiedades de perspectiva y desplazamiento para toda la página.

      La altura del wrapper debe configurarse en un valor fijo para que el efecto funcione. Puede usar la unidad del área de visualización (viewport) vh configurada a 100 para obtener la altura completa del área de visualización de la pantalla.

      Cuando escale las imágenes, se añadirá una barra de desplazamiento horizontal a la pantalla para que pueda deshabilitarla añadiendo overflow-x: hidden;. La propiedad perspective simula la distancia desde el área de visualización a los seudoelementos que creará y transformará más adelante en el CSS.

      En el siguiente paso, va a añadir más CSS para diseñar su página web.

      Paso 4: Añadir estilos a la clase .section

      En este paso, añadirá estilos a la clase .section.

      Dentro de su archivo styles.css, añada el siguiente código debajo de la clase wrapper:

      css-parallax/styles.css

      
      .wrapper {
        height: 100vh;
        overflow-x: hidden;
        perspective: 2px;
      }
      .section { 
        position: relative;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        text-shadow: 0 0 5px #000;
      }
      

      La clase .section define el tamaño, la pantalla y las propiedades de texto para las secciones principales.

      Establezca una posición de relative para que el elemento secundario, .parallax::after pueda posicionarse de manera absoluta en relación con el elemento principal .section.

      Cada sección tiene un view-height(vh) de 100 para ocupar la altura completa del área de visualización. Este valor puede modificarse y configurarse a la altura que prefiera para cada sección.

      Finalmente, las propiedades de CSS restantes se utilizan para dar formato y agregar estilo al texto dentro de cada sección. Posiciona el texto en el centro de cada sección y agrega un color blanco (white).

      El siguiente paso es añadir un seudoelemento y agregarle estilo para crear el efecto de paralaje en dos de las secciones en su HTML.

      Paso 5: Añadir estilos a la clase .parallax

      En este paso, añadirá los estilos a la clase .parallax.

      Primero, añadirá un seudoelemento en la clase .parallax a la que agregará el estilo.

      Nota: Puede visitar la documentación web de MDN para obtener más información sobre los seudoelementos de CSS.

      Añada el siguiente código debajo de la clase .section:

      css-parallax/styles.css

      ...
      
      .section {
        position: relative;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        text-shadow: 0 0 5px #000;
      }
      
      .parallax::after {
        content: " ";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        transform: translateZ(-1px) scale(1.5);
        background-size: 100%;
        z-index: -1;
      }
      ...
      

      La clase .parallax añade un seudoelemento ::after a la imagen de fondo y proporciona las transformaciones necesarias para el efecto de paralaje.

      El seudoelemento es el último elemento secundario del elemento con la clase .parallax.

      La primera mitad del código muestra y posiciona el seudoelemento. La propiedad transform mueve el seudoelemento lejos de la cámara en el z-index y, luego, lo escala de vuelta para llenar el área de visualización.

      Dado que el seudoelemento está más lejos, parece moverse más lentamente.

      En el siguiente paso, añadirá las imágenes de fondo y el estilo de fondo estático.

      Paso 6: Añadir las imágenes y el fondo para cada sección

      En este paso, añadirá las propiedades finales de CSS para añadir las imágenes y el color de fondo de la sección estática.

      Primero, añada un color sólido de fondo a la sección .static con el siguiente código después de la clase .parallax::after:

      css-parallax/styles.css

      ...
      
      .parallax::after {
        content: " ";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        transform: translateZ(-1px) scale(1.5);
        background-size: 100%;
        z-index: -1;
      }
      
      .static {
        background: red;
      }
      ...
      

      La clase .static agrega un fondo a la sección estática que no tiene ninguna imagen.

      Las dos secciones con la clase .parallax también tienen otra clase que es diferente para cada una. Utilice las clases .bg1 y .bg2 para añadir las imágenes de fondo de Kitten.

      Añada el siguiente código a la clase .static:

      css-parallax/styles.css

      ...
      
      .static {
        background: red;
      }
      .bg1::after {
        background-image: url('https://placekitten.com/g/900/700');
      }
      
      .bg2::after {
        background-image: url('https://placekitten.com/g/800/600');
      }
      
      ...
      

      Las clases .bg1, .bg2 añaden las imágenes de fondo respectivas para cada sección.

      Las imágenes son del sitio web placekitten. Es un servicio para obtener imágenes de gatitos y utilizarlas como marcadores de posición.

      Una vez que añada el código completo para el efecto de paralaje de desplazamiento, puede vincularlo al archivo styles.css en el archivo index.html.

      Paso 7: Vincular styles.css y abrir index.html en su navegador

      En este paso, vinculará el archivo styles.css y abrirá el proyecto en su navegador para ver el efecto de paralaje de desplazamiento.

      Primero, añada el siguiente código a la etiqueta <head> en el archivo index.html:

      css-parallax/index.html

       ...
      <head>
        <meta charset="UTF-8" />
        <^>
        <link rel="stylesheet" href="https://www.digitalocean.com/community/tutorials/styles.css" />
        <^>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>CSS Parallax</title>
      </head>
      
      ...
      

      Ahora, puede abrir el archivo index.html en su navegador:

      Gif animado del efecto de paralaje de desplazamiento

      Al hacer esto, habrá configurado una página web con un efecto de desplazamiento. Consulte este repositorio de GitHub para ver el código completo.

      Conclusión

      En este artículo, configuró un proyecto con un archivo index.html y styles.css, y ahora tiene una página web funcional. Modificó la estructura de su página web y creó estilos para las diversas secciones en el sitio.

      Las imágenes utilizadas o el efecto de paralaje se pueden alejar aún más para que se muevan más lentamente. Tendrá que cambiar la cantidad de píxeles en las propiedades perspective y transform. Si no desea que la imagen de fondo se desplace en absoluto, utilice background-attachment: fixed; en vez de perspective/translate/scale.



      Source link