Curseurs web personnalisés

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

Préparer l’intégration du code

1. Accéder à votre tableau de bord WordPress.
2. Naviguer vers Elementor > Code personnalisé.
3. Cliquer sur Ajouter un nouveau code.
4. Nommer le code, par exemple : Curseur personnalisé.
5. Choisir l’emplacement </body> – Fin .
6. Coller 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. Ouvre la page avec Elementor.
2. Sélectionne le widget que tu veux cibler (bouton, image, section, etc.).
3. Dans le panneau de gauche, va dans Avancé > Classes CSS.
4. Ajoute un nom de classe unique, par exemple : curseur-personnalise

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

Modifier le code pour cibler cette classe

Dans le tableau selectorsSettings de ton 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 tu viens 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érifier les erreurs de syntaxe dans defaultSetting ou selectorsSettings.
• Assurez-vous des virgules et guillemets simples corrects.