One place for hosting & domains

      défilement

      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

      Comment mettre en œuvre le défilement fluide dans React


      Introduction

      On parle de défilement fluide lorsque, au lieu de cliquer sur un bouton et d’être instantanément dirigé vers une autre partie de la même page, l’utilisateur y est dirigé par une animation de défilement. C’est l’une de ces subtiles fonctionnalités de l’interface utilisateur sur un site qui fait une différence esthétique.

      Dans cet article, vous allez utiliser le paquet react-scroll sur npm pour mettre en place un défilement fluide.

      Conditions préalables

      Vous aurez besoin des éléments suivants pour compléter ce tutoriel :

      Ce tutoriel a été vérifié avec Node v13.14.0, npm v6.14.5, react v16.13.1, et react-scroll v.1.7.16.

      Vous allez créer une application simple dans ce tutoriel, mais si vous souhaitez avoir un aperçu rapide du fonctionnement de react-scroll, n’hésitez pas à vous référer à ces étapes condensées :

      Installez react-scroll:

      npm i -S react-scroll
      

      Importez le paquet react-scroll :

      import { Link, animateScroll as scroll } from "react-scroll";
      

      Ajoutez le composant de lien. Le composant <Link /> pointera vers une certaine zone de votre application :

      <Link to="section1">
      

      Plongeons plus profondément et construisons une petite application React avec un défilement fluide.

      Étape 1 – Installer et exécuter une application React

      Pour plus de commodité, ce tutoriel utilisera un projet de démarrage React (en utilisant Create React App 2.0) qui comporte une barre de navigation (ou navbar) dans la partie supérieure, ainsi que cinq sections de contenu différentes.

      Les liens dans la barre de navigation ne sont pour l’instant que des balises d’ancrage, mais vous les mettrez bientôt à jour pour permettre un défilement fluide.

      Vous pouvez trouver le projet sous React with smooth scrolling. Veuillez noter que ce lien est pour la branche start. La branche master comprend toutes les modifications terminées.

      Capture d'écran de GitHub Repo

      Pour cloner le projet, vous pouvez utiliser la commande suivante :

      git clone https://github.com/do-community/React-With-Smooth-Scrolling.git
      

      Si vous vous intéressez au répertoire src/components vous trouverez un répertoire Navbar.js qui contient le fichier <Navbar> avec les nav-items correspondant à cinq <Section>s différentes.

      src/Components/Navbar.js

      import React, { Component } from "react";
      import logo from "../logo.svg";
      
      export default class Navbar extends Component {
        render() {
          return (
            <nav className="nav" id="navbar">
              <div className="nav-content">
                <img
                  src={logo}
                  className="nav-logo"
                  alt="Logo."
                  onClick={this.scrollToTop}
                />
                <ul className="nav-items">
                  <li className="nav-item">Section 1</li>
                  <li className="nav-item">Section 2</li>
                  <li className="nav-item">Section 3</li>
                  <li className="nav-item">Section 4</li>
                  <li className="nav-item">Section 5</li>
                </ul>
              </div>
            </nav>
          );
        }
      }
      

      Ensuite, si vous ouvrez les App.js dans le répertoire src, vous verrez où se trouve le <Navbar> avec les cinq <Section>s”

      src/Components/App.js

      import React, { Component } from "react";
      import logo from "./logo.svg";
      import "./App.css";
      import Navbar from "./Components/Navbar";
      import Section from "./Components/Section";
      import dummyText from "./DummyText";
      class App extends Component {
        render() {
          return (
            <div className="App">
              <Navbar />
              <Section
                title="Section 1"
                subtitle={dummyText}
                dark={true}
                id="section1"
              />
              <Section
                title="Section 2"
                subtitle={dummyText}
                dark={false}
                id="section2"
              />
              <Section
                title="Section 3"
                subtitle={dummyText}
                dark={true}
                id="section3"
              />
              <Section
                title="Section 4"
                subtitle={dummyText}
                dark={false}
                id="section4"
              />
              <Section
                title="Section 5"
                subtitle={dummyText}
                dark={true}
                id="section5"
              />
            </div>
          );
        }
      }
      
      export default App;
      

      Chaque <Section> prend en compte un titre et sous-titre.

      Comme ce projet utilise du texte factice dans les différentes sections, pour réduire la répétition du code, ce texte a été ajouté à un fichier DummyText.js importé et transmis dans chaque composant <Section>.

      Pour exécuter l’application, vous pouvez utiliser les commandes suivantes.

      • cd React-With-Smooth-Scrolling
      • npm install
      • npm start

      Cela lancera l’application en mode développement et la rafraîchira automatiquement lorsque vous enregistrerez vos fichiers. Vous pouvez le consulter dans le navigateur à l’adresse suivante localhost:3000.

      Capture d'écran de l'application dans le navigateur

      Il est maintenant temps d’installer react-scroll et ajouter cette fonctionnalité. Vous pouvez trouver des informations pour le paquet sur npm.

      react-scroll package on npm

      Pour installer le paquet, exécutez la commande suivante :

      Ensuite, ouvrez le fichier Navbar.js et ajoutez une importation pour deux importations nommées, Link et animateScroll.

      src/Components/Navbar.js

      import { Link, animateScroll as scroll } from "react-scroll";
      

      Vous remarquerez que j’ai créé un alias animatedScroll à faire défiler pour faciliter l’utilisation.

      Une fois toutes vos importations définies, vous pouvez maintenant mettre à jour vos articles de navigation pour utiliser le composant <Link>. Ce composant prend plusieurs propriétés. Vous pouvez tout lire sur elles sur la page de documentation.

      Pour l’instant, il convient d’accorder une attention particulière à activeClass, to, spy, smooth, offset et duration.

      • activeClass – La classe appliquée lorsque l’élément est atteint.
      • a – La cible jusqu’où défiler.
      • spy – Pour que Link soit sélectionné lorsque scroll est à la position de sa cible.
      • smooth – Pour animer le défilement.
      • offset – Pour faire défiler des px supplémentaires (comme du padding).
      • duration – L’heure de l’animation de défilement Il peut s’agir d’un numéro ou d’une fonction.

      La propriété to est la partie la plus importante car elle indique à la composante quel élément faire défiler. Dans ce cas, il s’agira de chacune de vos <Section>s.

      Avec la propriété offset, vous pouvez définir une quantité supplémentaire de défilement à effectuer pour atteindre chaque <Section>.

      Voici un exemple des propriétés que vous utiliserez pour chaque composant <Link>. La seule différence entre elles sera la propriété to, car elles pointent chacune vers une <Section> :

      <Link
          activeClass="active"
          to="section1"
          spy={true}
          smooth={true}
          offset={-70}
          duration={500}
      >
      

      Vous devrez mettre à jour chacun des nav-items en conséquence. Avec ces ajouts, vous devriez pouvoir retourner à votre navigateur (votre application devrait déjà avoir redémarré automatiquement) et voir un défilement fluide en action.

      Étape 3 – Styler des liens actifs

      La propriété activeClass vous permet de définir une classe à appliquer au composant <Link> lorsque son to est actif. Un <Link> est considéré comme actif si son élément to est visible près du haut de la page. Cela peut être déclenché en cliquant sur le <Link> lui-même ou en faisant défiler l’écran jusqu’à la <Section> manuellement.

      Pour le prouver, j’ai ouvert le Chrome DevTools et j’ai inspecté le cinquième <Link> comme indiqué ci-dessous. Quand j’ai cliqué sur ce <Link> ou fait défiler manuellement au bas de la page, j’ai remarqué que la classe active est, en fait, appliquée.

      Vue du navigateur de l'app React

      Pour en profiter, vous pouvez créer une classe active et ajouter un soulignement au lien. Vous pouvez ajouter ce morceau de CSS dans le fichier App.css dans le répertoire src :

      src/App.css

      .nav-item > .active {
          border-bottom: 1px solid #333;
      }
      

      Maintenant, si vous retournez à votre navigateur et faites défiler un peu, vous devriez voir que le <Link> approprié est souligné.

      Mise à jour de la vue du navigateur de l'application React

      Étape 4 – Ajouter des fonctions supplémentaires

      Pour une dernière partie du contenu, ce paquet fournit également quelques fonctions qui peuvent être appelées directement comme scrollToTop, scrollToBottometc. ainsi que divers événements que vous pouvez gérer.

      En référence à ces fonctions, le logo de l’application dans une barre de navigation amène généralement l’utilisateur à la page d’accueil ou au haut de la page en cours.

      Pour illustrer simplement la façon d’appeler une de ces fonctions fournies, j’ai ajouté un gestionnaire de clics à la nav-logo, afin de faire défiler l’utilisateur vers le haut de la page, comme ça :

      src/Components/Navbar.js

      scrollToTop = () => {
          scroll.scrollToTop();
      };
      

      De retour dans le navigateur, vous devriez pouvoir faire défiler la page vers le bas, cliquer sur le logo dans la barre de navigation et être ramené au haut de la page.

      Conclusion

      Le défilement fluide est l’une des caractéristiques qui peut ajouter beaucoup de valeur esthétique à votre application. Le paquetreact-scroll vous permet de tirer parti de cette fonctionnalité sans frais généraux importants.

      Dans ce tutoriel, vous avez ajouté un défilement fluide à une application et expérimenté différents paramètres. Si vous êtes curieux, passez un peu de temps à explorer les autres fonctions et événements que ce paquet vous propose.



      Source link