Comment concevoir une horloge animée avec les effets de défilement de Divi
Publié: 2020-07-20Le web regorge de sites qui nécessitent des accents de conception liés au temps (optimisation de la vitesse, événements à venir, etc.). Dans la plupart des cas, une icône d'horloge ou un graphique peut très bien fonctionner. Mais, créer une conception d'horloge animée donnera certainement un "tour" unique à la conception de votre site Web.
Avec toutes les options de conception intégrées disponibles dans Divi, nous pouvons créer une conception d'horloge animée impressionnante à partir de zéro. Dans ce tutoriel, nous allons créer une horloge animée qui fera tourner les aiguilles de l'horloge lorsque l'utilisateur fait défiler la page.
Commençons!
Aperçu
Voici un aperçu rapide de la conception que nous allons construire dans ce tutoriel.
Téléchargez GRATUITEMENT la mise en page de l'horloge animée
Pour mettre la main sur les designs de ce tutoriel, vous devrez d'abord le télécharger en utilisant le bouton ci-dessous. Pour accéder au téléchargement, vous devrez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez chaque lundi encore plus de bienfaits Divi et un pack Divi Layout gratuit ! Si vous êtes déjà sur la liste, entrez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger. Vous ne serez pas « réinscrit » ni ne recevrez d'e-mails supplémentaires.
Télécharger gratuitement
Rejoignez la newsletter Divi et nous vous enverrons par e-mail une copie du pack ultime de mise en page de la page de destination Divi, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-le et vous serez un maître Divi en un rien de temps. Si vous êtes déjà abonné, saisissez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger pour accéder au pack de mise en page.
Vous vous êtes enregistré avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder aux packs de mise en page Divi hebdomadaires gratuits !
Pour importer la mise en page de la section dans votre bibliothèque Divi, accédez à la bibliothèque Divi.
Cliquez sur le bouton Importer.
Dans la fenêtre contextuelle de portabilité, sélectionnez l'onglet d'importation et choisissez le fichier à télécharger depuis votre ordinateur.
Cliquez ensuite sur le bouton importer.
Une fois cela fait, la disposition des sections sera disponible dans le Divi Builder.
Passons au tutoriel, voulez-vous ?
Ce dont vous avez besoin pour commencer
Pour commencer, vous devrez effectuer les opérations suivantes :
- Si vous ne l'avez pas encore fait, installez et activez le thème Divi.
- Créez une nouvelle page dans WordPress et utilisez le Divi Builder pour éditer la page sur le front-end (constructeur visuel).
- Choisissez l'option « Construire à partir de zéro ».
Après cela, vous aurez une toile vierge pour commencer à concevoir dans Divi.
Partie 1 : Concevoir le cadran de l'horloge
Pour commencer, ajoutez une ligne à une colonne à la section normale.
Paramètres de ligne
Avant d'ajouter des modules, ouvrez les paramètres de ligne et mettez à jour les éléments suivants :
- Couleur d'arrière-plan : #003a5c
Sous l'onglet Conception, mettez à jour les éléments suivants :
- Largeur de gouttière : 1
- Largeur: 50vw
- Largeur maximale : 500 px
- Hauteur: 50vw
- Hauteur maximale : 500 px
- Coins arrondis : 50 %
- Largeur de la bordure : 15 px
- Couleur de la bordure : #ffffff
- Box Shadow : voir capture d'écran
- Position verticale de l'ombre de la boîte : 0px
- Force du flou d'ombre de la boîte: 68px
- Couleur de l'ombre : rgba(0,0,0,0.22)
Sous l'onglet Avancé, mettez à jour les options de visibilité comme suit :
- Débordement horizontal : masqué
- Débordement vertical : caché
Partie 2 : Ajout des marqueurs d'heure
Une fois que la rangée est conçue comme le cadran de l'horloge, nous sommes prêts à ajouter les marqueurs d'heure qui représentent douze heures, trois heures, six heures et neuf heures. Chacun des marqueurs sera créé à l'aide d'un module diviseur.
Le marqueur 12 heures
Commencez par ajouter un nouveau module de séparation à l'intérieur de la rangée.
Mettez ensuite à jour la couleur d'arrière-plan comme suit :
- Couleur d'arrière-plan : #78acf4
- Largeur: 10vw
- Largeur maximale : 150 px
- Hauteur : 3px
- Coins arrondis : 8px
- Transformation Rotation Axe Z: 90deg
Sous l'onglet avancé, attribuez au diviseur une position absolue :
- Position : Absolu
- Emplacement : en haut au centre
Le marqueur de 6 heures
Pour créer le marqueur 3 heures, dupliquez le diviseur utilisé pour créer le marqueur 12 heures. (À ce stade, c'est une bonne idée d'étiqueter vos modules dans le modal Layers.) Ensuite, ouvrez le diviseur en double et mettez à jour l'emplacement de la position comme suit :
- Emplacement : en bas au centre
Le marqueur de 3 heures
Pour créer le marqueur de 3 heures, dupliquez le marqueur de 6 heures. Ensuite, ouvrez les paramètres du nouveau doublon (assurez-vous de l'étiqueter « 3 heures ») et modifiez les éléments suivants :
- Localisation : centre droit
Mettez ensuite à jour les options de transformation comme suit :
Sous l'onglet traduire…
- Transformer Translation Axe X : 50 %
Sous l'onglet Rotation
- Transformation Rotation Axe Z : 0deg
Le marqueur de 9 heures
Pour créer le marqueur de 3 heures, dupliquez le marqueur de 6 heures. Ensuite, ouvrez les paramètres du nouveau doublon (assurez-vous de l'étiqueter « 9 heures ») et modifiez les éléments suivants :
- Localisation : centre gauche
Mettez ensuite à jour les options de transformation comme suit :
Sous l'onglet traduire…
- Transformer Traduire Axe X : -50%
Partie 3 : Création des aiguilles de l'horloge (seconde, minute et heure)
Une fois les marqueurs d'heure en place, nous sommes prêts à commencer à créer les aiguilles de l'horloge. Nous allons commencer par la trotteuse.
La seconde main
Pour créer la trotteuse, dupliquez le diviseur de 12 heures et faites-le glisser sous le reste des diviseurs de la colonne à l'aide du modal Layers.
Puis étiquetez le nouveau doublon « seconde ».
Ouvrez les paramètres du module et mettez à jour la position sous l'onglet Avancé :
- Lieu : centre centre
Sous l'onglet Conception, mettez à jour la taille comme suit :
- Largeur: 20vw
- Largeur maximale : 200 px
- Hauteur: 0.5vw
- Hauteur maximale : 7,5 pixels
Maintenant, la trotteuse est au milieu du cadran de l'horloge, mais nous voulons que le bas de la trotteuse commence au centre comme le ferait une aiguille d'horloge normale. Ensuite, nous voulons que le bas de l'aiguille reste au centre comme origine de pivotement afin que l'aiguille puisse tourner comme elle le ferait sur une horloge réelle. Pour ce faire, nous devrons utiliser une combinaison d'options de transformation pour positionner et faire pivoter le diviseur à partir d'une origine de transformation spécifique.
Mettez à jour les éléments suivants :
Sous l'onglet traduire…
- Transform Translate X Axis : 0% (c'est une étape importante)
Sous l'onglet Rotation…
- Transformation Rotation Axe Z : -90 degrés
Sous l'onglet Origine…
- Origine de la transformation : centre gauche
Étant donné que cette main se déplacera très rapidement une fois que nous aurons ajouté l'effet de défilement, donnons-lui une couleur d'arrière-plan semi-transparente afin qu'elle ne soit pas trop distrayante.
- Couleur d'arrière-plan : rgba(175,175,175,0,12)
L'aiguille des minutes
Pour créer l'aiguille des minutes, dupliquez le module d'aiguille des secondes et nommez le duplicata « minute ». Ouvrez ensuite le nouveau module de séparation et mettez à jour la couleur d'arrière-plan :
- Couleur d'arrière-plan du dégradé de gauche : #78acf4
- Dégradé d'arrière-plan à droite : #b0b9ff
- Direction du gradient : 90 degrés
Ensuite, mettez à jour la conception comme suit :
- Largeur: 15w
- Largeur maximale : 150 px
- Hauteur : 1vw
- Hauteur maximale : 15 pixels
L'aiguille des heures
Une fois l'aiguille des minutes terminée, dupliquez le module Trotteuse et étiquetez le duplicata « heure ». Ouvrez ensuite le nouveau module de séparation et mettez à jour la couleur d'arrière-plan comme suit :
- Couleur d'arrière-plan : #ffffff
Ensuite, mettez à jour la taille sous l'onglet conception comme suit :
- Largeur: 10vw
- Largeur maximale : 100 pixels
À ce stade, vous aurez les trois aiguilles de l'horloge prêtes pour les effets de défilement !
Partie 4 : Ajout d'effets de défilement de rotation à chaque aiguille d'horloge
Pour faire pivoter les aiguilles de l'horloge, nous allons ajouter l'effet de défilement de rotation à chacune des trois aiguilles de l'horloge. Puisque nous travaillons avec une conception d'horloge, il est important de se rappeler que nous pouvons utiliser les degrés de rotation de chaque aiguille d'horloge pour représenter l'heure réelle. Par exemple, une rotation de l'aiguille des heures de 30 degrés représenterait 1 heure, 60 degrés représenterait 2 heures, et ainsi de suite.
Effet de défilement de rotation des aiguilles des heures
Tout d'abord, nous allons ajouter un effet de défilement de rotation à l'aiguille des heures. Ouvrez les paramètres du diviseur de l'aiguille des heures et ajoutez l'effet de transformation suivant :
Sous l'onglet rotation…
- Activer la rotation : OUI
- Rotation de départ : 0deg (à 10 %)
- Rotation moyenne : 15 deg (à 50 %)
- Rotation finale : 30 deg (à 90 %)
Effet de défilement de la rotation des aiguilles des minutes
Ensuite, nous allons ajouter un effet de défilement de rotation à l'aiguille des minutes. Ouvrez les paramètres du diviseur de l'aiguille des minutes et ajoutez l'effet de transformation suivant :
Sous l'onglet rotation…
- Activer la rotation : OUI
- Rotation de départ : 0deg (à 10 %)
- Rotation moyenne : 180 deg (à 50 %)
- Rotation finale : 360 deg (à 90 %)
Effet de défilement de rotation d'occasion
Ensuite, nous allons ajouter un effet de défilement de rotation à la trotteuse. Ouvrez les paramètres du diviseur d'occasion et ajoutez l'effet de transformation suivant :
Sous l'onglet rotation…
- Activer la rotation : OUI
- Rotation de départ : 0deg (à 10 %)
- Rotation moyenne : 5 400 degrés (à 50 %)
- Rotation finale : 10 800 degrés (à 90 %)
REMARQUE : Une rotation précise de la trotteuse pour atteindre 1 heure nécessiterait une rotation de 21 600 degrés. Mais comme c'est beaucoup trop rapide, j'ai pensé qu'il valait mieux le réduire de moitié. Après tout, c'est à des fins de conception.
Résultats finaux
Voici la conception finale.
Et c'est le résultat final des effets de défilement. Remarquez comment le temps passe exactement une heure lorsque vous faites défiler la page.
Dernières pensées
Il est assez étonnant que nous puissions créer une conception d'horloge comme celle-ci avec des effets de défilement qui représentent le temps avec une telle précision. N'hésitez pas à expérimenter en ajoutant plus d'effets de défilement de rotation pour accélérer et ralentir le temps sur l'horloge pendant le défilement. De plus, vous pouvez utiliser cette conception d'horloge pour accentuer de nombreux CTA ou en-têtes.
J'ai hâte de vous entendre dans les commentaires.
À votre santé!