Card Hover com Informações
Código para ser inserido no body – end <script> ;(function(){ let chck_if_gsap_loaded = setInterval(function(){ const eleBuilder = document.querySelector(‘body’).classList.contains("elementor-editor-active"); if(window.gsap && window.ScrollTrigger && !eleBuilder){ gsap.registerPlugin(ScrollTrigger); hover_card() clearInterval(chck_if_gsap_loaded); } }, 500); function hover_card() { const cardContainers = document.querySelectorAll(".card-container"); cardContainers.forEach((cardContainer) => { let tl = gsap.timeline({ paused: true, timeScale: 4 }); tl.to(cardContainer.querySelector(".card-overlay"), { backgroundColor: "rgba(0, 0, 0, 0.8)", […]
Efeito Card 3D Hover
CSS Containert Card .card3d { height: 360px; width: 300px; transform-style: preserve-3d; transition: all 0.8s ease; } selector:hover{ transform: rotatey(180deg) } CSS Containert Frente .cardfrente{ height: 100%; backface-visibility: hidden; } CSS Containert Frente .cardback{ height: 100%; backface-visibility: hidden; transform: rotatey(180deg); }
Campos Personalizados
CSS para alterra cor da borda .wcpa_wrap .wcpa_field_wrap input[type=text]:focus { border-color: #6b6b6b !important; }
Mudança de Cor Dinâmica
CSS para inserir no elemento @media (min-width: 1400px) { selector { position: fixed; top: 30px; left: 30px; mix-blend-mode: difference; }
Formulário Elementor PRO
JavaScript para colar no Widget HTML (Formato Telefone) <script type="text/javascript"> /* Máscaras ER */ function mascara(o,f){ v_obj=o v_fun=f setTimeout("execmascara()",1) } function execmascara(){ v_obj.value=v_fun(v_obj.value) } function mtel(v){ v=v.replace(/D/g,""); //Remove tudo o que não é dígito v=v.replace(/^(d{2})(d)/g,"($1) $2"); //Coloca parênteses em volta dos dois primeiros dígitos v=v.replace(/(d)(d{4})$/,"$1-$2"); //Coloca hífen entre o quarto e o quinto dígitos return […]
Botão Pulsar
Pulsar Padrão selector .elementor-button { animation: pulse 2s ease infinite } selector .elementor-button:hover { animation-play-state: paused } Efeito Neon selector .elementor-button { animation: pulsarneon 3s ease; animation-iteration-count: infinite } @keyframes pulsarneon { 0% { box-shadow: 0px 0px 0px 0px #D201FF, 0px 0px 0px 0px #0C18FF; } 50% { box-shadow: -6px -6px 40px 0px #D201FF, 6px […]
Efeito Degradê Animado
CSS Hover com Sombras 3D .elementor-button:hover { background: linear-gradient(123deg, #ff0000, #ff00bd, #005fff, #72ff00); background-size: 800% 800%; -webkit-animation: AnimationName 30s ease infinite; -moz-animation: AnimationName 30s ease infinite; animation: AnimationName 30s ease infinite; box-shadow: 0px 11px 20px 0px rgba(0, 0, 0, 0.25), 0px -7px 7px 0px rgba(0, 0, 0, 0.25) inset, 0px 4px 6px 0px rgba(255, 255, […]
Efeito de Ruído
Código HTML Código CSS .ruido { display: block; width: 100vw; height: 100vh; opacity: .17; background-image: url(‘LINK AQUI’); overflow: hidden; position: fixed; top: 0; left: 0; pointer-events: none; z-index: 1; mix-blend-mode: plus-lighter; //opcional
Efeito Parallax
Código CSS Flutuação selector { animation: flutuacao 12s; animation-iteration-count: infinite; } @keyframes flutuacao { 0% { transform: translatey(20px) rotate(5deg); } 50% { transform: translatey(-10px) rotate(-5deg); } 100% { transform: translatey(20px) rotate(5deg); } }
Slider de Imagens Automático
Código CSS selector{ –direction: 1; –speed: 50; –image-aspect-ratio: false; –pause-on-hover: true; –pause-on-hover-mobile: false; } selector{ visibility: hidden; overflow: hidden; } selector.showing{ visibility: visible; } selector .e-con, selector .e-container{ -webkit-animation: sliding calc(var(–est-speed,10) * 1s * 50 / var(–speed)) linear infinite; -moz-animation: sliding calc(var(–est-speed,10) * 1s * 50 / var(–speed)) linear infinite; -o-animation: sliding calc(var(–est-speed,10) * 1s […]
