Curseurs web personnalisés

Ce guide vous montrera comment intégrer un curseur web personnalisé sur vos sites, le personnaliser et l’appliquer sur différents éléments de la page.

Préparer l’intégration du code

1. Accédez à votre tableau de bord WordPress.
2. Naviguez vers Elementor > Code personnalisé.
3. Cliquez sur Ajouter un nouveau code.
4. Nommez le code, par exemple : Curseur personnalisé.
5. Choisir l’emplacement </body> – Fin .
6. Collez le code suivant (HTML, CSS et JS inclus) :

<script>
document.addEventListener('DOMContentLoaded', function () {
    let defaultSetting = {
        size: '1',
        textColor: '#FFFFFF',
        backgroundColor: '#FFFFFF',
        mixBlendMode: 'difference',
        transitionDuration: '0.3s',
        cursor: 'inherit',
    }

    let selectorsSettings = [
        {
            selector: '.link-hover',
            size: '4',
            textColor: '#FFFFFF',
            backgroundColor: '#FFFFFF',
            mixBlendMode: 'difference',
            transitionDuration: '0.3s',
            cursor: 'pointer',
        },
        {
            selector: '.article',
            message: 'Voir',
            textColor: '#000',
            backgroundColor: '#FFFFFF',
            mixBlendMode: 'difference',
            size: '8',
            fontSize: '2px',
            fontFamily: 'sora',
            transitionDuration: '0.3s',
            cursor: 'pointer',
        },
    ];

    document.body.insertAdjacentHTML('beforeEnd', "<div class='ehow_mouse'><div class='ehow_mouse_content'></div></div>");

    let mouse = document.querySelector('.ehow_mouse');
    let mouseContent = document.querySelector('.ehow_mouse_content');

    document.addEventListener('mousemove', function(e){
        mouse.style.transform = `translate3d(${e.clientX}px, ${e.clientY}px, 0)`;
    });

    if(typeof defaultSetting === 'object'){
        document.addEventListener('mousemove', setDefault);
        if(defaultSetting.cursor){
            document.body.style.cursor = defaultSetting.cursor;
        }
    }

    let enteredAreas = [];

    function init(isPopup){
        selectorsSettings.forEach((setting, i, allSettings) => {
            let showMouseHoverElems;
            if(isPopup){
                showMouseHoverElems = document.querySelectorAll('.dialog-lightbox-widget ' + setting.selector);
            } else {
                showMouseHoverElems = document.querySelectorAll(setting.selector + ':not(.mouse-init)');
            }

            showMouseHoverElems.forEach(e => {
                e.classList.add('mouse-init');
                e.addEventListener('mouseenter', function() {
                    enteredAreas.push(i);
                    updateMouse(setting);
                });
                e.addEventListener('mouseleave', function() {
                    enteredAreas.pop();
                    if(enteredAreas.length > 0){
                        updateMouse(allSettings[enteredAreas[enteredAreas.length-1]])
                    } else if(typeof defaultSetting === 'object'){
                        updateMouse(defaultSetting)
                    } else {
                        mouse.style.setProperty('--mouse-size', 0)
                    }
                });
                if(setting.cursor){
                    e.style.cursor = setting.cursor;
                }
            });
        });
    };

    init();

    if(typeof jQuery === 'function'){
        jQuery(document).on('elementor/popup/show', () => {
            init(true);
        });
    }

    function updateMouse(setting){
        mouseContent.innerHTML = setting.message || '';
        mouse.style.setProperty('--mouse-size', setting.size || 1);
        mouse.style.setProperty('--mouse-text-color', setting.textColor || '#999999');
        mouse.style.setProperty('--mouse-background-color', setting.backgroundColor || 'transparent');
        if(setting.image) mouse.style.setProperty('--mouse-background-image', setting.image);
        if(setting.imageSize) mouse.style.setProperty('--mouse-background-image-size', setting.imageSize);
        if(setting.border) mouse.style.setProperty('--mouse-border', setting.border);
        if(setting.borderRadius) mouse.style.setProperty('--mouse-border-radius', setting.borderRadius);
        if(setting.mixBlendMode) mouse.style.setProperty('--mouse-mix-blend-mode', setting.mixBlendMode);
        if(setting.filter) mouse.style.setProperty('--mouse-filter', setting.filter);
        if(setting.fontSize) mouse.style.setProperty('--mouse-font-size', setting.fontSize);
        if(setting.fontFamily) mouse.style.setProperty('--mouse-font-family', setting.fontFamily);
        if(setting.transitionDuration) mouse.style.setProperty('--mouse-transition-duration', setting.transitionDuration);
        if(setting.backDropFilter) mouse.style.setProperty('--mouse-backdrop', setting.backDropFilter);
    }
});
</script>

<style>
@media (hover: hover) {
    .ehow_mouse {
        position: fixed;
        top: 0; left: 0;
        z-index: 999999;
        pointer-events: none;
        will-change: transform;
        mix-blend-mode: var(--mouse-mix-blend-mode, none);
    }
    .ehow_mouse .ehow_mouse_content {
        position: absolute;
        top: -24px; left: -24px;
        width: 48px; height: 48px;
        transform: scale(var(--mouse-size, 1));
        background-image: var(--mouse-background-image, none);
        background-color: var(--mouse-background-color, transparent);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: var(--mouse-background-image-size, 50%);
        border: var(--mouse-border, none);
        border-radius: var(--mouse-border-radius, 50%);
        filter: var(--mouse-filter, none);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: var(--mouse-font-size, 12px);
        font-family: var(--mouse-font-family, inherit);
        color: var(--mouse-text-color, transparent);
        text-align: center;
        transition: transform var(--mouse-transition-duration, 0.3s) ease-in-out, background-color var(--mouse-transition-duration, 0.3s);
        backdrop-filter: var(--mouse-backdrop);
        -webkit-backdrop-filter: var(--mouse-backdrop);
    }
}
</style>

Personnaliser le curseur

Objets de configuration

• defaultSetting : définit le curseur par défaut sur toute la page.
• selectorsSettings : définit le curseur sur des éléments spécifiques via CSS selectors.

Propriétés disponibles

Propriété	Description	Exemple
message	Texte au centre du curseur	'Lire'
size	Taille du curseur (scale)	'2'
textColor	Couleur du texte	'#FFF'
backgroundColor	Couleur de fond du curseur	'rgba(0,0,0,0.5)'
image	Image ou gradient	'url(image.svg)' ou 'linear-gradient(...)'
imageSize	Taille de l’image	'50%'
border	Bordure du curseur	'3px solid #000'
borderRadius	Rayon des coins	'50%'
filter	Effets CSS (ex : drop-shadow)	'drop-shadow(0 0 5px #000)'
fontSize	Taille du texte	'12px'
fontFamily	Police du texte	'Roboto'
transitionDuration	Durée des transitions	'0.3s'
cursor	Curseur natif	'pointer' ou 'none'
mixBlendMode	Mode de fusion	'difference'
backDropFilter	Effet de type verre dépoli	'blur(25px)'

Cibler les éléments spécifiques

Ajouter une classe CSS à un widget Elementor

1. Ouvrez la page avec Elementor.
2. Sélectionnez le widget que vous voulez cibler (bouton, image, section, etc.).
3. Dans le panneau de gauche, allez dans Avancé > Classes CSS.
4. Ajoutez un nom de classe unique, par exemple : curseur-personnalise

⚠️ N’ajoutez pas le point (.) ici, juste le nom.

Modifier le code pour cibler cette classe

Dans le tableau selectorsSettings de votre script, ajoute un objet pour cette classe CSS :

{
    selector: '.curseur-personnalise',  // le point est obligatoire ici
    message: 'Voir plus',
    size: '3',
    textColor: '#FFF',
    backgroundColor: '#333',
    cursor: 'pointer',
    borderRadius: '50%',
    transitionDuration: '0.3s'
}

• selector : la classe CSS que vous venez de créer (avec un point devant).
• message : texte au centre du curseur.
• size : taille du curseur (scale).
• textColor et backgroundColor : couleurs.
• cursor : type de curseur natif (« pointer », « none », etc.).
• borderRadius : pour arrondir le curseur si besoin.
• transitionDuration : durée de l’animation.

Débogage

• Si le curseur ne s’affiche pas, ouvrir la console du navigateur (F12).
• Vérifiez les erreurs de syntaxe dans defaultSetting ou selectorsSettings.
• Assurez-vous des virgules et guillemets simples corrects.