Criar GIF no site

Claro! Abaixo está um script Tampermonkey que permite adicionar um GIF a qualquer site inserindo um link. O script cria uma interface flutuante onde você pode:

1. Inserir o URL do GIF.
2. Adicionar o GIF à página.
3. Arrastar para posicionar o GIF.
4. Redimensionar o GIF conforme necessário.

Passo a Passo para Usar o Script

1. Instale o Tampermonkey:

   • Chrome Web Store
   • Firefox Add-ons
   • Edge Add-ons

2. Adicione um Novo Script:

   • Abra o painel do Tampermonkey.
   • Clique em “Adicionar um novo script”.

3. Cole o Script Abaixo:

   • Substitua qualquer conteúdo existente pelo script fornecido.

4. Salve o Script:

   • Clique em “Arquivo” > “Salvar”.

5. Use o Script na Página Desejada:

   • Abra qualquer site.
   • Clique no botão flutuante para adicionar um GIF.

Código do Script Tampermonkey

javascript
// ==UserScript==
// @name         Adicionar GIF Personalizado
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Permite adicionar, posicionar e redimensionar GIFs em qualquer site usando um link.
// @author       Seu Nome
// @match        *://*/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Estilos para o botão e o modal
    const style = document.createElement('style');
    style.innerHTML = `
        #gifButton {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background-color: #008CBA;
            color: white;
            border: none;
            padding: 15px;
            border-radius: 50%;
            cursor: pointer;
            z-index: 10000;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            font-size: 16px;
        }

        #gifModal {
            display: none; 
            position: fixed; 
            z-index: 10001; 
            left: 0;
            top: 0;
            width: 100%; 
            height: 100%; 
            overflow: auto; 
            background-color: rgba(0,0,0,0.4); 
        }

        #gifModalContent {
            background-color: #fefefe;
            margin: 15% auto; 
            padding: 20px;
            border: 1px solid #888;
            width: 300px; 
            border-radius: 8px;
        }

        #gifModalContent input {
            width: 100%;
            padding: 8px;
            margin: 8px 0;
            box-sizing: border-box;
        }

        #gifModalContent button {
            background-color: #008CBA;
            color: white;
            padding: 10px;
            border: none;
            width: 100%;
            border-radius: 4px;
            cursor: pointer;
        }

        .draggable {
            position: absolute;
            cursor: move;
            z-index: 10002;
        }

        .resizer {
            width: 10px;
            height: 10px;
            background: #008CBA;
            position: absolute;
            right: 0;
            bottom: 0;
            cursor: se-resize;
        }
    `;
    document.head.appendChild(style);

    // Cria o botão para abrir o modal
    const gifButton = document.createElement('button');
    gifButton.id = 'gifButton';
    gifButton.innerHTML = 'GIF';
    document.body.appendChild(gifButton);

    // Cria o modal para inserir o link do GIF
    const gifModal = document.createElement('div');
    gifModal.id = 'gifModal';
    gifModal.innerHTML = `
        <div id="gifModalContent">
            <h3>Adicionar GIF</h3>
            <input type="text" id="gifURL" placeholder="Insira o URL do GIF" />
            <button id="addGifButton">Adicionar GIF</button>
        </div>
    `;
    document.body.appendChild(gifModal);

    // Evento para abrir o modal
    gifButton.addEventListener('click', () => {
        gifModal.style.display = 'block';
    });

    // Evento para fechar o modal ao clicar fora do conteúdo
    window.addEventListener('click', (e) => {
        if (e.target == gifModal) {
            gifModal.style.display = 'none';
        }
    });

    // Função para criar o GIF na página
    function createGif(url) {
        const gif = document.createElement('div');
        gif.classList.add('draggable');
        gif.style.left = '100px';
        gif.style.top = '100px';
        gif.style.width = '200px';
        gif.style.height = 'auto';

        const img = document.createElement('img');
        img.src = url;
        img.style.width = '100%';
        img.style.height = '100%';
        img.style.display = 'block';
        gif.appendChild(img);

        const resizer = document.createElement('div');
        resizer.classList.add('resizer');
        gif.appendChild(resizer);

        document.body.appendChild(gif);

        // Tornar o GIF arrastável
        dragElement(gif);

        // Tornar o GIF redimensionável
        resizer.addEventListener('mousedown', initResize, false);
    }

    // Evento para adicionar o GIF ao clicar no botão
    document.getElementById('addGifButton').addEventListener('click', () => {
        const url = document.getElementById('gifURL').value.trim();
        if (url) {
            createGif(url);
            document.getElementById('gifURL').value = '';
            gifModal.style.display = 'none';
        } else {
            alert('Por favor, insira um URL válido.');
        }
    });

    // Função para arrastar elementos
    function dragElement(elmnt) {
        let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
        elmnt.onmousedown = dragMouseDown;

        function dragMouseDown(e) {
            e.preventDefault();
            // Posição inicial do cursor
            pos3 = e.clientX;
            pos4 = e.clientY;
            document.onmouseup = closeDragElement;
            document.onmousemove = elementDrag;
        }

        function elementDrag(e) {
            e.preventDefault();
            // Calcula a nova posição
            pos1 = pos3 - e.clientX;
            pos2 = pos4 - e.clientY;
            pos3 = e.clientX;
            pos4 = e.clientY;
            // Define a nova posição
            elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
            elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
        }

        function closeDragElement() {
            document.onmouseup = null;
            document.onmousemove = null;
        }
    }

    // Função para redimensionar elementos
    let currentResizer;
    let original_width;
    let original_height;
    let original_x;
    let original_y;
    let original_mouse_x;
    let original_mouse_y;

    function initResize(e) {
        e.preventDefault();
        currentResizer = e.target.parentElement;
        original_width = parseFloat(getComputedStyle(currentResizer, null).getPropertyValue('width').replace('px', ''));
        original_height = parseFloat(getComputedStyle(currentResizer, null).getPropertyValue('height').replace('px', ''));
        original_x = currentResizer.getBoundingClientRect().left;
        original_y = currentResizer.getBoundingClientRect().top;
        original_mouse_x = e.clientX;
        original_mouse_y = e.clientY;
        window.addEventListener('mousemove', resize);
        window.addEventListener('mouseup', stopResize);
    }

    function resize(e) {
        const width = original_width + (e.clientX - original_mouse_x);
        const height = original_height + (e.clientY - original_mouse_y);
        if (width > 50) { // Tamanho mínimo
            currentResizer.style.width = width + 'px';
        }
        if (height > 50) { // Tamanho mínimo
            currentResizer.style.height = height + 'px';
        }
    }

    function stopResize() {
        window.removeEventListener('mousemove', resize);
        window.removeEventListener('mouseup', stopResize);
    }

})();

Como Funciona o Script

1. Botão Flutuante:

   • Um botão com o texto "GIF" aparece no canto inferior direito da página.
   • Ao clicar nele, abre-se um modal para inserir o URL do GIF.

2. Modal de Inserção:

   • Permite que você insira o link direto para o GIF que deseja adicionar.
   • Após inserir o URL e clicar em "Adicionar GIF", o GIF será inserido na página.

3. Posicionamento e Redimensionamento:

   • Arrastar: Clique e segure o GIF para movê-lo para a posição desejada.
   • Redimensionar: Clique e arraste o quadrado no canto inferior direito do GIF para redimensioná-lo.

Considerações Finais

• Compatibilidade: O script foi testado na maioria dos navegadores modernos suportados pelo Tampermonkey.
• Estilos: Você pode personalizar os estilos do botão, modal e GIF alterando as seções de CSS dentro do script.
• Segurança: Certifique-se de inserir apenas URLs de GIFs confiáveis para evitar problemas de segurança ou desempenho.

Se tiver alguma dúvida ou precisar de ajustes adicionais, sinta-se à vontade para perguntar!