3D Translucent Browser Tabs

Greasy Fork is available in English.
3D Translucent Browser Tabs

Adiciona efeito 3D translúcido às abas do navegador
Bir soru sorun, yorum yayınlayın veya komut dosyasını bildirin.
Satırları kaydır
// ==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)';
        });
    });

})();