Création d'un effet de curseur monochromatique personnalisé dans Divi

Effet Fun Follow-the-Mouse avec les modes de fusion CSS!

Dans ce court didacticiel, je vais vous montrer comment recréer l'effet de curseur personnalisé que nous avons récemment inclus dans la mise en page Black Friday Landing Page.

Nous allons utiliser la propriété CSS mix-blend-mode et du code jQuery pour y arriver. Regardez la vidéo étape par étape et copiez le code que nous avons utilisé ci-dessous!

Si vous êtes notre abonné, n'hésitez pas à télécharger le fichier JSON!

Télécharger cet aperçu en direct de cette mise en page

Ressources gratuites pour les amoureux de Divi

Rejoignez notre newsletter pour obtenir les bonnes choses!

Nous vous fournirons des mises à jour sur les nouveaux didacticiels, les éléments de conception Web et les offres spéciales. Obtenez des goodies Divi de qualité supérieure directement dans votre boîte de réception! Lisez notre politique de confidentialité pour savoir comment nous gérons et protégeons vos informations soumises.

Inscrivez-vous pour télécharger

Accédez à cette mise en page et à toutes les ressources gratuites conçues exclusivement pour nos abonnés!

Déjà inscrit?

Remplissez le formulaire d'inscription et si vous êtes sur la liste, il vous mènera directement à la page de téléchargement!

Tout d'abord, la structure Divi Builder

Il s'agit d'une mise en page simple à deux colonnes avec une typographie en gras. L'utilisation de deux couleurs de colonne différentes permet une expérience surprenante de survol et de suivi de la souris. Le contenu de chaque colonne peut changer, mais il est préférable de le conserver uniquement en noir / blanc.

Dans notre exemple, la section parent utilise une classe CSS personnalisée de dl-bf-hero.

Ensuite, l'élément jQuery

Pour vous assurer que la propriété CSS mix-blend-mode fonctionne sur les deux colonnes, notre élément de curseur doit être un frère d'une ligne parent. La fonction jQuery ci-dessous ajoute le nouveau div avec une classe CSS de le curseur à l'intérieur de la section (juste après notre rangée).

jQuery(document).ready(function($){
    $('.dl-bf-hero').append('
'); });

Styliser l'élément!

Voici le code CSS que nous avons utilisé pour styliser le nouvel élément:

.cursor {
    position: fixed;
    top:0;
    left:50%;
    width:400px;
    height:400px;
    background:#fff;
    border-radius:50%;
    z-index:2;
    mix-blend-mode:difference;
    transform:translate(-50%,-50%);
 }

Enfin, déplacez-le avec la position du curseur!

Ce bit de jQuery s'assurera que l'élément top et left position sont mis à jour automatiquement lorsque la position du curseur utilisateur change dans la fenêtre du navigateur.

$(window).mousemove(function(e){
      $('.cursor').css({
        top: e.clientY,
        left: e.clientX
      });
    });

Et le code jQuery final ressemble à ceci:

jQuery(document).ready(function($){
    $('.dl-bf-hero').append('
'); $(window).mousemove(function(e){ $('.cursor').css({ top: e.clientY, left: e.clientX }); }); });

Voici l’effet final!

Qu'est-ce que tu penses?

Nous serions ravis de voir comment vous pourriez utiliser cet effet en action! Veuillez partager vos idées créatives dans les commentaires ci-dessous!

Nous apprécions toujours vos commentaires, alors faites-nous savoir dans les commentaires ce que vous en pensez!

Leave a Reply 0 comments

Leave a Reply: