Effet de survol unique pour les répéteurs Oxygen Builder

Dans ce didacticiel, nous allons créer un effet de survol unique pour le contenu affiché dans Oxygen Builder Repeaters. Modélisé à partir de "l'effet de survol de distorsion" de Codrops et utilisant le code source de cette ressource, cet effet créera un fondu déformé sur une image définie par l'utilisateur lorsqu'un visiteur survole une cellule de répétition.

Ce didacticiel incorporera quelques concepts intéressants d'Oxygen Builder :

• Techniques de répétition avancées
• Groupes de champs ACF et intégration manuelle avec Oxygen Builder
• Grille CSS de base
• Attributs dynamiques
• Utilisation du bloc de code et JS intermédiaire

En allant un peu plus loin, nous allons en faire une fonctionnalité 100% dynamique, ce qui signifie qu'elle sera définie et oubliée. Pas besoin d'initialiser un effet spécifique pour chaque cellule !

Suivez le long (téléchargement source):

Remarque : il s'agit d'une preuve de concept et nécessite probablement une optimisation pour une utilisation sur les sites de production.

Deux autres choses :

• Nous lançons un cours Oxygen Builder. Vous pouvez en savoir plus ici et rejoindre la liste d'attente.
• C'était un tutoriel demandé dans notre super groupe Facebook . Nous serions ravis de vous compter parmi nous !

Démo d'effet :

Étape 1 : Champs ACF

Nous utiliserons ACF pour rendre cela 100 % dynamique et facile à modifier pour l'utilisateur final. Créez un groupe de champs et ajoutez une image de survol et une image de déplacement. L'image initiale sera l'image vedette de la publication. L'image de survol est ce à quoi l'effet s'estompera lorsque le visiteur survolera un message de répéteur.

L'image de déplacement est ce qui sera utilisé pour créer l'animation de morph/fade unique entre les deux images. Dans cet exemple, nous utilisons les images suivantes pour le déplacement :

Vous pouvez en fait utiliser n'importe quelle image, mais les images en noir et blanc avec une belle texture sont généralement les meilleures. C'est facile d'expérimenter cette méthode !

Voici à quoi ressemblent le groupe de champs et les images associées lors de l'ajout d'une nouvelle publication :

Étape 2 : créer la structure de l'effet

À la base, nous copions le code source de l'exemple Codrops, avec des modifications mineures.

Nous dupliquons simplement la structure HTML ci-dessus, avec des éléments Oxygen Builder. N'oubliez pas d'ajouter les classes de l'exemple HTML ci-dessus, car nous allons ajouter du CSS et le JS les utilise pour identifier des éléments spécifiques. Si vous modifiez ces classes, vous devrez mettre à jour le CSS et le JS en conséquence.

Notre répéteur utilise la grille CSS pour espacer uniformément toutes les cellules sans trop de travail :

Étape 3 : Rendre dynamique

Il y a plusieurs choses à configurer pour être dynamique. Tout d'abord, faites en sorte que le répéteur interroge le type de publication WordPress.

Ensuite, définissez la date et le titre du message pour qu'ils soient dynamiques.

Maintenant, nous allons mettre en place les trois images. C'est là que les choses peuvent devenir complexes. Définissez l'URL de l'image 1 comme URL de l'image sélectionnée.

Définissez l'URL de l'image 2 comme image de survol, définie dans l'ACF. Pour ce didacticiel, les champs ACF n'apparaissaient pas dans la fenêtre contextuelle "insérer des données dynamiques" (probablement en raison d'un bogue d'Oxygen Builder 4.0 Beta 2). Il existe une solution de contournement facile si vous rencontrez ce problème :

1 - Insérer les données dynamiques

2 - Sélectionnez la valeur de retour de la fonction PHP

3 - insérez manuellement le contenu du champ ACF avec get_field('fieldname')

Enfin, nous devons définir l'image de distorsion que l'effet utilisera pour effectuer la transition de morphing. Ceci est inséré dans le HTML en tant qu'attribut de données, que le JS lit et intègre dans l'effet. À partir du code HTML ci-dessus, nous pouvons voir qu'il existe plusieurs attributs, qui peuvent être modifiés pour modifier l'effet.

La principale chose que nous devons rendre dynamique est le déplacement de données, qui aura l'URL de l'image définie dans le message à l'aide d'ACF. Nous avons codé en dur les trois autres attributs, mais vous pouvez utiliser la même méthode décrite ci-dessous pour les rendre également modifiables par l'utilisateur.

Accédez à l'élément wrapper d'image (le div autour des deux images dynamiques). Cliquez sur Avancé -> Attributs et ajoutez les éléments suivants.

Pour data-displacement , nous allons rendre cela dynamique en cliquant sur le bouton data+ dans le contenu, et en insérant notre champ ACF correspondant.

Le HTML frontal ressemblera à ceci, et le JS utilisera toutes ces données (qui sont dynamiques et modifiables par l'utilisateur via ACF) pour créer l'effet de survol de déplacement cool sur WordPress :

Étape 4 : Ajouter CSS, bibliothèques et JS

Nous ajouterons le CSS suivant à notre feuille de style CSS universelle. Vous devrez peut-être jouer avec des styles CSS supplémentaires pour que tout fonctionne correctement.

Enfin, nous allons charger les bibliothèques JS nécessaires et coder (nous l'avons fait avec un bloc de code) :

Nous utilisons Statique pour notre exemple (extraction des bibliothèques ImagesLoaded et Hover Effect de GitHub), mais vous devriez idéalement l'héberger sur votre site, en utilisant un outil comme Scripts Organizer ou Advanced Scripts.

Nous chargeons également Three.JS et TweenMax.JS, qui sont les deux bibliothèques sous-jacentes qui fonctionnent pour générer l'effet de déplacement.

Enfin, le JS fait ce qui suit - il identifie le moment où les images sont chargées et applique l'effet de survol à tout élément qui a le .grid__item-img , en extrayant les images associées et les images de déplacement de chaque message. Complètement dynamique et fonctionnera quel que soit le nombre de publications renvoyées par le répéteur Oxygen Builder.

Après avoir ajouté tout cela, votre effet devrait fonctionner !

Cela a été demandé par un membre de notre groupe Facebook Isotropic. Nous vous invitons à vous joindre ici.