{"id":965,"date":"2025-08-19T10:51:23","date_gmt":"2025-08-19T10:51:23","guid":{"rendered":"https:\/\/laywow.com\/animation\/custom-web-cursors\/"},"modified":"2025-09-17T15:05:17","modified_gmt":"2025-09-17T15:05:17","slug":"custom-web-cursors","status":"publish","type":"post","link":"https:\/\/laywow.com\/en\/animations\/custom-web-cursors\/","title":{"rendered":"Custom Web Cursors"},"content":{"rendered":"\n

This guide will show you how to integrate a custom web cursor on your sites, customize it, and apply it to different page elements.<\/p>\n\n

<\/p>\n\n

Prepare Code Integration<\/h2>\n\n
    \n
  1. Go to your WordPress dashboard.<\/strong><\/li>\n\n\n\n
  2. Navigate to Elementor > Custom Code<\/strong>.<\/li>\n\n\n\n
  3. Click on Add New Code<\/strong>.<\/li>\n\n\n\n
  4. Name the code, for example: Custom Cursor<\/em>.<\/li>\n\n\n\n
  5. Choose the location <\/body><\/code> \u2013 End<\/strong> \"\".<\/li>\n\n\n\n
  6. Paste the following code (HTML, CSS, and JS included):<\/li>\n<\/ol>\n\n
    <script>\ndocument.addEventListener('DOMContentLoaded', function () {\n    let defaultSetting = {\n        size: '1',\n        textColor: '#FFFFFF',\n        backgroundColor: '#FFFFFF',\n        mixBlendMode: 'difference',\n        transitionDuration: '0.3s',\n        cursor: 'inherit',\n    }\n\n    let selectorsSettings = [\n        {\n            selector: '.link-hover',\n            size: '4',\n            textColor: '#FFFFFF',\n            backgroundColor: '#FFFFFF',\n            mixBlendMode: 'difference',\n            transitionDuration: '0.3s',\n            cursor: 'pointer',\n        },\n        {\n            selector: '.article',\n            message: 'Voir',\n            textColor: '#000',\n            backgroundColor: '#FFFFFF',\n            mixBlendMode: 'difference',\n            size: '8',\n            fontSize: '2px',\n            fontFamily: 'sora',\n            transitionDuration: '0.3s',\n            cursor: 'pointer',\n        },\n    ];\n\n    document.body.insertAdjacentHTML('beforeEnd', \"<div class='ehow_mouse'><div class='ehow_mouse_content'><\/div><\/div>\");\n\n    let mouse = document.querySelector('.ehow_mouse');\n    let mouseContent = document.querySelector('.ehow_mouse_content');\n\n    document.addEventListener('mousemove', function(e){\n        mouse.style.transform = `translate3d(${e.clientX}px, ${e.clientY}px, 0)`;\n    });\n\n    if(typeof defaultSetting === 'object'){\n        document.addEventListener('mousemove', setDefault);\n        if(defaultSetting.cursor){\n            document.body.style.cursor = defaultSetting.cursor;\n        }\n    }\n\n    let enteredAreas = [];\n\n    function init(isPopup){\n        selectorsSettings.forEach((setting, i, allSettings) => {\n            let showMouseHoverElems;\n            if(isPopup){\n                showMouseHoverElems = document.querySelectorAll('.dialog-lightbox-widget ' + setting.selector);\n            } else {\n                showMouseHoverElems = document.querySelectorAll(setting.selector + ':not(.mouse-init)');\n            }\n\n            showMouseHoverElems.forEach(e => {\n                e.classList.add('mouse-init');\n                e.addEventListener('mouseenter', function() {\n                    enteredAreas.push(i);\n                    updateMouse(setting);\n                });\n                e.addEventListener('mouseleave', function() {\n                    enteredAreas.pop();\n                    if(enteredAreas.length > 0){\n                        updateMouse(allSettings[enteredAreas[enteredAreas.length-1]])\n                    } else if(typeof defaultSetting === 'object'){\n                        updateMouse(defaultSetting)\n                    } else {\n                        mouse.style.setProperty('--mouse-size', 0)\n                    }\n                });\n                if(setting.cursor){\n                    e.style.cursor = setting.cursor;\n                }\n            });\n        });\n    };\n\n    init();\n\n    if(typeof jQuery === 'function'){\n        jQuery(document).on('elementor\/popup\/show', () => {\n            init(true);\n        });\n    }\n\n    function updateMouse(setting){\n        mouseContent.innerHTML = setting.message || '';\n        mouse.style.setProperty('--mouse-size', setting.size || 1);\n        mouse.style.setProperty('--mouse-text-color', setting.textColor || '#999999');\n        mouse.style.setProperty('--mouse-background-color', setting.backgroundColor || 'transparent');\n        if(setting.image) mouse.style.setProperty('--mouse-background-image', setting.image);\n        if(setting.imageSize) mouse.style.setProperty('--mouse-background-image-size', setting.imageSize);\n        if(setting.border) mouse.style.setProperty('--mouse-border', setting.border);\n        if(setting.borderRadius) mouse.style.setProperty('--mouse-border-radius', setting.borderRadius);\n        if(setting.mixBlendMode) mouse.style.setProperty('--mouse-mix-blend-mode', setting.mixBlendMode);\n        if(setting.filter) mouse.style.setProperty('--mouse-filter', setting.filter);\n        if(setting.fontSize) mouse.style.setProperty('--mouse-font-size', setting.fontSize);\n        if(setting.fontFamily) mouse.style.setProperty('--mouse-font-family', setting.fontFamily);\n        if(setting.transitionDuration) mouse.style.setProperty('--mouse-transition-duration', setting.transitionDuration);\n        if(setting.backDropFilter) mouse.style.setProperty('--mouse-backdrop', setting.backDropFilter);\n    }\n});\n<\/script>\n\n<style>\n@media (hover: hover) {\n    .ehow_mouse {\n        position: fixed;\n        top: 0; left: 0;\n        z-index: 999999;\n        pointer-events: none;\n        will-change: transform;\n        mix-blend-mode: var(--mouse-mix-blend-mode, none);\n    }\n    .ehow_mouse .ehow_mouse_content {\n        position: absolute;\n        top: -24px; left: -24px;\n        width: 48px; height: 48px;\n        transform: scale(var(--mouse-size, 1));\n        background-image: var(--mouse-background-image, none);\n        background-color: var(--mouse-background-color, transparent);\n        background-repeat: no-repeat;\n        background-position: center center;\n        background-size: var(--mouse-background-image-size, 50%);\n        border: var(--mouse-border, none);\n        border-radius: var(--mouse-border-radius, 50%);\n        filter: var(--mouse-filter, none);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        font-size: var(--mouse-font-size, 12px);\n        font-family: var(--mouse-font-family, inherit);\n        color: var(--mouse-text-color, transparent);\n        text-align: center;\n        transition: transform var(--mouse-transition-duration, 0.3s) ease-in-out, background-color var(--mouse-transition-duration, 0.3s);\n        backdrop-filter: var(--mouse-backdrop);\n        -webkit-backdrop-filter: var(--mouse-backdrop);\n    }\n}\n<\/style><\/code><\/pre>\n\n
    <\/p>\n\n
    Customize the Cursor<\/h2>\n\n
    Configuration Objects<\/strong><\/h3>\n\n
      \n
    • defaultSetting<\/code> : defines the default cursor across the entire page.<\/li>\n\n\n\n
    • selectorsSettings<\/code> : defines the cursor on specific elements via CSS selectors<\/strong>.<\/li>\n<\/ul>\n\n
      Available Properties<\/strong><\/h3>\n\n
      Property<\/th>Description<\/th>Example<\/th><\/tr><\/thead>
      message<\/code><\/td>Text in the center of the cursor<\/td>'Lire'<\/code><\/td><\/tr>
      size<\/code><\/td>Cursor size (scale)<\/td>'2'<\/code><\/td><\/tr>
      textColor<\/code><\/td>Text color<\/td>'#FFF'<\/code><\/td><\/tr>
      backgroundColor<\/code><\/td>Cursor background color<\/td>'rgba(0,0,0,0.5)'<\/code><\/td><\/tr>
      image<\/code><\/td>Image or gradient<\/td>'url(image.svg)'<\/code>  or  'linear-gradient(...)'<\/code><\/td><\/tr>
      imageSize<\/code><\/td>Image size<\/td>'50%'<\/code><\/td><\/tr>
      border<\/code><\/td>Cursor border<\/td>'3px solid #000'<\/code><\/td><\/tr>
      borderRadius<\/code><\/td>Corner radius<\/td>'50%'<\/code><\/td><\/tr>
      filter<\/code><\/td>CSS effects (e.g., drop-shadow)<\/td>'drop-shadow(0 0 5px #000)'<\/code><\/td><\/tr>
      fontSize<\/code><\/td>Text size<\/td>'12px'<\/code><\/td><\/tr>
      fontFamily<\/code><\/td>Text font<\/td>'Roboto'<\/code><\/td><\/tr>
      transitionDuration<\/code><\/td>Transition duration<\/td>'0.3s'<\/code><\/td><\/tr>
      cursor<\/code><\/td>Native cursor<\/td>'pointer'<\/code>  or  'none'<\/code><\/td><\/tr>
      mixBlendMode<\/code><\/td>Blend mode<\/td>'difference'<\/code><\/td><\/tr>
      backDropFilter<\/code><\/td>Frosted glass effect<\/td>'blur(25px)'<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n
      <\/p>\n\n
      Target Specific Elements<\/h2>\n\n
      Add a CSS Class to an Elementor Widget<\/h3>\n\n
        \n
      1. Open the page with Elementor.<\/li>\n\n\n\n
      2. Select the widget you want to target (button, image, section, etc.).<\/li>\n\n\n\n
      3. In the left panel, go to Advanced > CSS Classes<\/strong>.<\/li>\n\n\n\n
      4. Add a unique class name, for example:  curseur-personnalise<\/code><\/li>\n<\/ol>\n\n
        \n
        \u26a0\ufe0f Do not add the dot (.<\/code>) here, just the name.<\/p>\n<\/blockquote>\n\n
        Modify the Code to Target this Class<\/h3>\n\n
        In the selectorsSettings<\/code> array of your script, add an object for this CSS class:<\/p>\n\n
        {\n    selector: '.curseur-personnalise',  \/\/ le point est obligatoire ici\n    message: 'Voir plus',\n    size: '3',\n    textColor: '#FFF',\n    backgroundColor: '#333',\n    cursor: 'pointer',\n    borderRadius: '50%',\n    transitionDuration: '0.3s'\n}\n<\/code><\/pre>\n\n
          \n
        • selector<\/code> : the CSS class you just created (with a dot in front).<\/li>\n\n\n\n
        • message<\/code> : text in the center of the cursor.<\/li>\n\n\n\n
        • size<\/code> : cursor size (scale).<\/li>\n\n\n\n
        • textColor<\/code>  and backgroundColor<\/code>: colors.<\/li>\n\n\n\n
        • cursor<\/code> : native cursor type (“pointer”, “none”, etc.).<\/li>\n\n\n\n
        • borderRadius<\/code> : to round the cursor if needed.<\/li>\n\n\n\n
        • transitionDuration<\/code> : animation duration.<\/li>\n<\/ul>\n\n
          Debugging<\/h2>\n\n
            \n
          • If the cursor does not appear, open the browser console (F12).<\/li>\n\n\n\n
          • Check for syntax errors in defaultSetting<\/code> or selectorsSettings<\/code>.<\/li>\n\n\n\n
          • Ensure correct commas<\/strong> and single quotes<\/strong>.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
            This guide will show you how to integrate a custom web cursor on your sites, customize it, and apply it to different page elements. Prepare Code Integration Customize the Cursor Configuration Objects Available Properties Property Description Example message Text in the center of the cursor ‘Lire’ size Cursor size (scale) ‘2’ textColor Text color ‘#FFF’ […]<\/p>\n","protected":false},"author":1,"featured_media":964,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[25],"tags":[27,26],"class_list":["post-965","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-animations","tag-hover","tag-interactions"],"acf":[],"_links":{"self":[{"href":"https:\/\/laywow.com\/en\/wp-json\/wp\/v2\/posts\/965","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/laywow.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/laywow.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/laywow.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/laywow.com\/en\/wp-json\/wp\/v2\/comments?post=965"}],"version-history":[{"count":1,"href":"https:\/\/laywow.com\/en\/wp-json\/wp\/v2\/posts\/965\/revisions"}],"predecessor-version":[{"id":966,"href":"https:\/\/laywow.com\/en\/wp-json\/wp\/v2\/posts\/965\/revisions\/966"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/laywow.com\/en\/wp-json\/wp\/v2\/media\/964"}],"wp:attachment":[{"href":"https:\/\/laywow.com\/en\/wp-json\/wp\/v2\/media?parent=965"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/laywow.com\/en\/wp-json\/wp\/v2\/categories?post=965"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/laywow.com\/en\/wp-json\/wp\/v2\/tags?post=965"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}