Botão Inteligente com Delay
Classes utilizadas h6{ color:white; } Código JS <style> .oculto { display: none; } </style> <script> document.addEventListener(“DOMContentLoaded”, () => { const TEMPO_LIMITE = 660; // 11 minutos em segundos const SELECIONAR_ELEMENTO = ‘.oculto’; let tempoJaDecorrido = JSON.parse(localStorage.getItem(‘tempoDecorrido’)) || 0; let botaoJaExibido = JSON.parse(localStorage.getItem(‘botaoExibido’)) || false; // Função para exibir os elementos com a classe .oculto function […]
Carrossel passa com o Scroll
Classes utilizadas slide scroller Código JS <script src=”https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js”></script> <script src=”https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js”></script> <script> const slides = document.querySelectorAll(‘.slide’); let isMobile = window.innerWidth mobile slides.forEach((slide, i) => { let angle = isMobile ? i * 10 : (i * 14) – 10; gsap.to(slide, { rotation: angle, transformOrigin: “0% 2300px”, }); }); let speed = isMobile ? 50 : 20; […]
Scroll Horizontal WordPress Elementor
Código CSS selector, .slider{ transition: 0s; overscroll-behavior: none; } Código JS <script src=”https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js”></script> <script src=”https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js”></script> <script> function iniciarGsap(){ let telaAtual = window.innerWidth let slider = document.querySelector(“.slider”); let sections = gsap.utils.toArray(“.secao”); ScrollTrigger.killAll(); let sliderTl = gsap.timeline({ defaults: { ease: “none” }, scrollTrigger:{ trigger: slider, pin: true, scrub: 2, end: () => { if(telaAtual > 1024){ return […]
Bordas Arredondadas Internas com CSS
Código CSS – Container Subir .contSubir:before{ content: “”; width: 20px; height: 20px; position: absolute; background-color: transparent; border: none; border-radius: 50%; top: 0; left: 0; box-shadow: -10px -10px 0px #222222 } .contSubir:after{ content: “”; width: 20px; height: 20px; position: absolute; background-color: #222222; border: none; border-radius: 50%; bottom: 0; right: -20px; box-shadow: -10px 10px 0px white } […]
Cursor Neon
Código HTML Código CSS *{ padding: 0; margin: 0; } #cursorNeon{ width: 100%; height: 100vh; } #app { overflow: hidden; } #cursorNeon canvas { display: block; position: fixed; z-index: -1; top: 0; } Código JS <script type=”module”> import { neonCursor } from ‘https://unpkg.com/threejs-toys@0.0.8/build/threejs-toys.module.cdn.min.js’; neonCursor({ el: document.getElementById(‘cursorNeon’), shaderPoints: 16, curvePoints: 80, curveLerp: .8, radius1: 5, radius2: […]
Slider Colorado
Código CSS /* LATAS */ .lataSlider{ transform: translateY(220%); transition: all 0s; } .lataSlider.ativo{ position: static; transition: all .6s .3s ease-out; transform: translateY(0%); } .lataSlider.lataSubiu{ transition: all .6s ease-in; transform: translateY(-220%); } /* CONTAINER ESQUERDA */ .containerEsquerda{ transition: all .6s; opacity: 0; z-index: -1; } .containerEsquerda.ativo{ position: static; transform: translateX(0%); transition: all .6s; opacity: 1; } […]
Efeito Hover em Cards
Código CSS .card{ transition: all .3s } .containerCards:hover .card{ opacity: .5; filter: blur(6px) saturate(0); scale: .95; transform: translatey(12px); } .containerCards .card:hover{ opacity: 1; transform: translatey(-20px); filter: blur(0px); scale: 1.1 }
Barra branca lateral
Código CSS html, body{ overflow-x: hidden; }
Slider Interativo Responsivo
CSS Container Pai (as-slider) selector{ background: #fff; –background-speed: 0.5s; } selector .elementor-background-slideshow{ display: none; } selector .as-slider-background, selector .as-slider-background img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: all 1s ease-in-out; } selector .as-slider-background img{ object-fit: cover; opacity: 0; transform: scale(1.1); } selector .as-slider-background img.prev, selector .as-slider-background img.currentBackward, selector .as-slider-background img.currentForward{ opacity: […]
Menu Lateral Interativo
Código JS para colar no Widget HTML <script> const controle = document.querySelector("#controle"); const menuLateral = document.getElementById("menuLateral"); const menuMobile = document.querySelector(".menuMobile"); const secoes = document.querySelectorAll(".secao"); const itensLista = document.querySelectorAll(".listaNav a"); console.log(itensLista) controle.onclick = () => { menuLateral.classList.toggle("ativo"); }; if (window.innerWidth < 767) { menuLateral.classList.remove("ativo"); document.addEventListener("click", (event)=>{ let widthMenu = menuLateral.contains(event.target); let widthBotaoMenu = menuMobile.contains(event.target); if(!widthMenu && […]
