Sessões – Cards
FILTROS Seu navegador não suporta vídeo HTML5. Card com Hover Copiar Sessão Seu navegador não suporta vídeo HTML5. Card usuários com Hover Copiar Sessão Seu navegador não suporta vídeo HTML5. Card com efeito Hover Copiar Sessão Seu navegador não suporta vídeo HTML5. Card Degrade + Botão Copiar Sessão Seu navegador não suporta vídeo HTML5. Card Empilhado Copiar Sessão Seu navegador não suporta vídeo HTML5. Cards Subindo Scroll Copiar Sessão Cards Depoimentos Copiar Sessão Cards Depoimentos Copiar Sessão Cards Porcentagens Copiar Sessão Cards Horizontal Copiar Sessão
Sessões – Hero
FILTROS Hero [PG 009] Copiar Sessão Hero [PG 008] Copiar Sessão Hero [PG 008] Copiar Sessão Hero [PG 007] Copiar Sessão Hero [PG 006] Copiar Sessão Hero [Garage One] Copiar Sessão Hero [PG 004] Copiar Sessão Hero [PG 001] Copiar Sessão Hero Arsenal Copiar Sessão
Sessões – Entregáveis
FILTROS Entregáveis [001] Copiar Sessão Entregáveis [002] Copiar Sessão Entregáveis [003] Copiar Sessão Entregáveis [004] Copiar Sessão Entregáveis [005] Copiar Sessão Entregáveis [006] Copiar Sessão Entregáveis [007] Copiar Sessão Entregáveis [008] Copiar Sessão Entregáveis [009] Copiar Sessão Entregáveis [010] Copiar Sessão Entregáveis [011] Copiar Sessão
[Animação] Luz ao Hover
[Animação] Luz ao Hover Para aplicar esse efeito de animação, basta colocar o código CSS (abaixo) de qualquer widget (recomendo usar uma imagem) Defina em Avançado/Classe CSS: glow Código CSS Copiar Código .glow { position: relative; /* ESSENCIAL para posicionar a luz */ overflow: hidden; /* Garante que a luz não saia dos limites do widget antes do hover */ z-index: 1; /* Garante que o conteúdo do widget fique acima da luz */ /* A transição aplica-se ao próprio widget e também ao pseudo-elemento */ transition: all 0.5s ease-out; } /* Pseudo-elemento para criar a luz */ .glow::before { content: “”; position: absolute; top: 0px; /* Ajuste a posição para cobrir o widget */ left: 0px; right: 0px; bottom: 0px; z-index: -1; /* Fica atrás do conteúdo principal do widget */ border-radius: inherit; /* Herda o arredondamento do widget, se houver */ /* Inicia com a sombra transparente (invisível) */ box-shadow: 0 0 0px 0px rgba(0, 255, 115, 0); /* Verde transparente inicial */ /* Transição para a luz */ transition: box-shadow 0.6s ease-in-out, transform 0.3s ease-in-out; } /* Efeito de luz ao passar o mouse (hover) */ .glow:hover::before { /* A luz verde aparece e se espalha */ box-shadow: 0 0 25px 8px rgba(0, 255, 115, 0.7), /* Luz mais intensa no centro */ 0 0 50px 15px rgba(0, 255, 115, 0.4); /* Luz mais suave para fora */ /* Opcional: faz o widget “flutuar” um pouco para dar mais vida */ transform: scale(1.01); } /* Opcional: remove o overflow no hover para alguns efeitos */ .glow:hover { overflow: visible; }
[Animação] Up Mouse Hover v2
[Animação] Up Hover v2 Para aplicar esse efeito de animação, basta colocar o código CSS (abaixo) de qualquer widget (recomendo usar uma imagem) Defina em Avançado/Classe CSS: hover-topo Código CSS Copiar Código .uphoverv2{ transition: 0.4s ease-out; /* Transição mais rápida */ } .uphoverv2:hover{ transform: translatey(-25px); /* Move 25px para cima */ }
[Animação] Up Mouse Hover
[Animação] Up Hover Para aplicar esse efeito de animação, basta colocar o código CSS (abaixo) de qualquer widget (recomendo usar uma imagem) Defina em Avançado/Classe CSS: uphover Código CSS Copiar Código .uphover{ transition: 0.7s ease-out; /* Tempo de animação mais rápido e suave */ } .uphover:hover{ transform: translatey(-30px) rotate(-8deg); /* Move 30px para cima e rotaciona 8 graus no sentido anti-horário */ }
[Animação] Flutuar 3D
[Animação] Flutuar 3D Para aplicar esse efeito de animação, basta colocar o código CSS (abaixo) de qualquer widget (recomendo usar uma imagem) Defina em Avançado/Classe CSS: flutuar-3d Código CSS Copiar Código .flutuar-3d { animation: flutuar3d 3s ease-in-out infinite; transform-style: preserve-3d; } @keyframes flutuar3d { 0%, 100% { transform: rotateX(20) rotateY(60) translateY(20); } 50% { transform: rotateX(6deg) rotateY(-60deg) translateY(-20px); } }
[Animação] Girar + Pausas
[Animação] Girar + Pausas Para aplicar esse efeito de animação, basta colocar o código CSS (abaixo) de qualquer widget (recomendo usar uma imagem) Defina em Avançado/Classe CSS: girar-com-pausas Código CSS Copiar Código .girar-com-pausas { animation: girarComPausas 4s ease-in-out infinite; } @keyframes girarComPausas { 0% { transform: rotate(0deg); } 40% { transform: rotate(180deg); } 60% { transform: rotate(180deg); } /* pausa */ 100% { transform: rotate(360deg); } }
[Animação] Flutuar Diagonal
[Animação] Flutuar Diagonal Para aplicar esse efeito de animação, basta colocar o código CSS (abaixo) de qualquer widget (recomendo usar uma imagem) Defina em Avançado/Classe CSS: flutuar-diagonal Código CSS Copiar Código .flutuar-diagonal { animation: flutuarDiagonal 4s ease-in-out infinite; } @keyframes flutuarDiagonal { 0% { transform: translate(0, 0); } 50% { transform: translate(-70px, -70px); } 100% { transform: translate(0, 0); } }
[Animação] Flutuar Suave
[Animação] Flutuar Suave Para aplicar esse efeito de animação, basta colocar o código CSS (abaixo) de qualquer widget (recomendo usar uma imagem) Defina em Avançado/Classe CSS: flutuar-suave Código CSS Copiar Código .flutuar-suave { animation: flutuarSuave 4s ease-in-out infinite; } @keyframes flutuarSuave { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-60px); } }