Dance of the Dots : chorégraphie de commandes de curseur personnalisées dans Webflow

Salut, les concepteurs de Webflow. Aujourd'hui, nous nous aventurons dans le monde captivant de jQuery et des commandes de curseur personnalisées. Oui, nous allons faire en sorte que les points statiques situés sous votre curseur Webflow dansent au rythme de votre musique. Nous avons récemment eu un projet dans le cadre duquel nous devions contrôler le curseur Webflow à l'aide de blocs de liens situés en dehors de l'élément du curseur Webflow. (Pour faire court, nous avons un élément de navigation superposé avec un tas de blocs de liens qui devaient vous diriger vers des diapositives spécifiques lorsque vous cliquiez dessus). Vous trouverez ci-dessous une courte vidéo présentant nos commandes personnalisées :

<div style="padding:81.1% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/873388654?badge=0&autopause=0&quality_selector=1&progress_bar=1&player_id=0&app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" style="position:absolute;top:0;left:0;width:100%;height:100%;" title="Custom Slider Controls in Webflow"><script src="https://player.vimeo.com/api/player.js"></script></iframe></div>

Quoi qu'il en soit, nous en avons fait plusieurs recherches sur Google, nous avons découvert que nous pouvions modifier une diapositive spécifique en simulant un clic sur le point de navigation de cette diapositive et avons créé un script pour le faire). Commençons par vous donner le script dont vous aurez besoin pour cela :

<iframe height="300" style="width: 100%;" scrolling="no" title="Custom Slider Controls" src="https://codepen.io/milkmoonstudio/embed/preview/rNoRzNG?default-tab=html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
Voir le stylo <a href="https://codepen.io/milkmoonstudio/pen/rNoRzNG">
</a><a href="https://codepen.io/milkmoonstudio">Commandes de curseur personnalisées par Jakes van Eeden (@milkmoonstudio)</a>
sur <a href="https://codepen.io">CodePen</a>.
</iframe>

Prélude à la danse : ce dont vous aurez besoin

Avant de plonger dans l'océan des codes, assurez-vous d'avoir les éléments suivants à portée de main :

• Un projet Webflow dans lequel vous souhaitez implémenter les commandes de curseur personnalisées. Les classes du curseur n'ont pas beaucoup d'importance, nous appelons le curseur natif et non les noms dans Webflow dans le script : .w-slider-dot
  Ils ne sont même pas visibles dans notre projet, la visibilité des éléments a été définie sur masquée.
• Une compréhension très basique de jQuery (n'ayez crainte, nous allons le parcourir).

Acte 1 : Préparation de la scène

Tout d'abord, assurons-nous que notre projet Webflow est préparé et préparé pour une action jQuery.

Création du curseur :

1. Accédez à votre Webflow Designer.
2. Créez un nouvel élément de curseur.
3. Personnalisez-le à votre guise, mais laissez les points situés sous le curseur tels quels ou masquez-les.

Création de points personnalisés :

1. Créez un nouveau bloc div et nommez-le controls__wrap.
2. Maintenant, dans controls__wrap, créez vos blocs de liens (un pour chaque diapositive de votre slider) et attribuez à chacun une classe de slider__controller.
3. Personnalisez ces blocs de liens comme vous le souhaitez. Ce sont vos commandes qui vous mèneront à chaque diapositive de votre curseur, leur ordre correspond à l'ordre de vos diapositives.

Acte 2 : Le ballet jQuery

Passons maintenant au code qui fera danser ces points ! Nous allons utiliser jQuery pour créer une interaction vivante entre nos points personnalisés et les points du curseur natif de Webflow.

Préparation du stylo à code :

1. Accédez aux paramètres de votre projet ou aux paramètres de page.
2. Sous l'onglet « Code personnalisé », vous trouverez un refuge pour vos scripts personnalisés dans la section « Code de pied de page ». C'est ici que résidera notre script jQuery.

Coller le script :

1. Copiez le script que nous avons partagé plus tôt.
2. Collez-le dans la section « Code de pied de page » des paramètres de votre projet.

Comprendre la magie :

Le script parcourt chaque point personnalisé dans .controls__wrap, et lorsque vous cliquez sur un point personnalisé, il déclenche un événement tap sur le point du curseur Webflow natif correspondant, permettant de naviguer vers la diapositive correspondante.

Acte 3 : Les rideaux se ferment, les applaudissements s'ensuivent

Maintenant, retournez dans le Designer, cliquez sur Publier et observez la danse des points sur votre site en ligne ! Vos points personnalisés devraient désormais contrôler le curseur Webflow, offrant ainsi une expérience personnalisée à votre public.

Nous espérons que cela vous aidera autant que cela nous aidera. Je ne sais pas qui a eu l'idée de contrôler les points. Nous avons juste trouvé une référence et un extrait de code sur Stackoverflow, puis nous l'avons étoffé à partir de là, mais c'est chouette, alors profitez-en.