Mouse Trail

Add a mouse trail effect with an image to any website

Bu betiği kurabilmeniz için Tampermonkey, Greasemonkey ya da Violentmonkey gibi bir kullanıcı betiği eklentisini kurmanız gerekmektedir.

Bu betiği yüklemek için Tampermonkey gibi bir uzantı yüklemeniz gerekir.

Bu betiği kurabilmeniz için Tampermonkey ya da Violentmonkey gibi bir kullanıcı betiği eklentisini kurmanız gerekmektedir.

Bu betiği kurabilmeniz için Tampermonkey ya da Userscripts gibi bir kullanıcı betiği eklentisini kurmanız gerekmektedir.

Bu betiği indirebilmeniz için ayrıca Tampermonkey gibi bir eklenti kurmanız gerekmektedir.

Bu komut dosyasını yüklemek için bir kullanıcı komut dosyası yöneticisi uzantısı yüklemeniz gerekecek.

(Zaten bir kullanıcı komut dosyası yöneticim var, kurmama izin verin!)

Advertisement:

Bu stili yüklemek için Stylus gibi bir uzantı yüklemeniz gerekir.

Bu stili yüklemek için Stylus gibi bir uzantı kurmanız gerekir.

Bu stili yükleyebilmek için Stylus gibi bir uzantı yüklemeniz gerekir.

Bu stili yüklemek için bir kullanıcı stili yöneticisi uzantısı yüklemeniz gerekir.

Bu stili yüklemek için bir kullanıcı stili yöneticisi uzantısı kurmanız gerekir.

Bu stili yükleyebilmek için bir kullanıcı stili yöneticisi uzantısı yüklemeniz gerekir.

(Zateb bir user-style yöneticim var, yükleyeyim!)

Advertisement:

// ==UserScript==
// @name         Mouse Trail
// @namespace    http://tampermonkey.net/
// @version      0.2
// @description  Add a mouse trail effect with an image to any website
// @author       You
// @match        *://*/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Image URL for the mouse trail
    const imageUrl = 'https://cdn.creazilla.com/emojis/42013/grinning-face-with-smiling-eyes-emoji-clipart-lg.png'; // Replace with your image URL

    // Trail settings
    const trailSize = 25; // Size of each trail image (width and height)
    const trailDuration = 300; // Time in ms for how long each trail image lasts

    // Create a container for each trail image
    function createTrailImage(x, y) {
        const trailImage = document.createElement('img');
        trailImage.src = imageUrl; // Set image URL
        trailImage.style.position = 'absolute';
        trailImage.style.width = `${trailSize}px`;
        trailImage.style.height = `${trailSize}px`;
        trailImage.style.left = `${x - trailSize / 2}px`; // Center image on the cursor
        trailImage.style.top = `${y - trailSize / 2}px`; // Center image on the cursor
        trailImage.style.pointerEvents = 'none'; // Don't allow interaction with the trail image
        trailImage.style.zIndex = '9999'; // Ensure it's above most content
        trailImage.style.transition = 'transform 0.1s ease-out'; // Smooth transition effect

        // Append to the body
        document.body.appendChild(trailImage);

        // Remove the trail image after the specified duration
        setTimeout(() => {
            trailImage.remove();
        }, trailDuration);
    }

    // Update trail image on mouse movement
    document.addEventListener('mousemove', (e) => {
        const mouseX = e.pageX;
        const mouseY = e.pageY;
        createTrailImage(mouseX, mouseY);
    });
})();