☰

Duolingo Button Animations

Adds cool animations to buttons in Duolingo

当前为 2024-11-28 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         Duolingo Button Animations
  3. // @namespace    http://tampermonkey.net/
  4. // @description  Adds cool animations to buttons in Duolingo
  5. // @author       Your Name
  6. // @match        https://www.duolingo.com/*
  7. // @grant        GM_addStyle
  8. // @license      Redistribution prohibited
  9. // @version      0.3
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.     'use strict';
  14.  
  15.     GM_addStyle(`
  16.         .button-animation {
  17.             transition: transform 0.2s ease-in-out;
  18.             border-radius: 8px;
  19.             padding: 10px 20px;
  20.             cursor: pointer;
  21.             position: relative;
  22.         }
  23.  
  24.         .button-animation:hover::after {
  25.             opacity: 1;
  26.         }
  27.  
  28.         .button-animation.magnetic {
  29.             transition: transform 0.1s ease-in-out;
  30.         }
  31.     `);
  32.  
  33.     document.addEventListener('mousemove', function(e) {
  34.         const buttons = document.querySelectorAll('.button-animation');
  35.         buttons.forEach(button => {
  36.             const rect = button.getBoundingClientRect();
  37.             const distance = Math.sqrt((e.clientX - rect.left - rect.width / 2) ** 2 + (e.clientY - rect.top - rect.height / 2) ** 2);
  38.             if (distance < 100) { // Установите радиус притяжения
  39.                 const x = (e.clientX - rect.left - rect.width / 2) * 0.1;
  40.                 const y = (e.clientY - rect.top - rect.height / 2) * 0.1;
  41.                 button.style.transform = `translate(${x}px, ${y}px)`;
  42.             } else {
  43.                 button.style.transform = '';
  44.             }
  45.         });
  46.     });
  47.  
  48.     const observer = new MutationObserver(() => {
  49.         const buttons = document.querySelectorAll('button');
  50.         buttons.forEach(button => {
  51.             if (!button.classList.contains('button-animation')) {
  52.                 button.classList.add('button-animation');
  53.             }
  54.         });
  55.     });
  56.  
  57.     observer.observe(document.body, { childList: true, subtree: true });
  58. })();