Ferramenta de Comparação de Imagens Antes/Depois com o Grape.js
Se alguma vez precisou de uma forma rápida de criar secções de imagens de Antes/Depois para estudos de caso, portfólios, imóveis ou renovações de produtos, este projeto é para si.
Criei uma ferramenta gratuita de página única que permite criar secções de comparação de imagens utilizando o GrapesJS, um editor HTML visual de arrastar e largar. O objetivo: simplificar ao máximo a montagem de uma página (ou secção) com um par de imagens "Antes/Depois" e, em seguida, exportar o HTML pronto para produção.
Nota importante: esta é uma ferramenta de criação, não uma visualização em direto. Dentro do editor, o bloco de comparação é intencionalmente não interativo; as duas imagens são empilhadas para facilitar a seleção e a substituição.
O comportamento interativo do deslizador (arrastar para revelar) está programado para ser executado no HTML exportado. Por outras palavras: crie no editor e interaja após a exportação.
Como funciona:
Comece com um ecrã GrapesJS que já inclua um bloco de comparação de imagens pronto para edição (Antes/Depois).
Substitua as imagens pelas suas (faça o upload ou defina os URLs).
Opcionalmente, adicione títulos, texto, botões ou quaisquer outros componentes GrapesJS para criar uma página completa.
Quando terminar, exporte como um ZIP com recursos. Abra esse ficheiro num navegador e o controlo deslizante tornar-se-á interativo.
Porquê esta abordagem? Manter o editor em "modo de criação" evita interações acidentais que perturbam a seleção/substituição de imagens.
Isto também garante que a página exportada é limpa e previsível: sem scripts de editor, apenas HTML/CSS/JS padrão que pode alojar em qualquer lugar.
Este projeto é gratuito para utilização e download no meu site. Foi criado com HTML, CSS, JavaScript, jQuery, Hammer.js e GrapesJS (sem Vue ou frameworks pesadas).
Utilize-o como ponto de partida para as suas próprias galerias de antes/depois ou expanda-o com blocos adicionais.
Ferramenta de Comparação de Imagens Antes/Depois
Veja aqui a demonstração
Download
