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 […]
Card Mágico
Código CSS Testimonial Carousel selector{ –first-color: #5ddcff; –second-color: #3c67e3; –third-color: #4e00c2; } @property –rotate { syntax: “”; initial-value: 132deg; inherits: false; } selector::before, selector::after{ opacity: 0; content: “”; transition: all 0.5s ease-in-out; } selector:hover::before, selector:hover::after{ position: absolute; z-index: -1; background-image: linear-gradient( var(–rotate) , var(–first-color), var(–second-color) 43%, var(–third-color)); animation: spin 2.5s linear infinite; opacity: 1; } […]
Barra de Rolagem em Textos
Código CSS Testimonial Carousel selector .swiper-slide[data-swiper-slide-index=”2″] .elementor-testimonial__text{ padding-right:20px; height: 200px; overflow-y: scroll; overflow-x: hidden; } .swiper-slide[data-swiper-slide-index=”2″] .elementor-testimonial__text::-webkit-scrollbar { width: 6px; } .swiper-slide[data-swiper-slide-index=”2″] .elementor-testimonial__text::-webkit-scrollbar-thumb{ background: #616161; border-radius: 40px; } .swiper-slide[data-swiper-slide-index=”2″] .elementor-testimonial__text::-webkit-scrollbar-track { background:#dedede; border-radius: 40px; } CSS Texto Normal selector { height: 128px; overflow-y: scroll; overflow-x: hidden; padding-right: 20px; } .scrollbar::-webkit-scrollbar { width: 6px; } .scrollbar::-webkit-scrollbar-thumb{ […]
Botão Voltar ao Topo
Código JS <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> //You can replace offset value from here var offset = 300 $(window).on(‘load scroll’, function(){ if( $(window).scrollTop() > offset ){ $(‘body’).addClass(‘show’) }else{ $(‘body’).removeClass(‘show’) } }) </script> CSS Botão selector{ opacity: 0; transition: all 0.3s ease-in-out; } body.show selector{ opacity: 1; }
Borda Animada
CSS Borda Animada selector{ –animated-color-1: #c705fd; –animated-color-2: #2716ff; –border-width: 140px; } selector{ height: var(–c-height); } selector:before{ content: “”; position: absolute; inset: -140px var(–border-width); background: linear-gradient(315deg, var(–animated-color-1), var(–animated-color-2)); width: auto; height: auto; transition: all .3s; animation: animate 4s linear infinite; } @keyframes animate{ 0%{ transform: rotate(0deg); } 100%{ transform: rotate(360deg); } }
Texto Circular
CSS Texto Circular selector { animation: textoanim 20s linear infinite; } @keyframes textoanim { 0% { transform: rotate(0deg) ; } 100% { transform: rotate(360deg); }
Efeito Vidro
CSS Efeito vidro selector{ backdrop-filter: blur(5px); } CSS Completo com as Sombras selector{ backdrop-filter: blur(5px); box-shadow: -3px -5px 6px 0px rgba(0, 0, 0, 0.25) inset, 3px 5px 6px 0px rgba(255, 255, 255, 0.05) inset, 0px 24px 32px -8px rgba(0, 0, 0, 0.85); }
Partículas Animadas
HTML Partículas <style> .particles-js-canvas-el { width: 100%; height: 100%; position: absolute; z-index: -1; top: 0; left:0; } </style> <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script> <script> //JS Code Here </script>
Customização Barra de Rolagem
CSS Barra de Rolagem ::-webkit-scrollbar{ width: 0.9vw; background: #777; } ::-webkit-scrollbar-thumb{ background: -webkit-linear-gradient(transparent,#30ff00); background: linear-gradient(transparent,#30ff00); border-radius: 20px; } CSS Barra de Rolagem Hover ::-webkit-scrollbar:hover{ width: 0.9vw; background: #777; } ::-webkit-scrollbar-thumb:hover{ background: -webkit-linear-gradient(transparent,#30ff00); background: linear-gradient(transparent,#30ff00); border-radius: 20px; } CSS Barra de Rolagem Mozila Firefox /*Firefox Support*/ html{ scrollbar-width: thin; scrollbar-color: red green; }
Cursor personalizado
Java Script Head <script type="text/javascript"> "use strict";function magicMouse(e){if((e=e||{}).outerWidth=e.outerWidth||30,e.outerHeight=e.outerHeight||30,e.cursorOuter=e.cursorOuter||"circle-basic",e.hoverEffect=e.hoverEffect||"circle-move",e.hoverItemMove=e.hoverItemMove||!1,e.defaultCursor=e.defaultCursor||!1,"disable"!=e.cursorOuter){var t=document.createElement("div");t.setAttribute("id","magicMouseCursor"),document.body.appendChild(t);var r=document.getElementById("magicMouseCursor")}if(!e.defaultCursor){document.body.style.cursor="none";var s=document.createElement("div");s.setAttribute("id","magicPointer"),document.body.appendChild(s);var o=document.getElementById("magicPointer")}if(r){r.style.width=e.outerWidth+"px",r.style.height=e.outerHeight+"px";var i=e.outerWidth,a=e.outerHeight,n=e.outerWidth,c=e.outerHeight}var u=0,d=0,l=0,m=0,h=!1;document.addEventListener("mousemove",(function(e){l=e.clientX,m=e.clientY,setTimeout(()=>{h||(u=e.clientX-i/2,d=e.clientY-a/2)},50)})),document.querySelectorAll(".magic-hover").forEach((t,r)=>{t.addEventListener("mouseenter",r=>{switch(e.hoverEffect){case"circle-move":f(t),e.hoverItemMove&&b(r,t);break;case"pointer-blur":y(t,"pointer-blur");break;case"pointer-overlay":y(t,"pointer-overlay")}}),t.addEventListener("mouseleave",r=>{switch(t.style.transform="translate3d(0,0,0)",e.hoverEffect){case"circle-move":g();break;case"pointer-blur":p("pointer-blur");break;case"pointer-overlay":p("pointer-overlay")}})});var v=()=>{r&&(r.style.transform="matrix(1, 0, 0, 1, "+u+", "+d+")",r.style.width=i+"px",r.style.height=a+"px"),o&&(o.style.transform="matrix(1, 0, 0, 1, "+l+", "+m+") translate3d(-50%, -50%, 0)"),requestAnimationFrame(v)};requestAnimationFrame(v);const f=e=>{if(h=!0,r){r.style.transition="transform 0.2s, width 0.3s, height 0.3s, border-radius 0.2s",r.classList.add("is-hover");var t=event.currentTarget.getBoundingClientRect();e.classList.contains("magic-hover__square")?(r.classList.add("cursor-square"),u=t.left,d=t.top,i=t.width,a=t.height):(u=t.left,d=t.top,i=t.width,a=t.height)}o&&o.classList.add("is-hover")},g=()=>{h=!1,r&&(i=n,a=c,r.style.transition="transform 0.07s, width 0.3s, height 0.3s, border-radius 0.2s",r.classList.remove("cursor-square"),r.classList.remove("is-hover")),o&&o.classList.remove("is-hover")},y=(e,t)=>{o&&o.classList.add(t)},p=e=>{o&&o.classList.remove(e)},b=(e,t)=>{e.clientX,e.clientY,t.addEventListener("mousemove",e=>{t.style.transform="matrix(1,0,0,1,"+(e.offsetX-e.target.offsetWidth/2)/2+", "+(e.offsetY-e.target.offsetHeight/2)/2+")"})}} </script> JavaScript Body End <script type="text/javascript"> options = { "cursorOuter": […]
