YouTube Neon Glow + Hawaii + Loader + Scroll Effekte + Demos

YouTube mit Neon-Glow-Buttons, Hawaii-Hover, Ladeanimation, Scroll- und Parallax-Effekten (AOS & Rellax.js) plus Demo-Elementen für AOS & Rellax.js erweitern.
安裝腳本 ?
發表問題、評論、或檢舉該腳本。
換行
// ==UserScript==
// @name         YouTube Neon Glow + Hawaii + Loader + Scroll Effekte + Demos
// @namespace    http://tampermonkey.net/
// @version      1.2
// @description  YouTube mit Neon-Glow-Buttons, Hawaii-Hover, Ladeanimation, Scroll- und Parallax-Effekten (AOS & Rellax.js) plus Demo-Elementen für AOS & Rellax.js erweitern.
// @author       ChatGPT
// @match        https://www.youtube.com/*
// @grant        none
// @license      MIT
// ==/UserScript==

(function() {
  'use strict';

  // 1. CSS Styles (Neon Glow, Hawaii Hover, Loader, AOS Styles)
  const css = `
  /* Neon Glow Grundstil für Buttons, Icon-Buttons etc. */
  button, input[type="button"], input[type="submit"], 
  a.button, #scrollTopBtn, #darkModeToggle,
  yt-icon-button, tp-yt-paper-icon-button {
    background: #111 !important;
    color: #0ff !important;
    border: 2px solid #0ff !important;
    border-radius: 10px !important;
    padding: 0.6em 1.2em !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    cursor: pointer !important;
    box-shadow:
      0 0 5px #0ff,
      0 0 10px #0ff,
      0 0 20px #0ff,
      0 0 30px #0ff !important;
    text-shadow:
      0 0 5px #0ff,
      0 0 10px #0ff !important;
    transition: all 0.4s ease !important;
    position: relative !important;
    overflow: hidden !important;
    user-select: none !important;
  }
  button:hover, input[type="button"]:hover, input[type="submit"]:hover,
  a.button:hover, #scrollTopBtn:hover, #darkModeToggle:hover,
  yt-icon-button:hover, tp-yt-paper-icon-button:hover {
    color: white !important;
    border-color: transparent !important;
    animation: hawaiiGlow 2.5s linear infinite !important;
    box-shadow:
      0 0 8px #fff,
      0 0 20px #ff00ff,
      0 0 30px #00ffff,
      0 0 40px #ffcc00,
      0 0 50px #ff3300 !important;
    transform: scale(1.05) !important;
  }
  @keyframes hawaiiGlow {
    0%   { box-shadow:0 0 8px #ff0080,0 0 20px #ffcc00,0 0 30px #00ffff,0 0 40px #ff3300,0 0 50px #33ff77; }
    25%  { box-shadow:0 0 8px #00ffff,0 0 20px #33ff77,0 0 30px #ff0080,0 0 40px #ffcc00,0 0 50px #ff3300; }
    50%  { box-shadow:0 0 8px #ffcc00,0 0 20px #ff3300,0 0 30px #33ff77,0 0 40px #00ffff,0 0 50px #ff0080; }
    75%  { box-shadow:0 0 8px #33ff77,0 0 20px #ff0080,0 0 30px #ff3300,0 0 40px #ffcc00,0 0 50px #00ffff; }
    100% { box-shadow:0 0 8px #ff0080,0 0 20px #ffcc00,0 0 30px #00ffff,0 0 40px #ff3300,0 0 50px #33ff77; }
  }

  /* Loader Container & Spinner */
  #custom-loader {
    position: fixed; top:0; left:0; right:0; bottom:0;
    background: #000c; display:flex; align-items:center; justify-content:center;
    z-index:999999 !important;
  }
  #custom-loader .spinner {
    border:8px solid #111; border-top:8px solid #0ff;
    border-radius:50%; width:60px; height:60px;
    animation:spin 1.5s linear infinite;
    box-shadow:0 0 15px #0ff,0 0 30px #0ff;
  }
  @keyframes spin { 0% {transform:rotate(0deg);} 100% {transform:rotate(360deg);} }

  /* AOS Library Standard Styles */
  .aos-init { opacity:0; transition-property:opacity,transform; transition-timing-function:ease; }
  .aos-animate { opacity:1; }

  /* Demo-Container Styles */
  #demo-effects {
    max-width:90%; margin:60px auto; padding:20px;
    background:rgba(17,17,17,0.8); border:2px solid #0ff; border-radius:12px;
  }
  `;

  // injiziere Styles
  const style = document.createElement('style');
  style.textContent = css;
  document.head.appendChild(style);

  // Loader einblenden
  const loader = document.createElement('div');
  loader.id = 'custom-loader';
  loader.innerHTML = `<div class="spinner"></div>`;
  document.body.appendChild(loader);

  // Externe Bibliotheken laden
  function loadScript(src) {
    return new Promise(res => {
      const s = document.createElement('script');
      s.src = src;
      s.onload = res;
      document.body.appendChild(s);
    });
  }
  function loadCSS(href) {
    const l = document.createElement('link');
    l.rel = 'stylesheet'; l.href = href;
    document.head.appendChild(l);
  }

  async function initEffects() {
    // AOS
    loadCSS('https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css');
    await loadScript('https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js');

    // Rellax
    await loadScript('https://cdnjs.cloudflare.com/ajax/libs/rellax/1.12.1/rellax.min.js');

    // AOS init
    AOS.init({ duration:1200, easing:'ease-in-out', once:false, mirror:true });

    // Rellax init
    new Rellax('.rellax', { speed:-2, center:true, round:true });

    // Loader ausblenden
    setTimeout(() => loader.remove(), 2000);

    // Demo-Elemente hinzufügen
    const demo = document.createElement('div');
    demo.id = 'demo-effects';
    demo.innerHTML = `
      <div data-aos="fade-up" style="padding:20px; color:#0ff; font-size:1.2rem; text-align:center;">
        🎉 AOS Fade-Up Demo 🎉
      </div>
      <div class="rellax" data-rellax-speed="-3"
           style="margin-top:30px; height:200px; background:url('https://picsum.photos/800/400') no-repeat center/cover; border-radius:8px;">
      </div>`;
    document.body.appendChild(demo);
  }

  initEffects();

})();
欢迎访问Greasy Fork镜像
