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.5
// ==/UserScript==
 
(function() {
    'use strict';
 
    GM_addStyle(`
        .button-animation {
            transition: transform 0.2s ease-in-out;
            border-radius: 8px;
            padding: 10px 20px;
            cursor: pointer;
            position: relative;
        }
    `);
 
    document.addEventListener('mousemove', function(e) {
        const buttons = document.querySelectorAll('.button-animation');
        let closestButton = null;
        let closestDistance = Infinity;
 
        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 && distance < closestDistance) { // Установите радиус притяжения
                closestDistance = distance;
                closestButton = button;
            }
        });
 
        buttons.forEach(button => {
            if (button === closestButton) {
                const rect = button.getBoundingClientRect();
                const x = (e.clientX - rect.left - rect.width / 2) * 0.3; // Увеличьте коэффициент для сильного притяжения
                const y = (e.clientY - rect.top - rect.height / 2) * 0.3;
                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镜像
