O Image Scroll Elementor (Image Scroll Addon / Widget for Elementor) é um componente/extensão visual interativa para WordPress e Elementor, desenvolvido sob medida para agências de desenvolvimento web, designers de UI/UX, estúdios criativos, desenvolvedores de temas e criadores de landing pages que precisam apresentar capturas de tela compridas (full-page screenshots de websites, mockups de aplicativos móveis, documentos, cardápios ou infográficos longos) dentro de uma moldura compacta com rolagem vertical automática ou acionada pelo cursor do mouse sem ocupar espaço excessivo na página.
Destaques:
- Exibição Eficiente de Mockups e Páginas Longas (Frame Scrolling): Permite inserir capturas de tela inteiras de sites e aplicações dentro de uma janela de altura fixa, simulando navegadores web (browser frames), telas de laptops, monitores ou smartphones. A imagem oculta desliza de forma fluida de cima a baixo ao passar o cursor (hover) ou rolar a tela, revelando a totalidade do projeto sem alongar o layout da página.
- Integração Nativa com o Editor Visual do Elementor (Widget Dedicado): Adiciona um widget arrastar-e-soltar (drag-and-drop) diretamente ao painel do Elementor, permitindo carregar imagens da biblioteca de mídia do WordPress, calibrar velocidades de transição, definir alturas de corte e adicionar links externos ou internos diretamente pelas abas de controles nativos sem digitar código.
- Gatilhos e Mecanismos de Rolagem Configuráveis:
- Rolagem por Passagem do Mouse (Scroll on Hover): A imagem começa a deslizar automaticamente quando o visitante passa o cursor sobre a área do mockup e volta ao topo suavemente ao retirar o mouse;
- Rolagem Automática Contínua (Autoscroll / Loop): Deslocamento contínuo em loop infinito sem exigir interação do usuário, com opções de pausa ao passar o cursor (pause on hover);
- Rolagem Vinculada ao Scroll da Página (Page Scroll Sync): A imagem interna se desloca proporcionalmente conforme o usuário rola a própria página do site para baixo;
- Ajuste de Velocidade e Easing: Controles deslizantes para determinar a duração da transição (em segundos ou milissegundos) e a curva de aceleração (linear, ease-in, ease-out), garantindo movimentos suaves mesmo em imagens muito compridas.
- Molduras de Dispositivos e Opções de Estilização:
- Molduras de Navegador e Dispositivos (Device Mockups & Browser Frames): Opção de habilitar barras superiores de navegadores modernos (com botões estilizados de fechar/minimizar/expandir e barra de URL simulada) ou molduras de telas de computador e celular;
- Ações de Clique Flexíveis: O widget pode atuar como um botão de redirecionamento para o site real do projeto, abrir a imagem em tela cheia via lightbox ou disparar janelas modais com detalhes do caso de estudo;
- Badges e Etiquetas Sobrepostas: Suporte para adicionar emblemas dinâmicos nos cantos da moldura (ex: “Novo”, “Case Study”, “Landing Page”);
- Bordas, Arredondamentos e Sombras: Ajustes milimétricos de cantos arredondados (border radius), bordas sólidas e sombras projetadas (box shadows) para criar profundidade visual tridimensional.
- Performance Otimizada e Comportamento Responsivo:
- Comportamento Adaptativo para Telas Sensíveis ao Toque: Em dispositivos móveis e tablets (onde o evento de passar o mouse não existe), o widget permite alternar para rolagem contínua automática, rolagem por toque direto do dedo (touch swipe) ou desativação da animação mantendo uma altura estática;
- Renderização Leve via CSS3: Utiliza transições nativas de
transform: translateY()com aceleração por hardware gráfico (GPU), evitando travamentos na renderização, reduzindo o consumo de memória do navegador e mantendo a estabilidade nas métricas de Core Web Vitals.