Duolingo Button Animations

Adds cool animations to buttons in Duolingo
目前为 2024-11-28 提交的版本。查看最新版本。
Wrap lines
// ==UserScript==
// @name         Duolingo Button Animations
// @namespace    http://tampermonkey.net/
// @description  Adds cool animations to buttons in Duolingo
// @author       Your Name
// @match        https://www.duolingo.com/*
// @grant        GM_addStyle
// @license      Redistribution prohibited
// @version      0.2
// ==/UserScript==

(function() {
    'use strict';

    GM_addStyle(`
        .button-animation {
            transition: transform 0.2s ease-in-out, background-color 0.3s;
            border-radius: 8px;
            padding: 10px 20px;
            cursor: pointer;
            position: relative;
        }

        .button-animation:hover {
            background-color: darkorange;
        }

        .button-animation::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 8px;
            transition: opacity 0.2s;
            opacity: 0;
        }

        .button-animation:hover::after {
            opacity: 1;
        }

        .button-animation.magnetic {
            transition: transform 0.1s ease-in-out;
        }
    `);

    document.addEventListener('mousemove', function(e) {
        const buttons = document.querySelectorAll('.button-animation');
        buttons.forEach(button => {
            const rect = button.getBoundingClientRect();
            const distance = Math.sqrt((e.clientX - rect.left - rect.width / 2) ** 2 + (e.clientY - rect.top - rect.height / 2) ** 2);
            if (distance < 100) { // Установите радиус притяжения
                const x = (e.clientX - rect.left - rect.width / 2) * 0.1;
                const y = (e.clientY - rect.top - rect.height / 2) * 0.1;
                button.style.transform = `translate(${x}px, ${y}px)`;
            } else {
                button.style.transform = '';
            }
        });
    });

    const observer = new MutationObserver(() => {
        const buttons = document.querySelectorAll('button');
        buttons.forEach(button => {
            if (!button.classList.contains('button-animation')) {
                button.classList.add('button-animation');
            }
        });
    });

    observer.observe(document.body, { childList: true, subtree: true });
})();
欢迎访问Greasy Fork镜像
