☰

3D Translucent Browser Tabs

Adiciona efeito 3D translúcido às abas do navegador

当前为 2025-01-31 提交的版本，查看 最新版本。

// ==UserScript==
// @name         3D Translucent Browser Tabs
// @namespace    http://tampermonkey.net/
// @version      1.2
// @description  Adiciona efeito 3D translúcido às abas do navegador
// @author       EmersonxD
// @match        *://*/*
// @grant        GM_addStyle
// ==/UserScript==

(function() {
    'use strict';

    // Adiciona os estilos CSS necessários
    GM_addStyle(`
        /* Efeito 3D na janela inteira */
        html {
            transform-style: preserve-3d;
            perspective: 1000px;
            background: transparent !important;
            overflow: hidden;
        }

        body {
            transform: translateZ(0px);
            backface-visibility: visible;
            transform-style: preserve-3d;
            transition: transform 0.2s ease-out;
            background: rgba(255, 255, 255, 0.85) !important;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            box-shadow: 0 0 20px rgba(0,0,0,0.1);
            overflow: hidden;
        }

        /* Evitar efeito em elementos específicos */
        iframe, video, canvas, img {
            transform: none !important;
        }
    `);

    // Variável para controlar a intensidade do efeito
    const intensity = 30; // Ajuste este valor para controlar a intensidade do efeito

    // Função para aplicar efeito 3D ao mover o mouse
    function apply3DEffect(e) {
        const body = document.body;
        const rect = body.getBoundingClientRect();
        const mouseX = e.clientX - rect.left;
        const mouseY = e.clientY - rect.top;

        const centerX = rect.width / 2;
        const centerY = rect.height / 2;

        const angleX = (mouseY - centerY) / intensity;
        const angleY = (centerX - mouseX) / intensity;

        // Usando requestAnimationFrame para otimizar a animação
        requestAnimationFrame(() => {
            body.style.transform = `translateZ(20px) rotateX(${angleX}deg) rotateY(${angleY}deg)`;
        });
    }

    // Adiciona listener para movimento do mouse
    document.addEventListener('mousemove', apply3DEffect);

    // Reseta a transformação quando o mouse sai da janela
    document.addEventListener('mouseleave', () => {
        requestAnimationFrame(() => {
            document.body.style.transform = 'translateZ(0px)';
        });
    });

})();