Home
Imagem-Perfil-Circulo com Efeitos

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": "circle-basic",
	"hoverEffect": "circle-move",
	"hoverItemMove": false,
	"defaultCursor": false,
	"outerWidth": 41,
	"outerHeight": 41
      };
    magicMouse(options);
</script>

CSS do Site

				
					@media only screen and (min-width: 1367px) {
	body #magicMouseCursor {
	  z-index:10000000!important;
	  position: fixed;
	  width: 35px;
	  height: 35px;
	  border: 1px solid #fff;
	  background: rgba(0,0,0,0.2);
	  border-radius: 50%;
	  z-index: 9999;
	  left: 0;
	  top: 0;
	  transition: transform 0.07s, width 0.3s, height 0.3s;
	  pointer-events: none; }
	  body #magicMouseCursor.cursor-square {
		border-radius: 0; }

	body #magicPointer {
	  z-index:10000000!important;
	  height: 5px;
	  width: 5px;
	  top: 0;
	  left: 0;
	  position: fixed;
	  background: red;
	  border-radius: 50%;
	  pointer-events: none;
	  transition: background 0.2s, width 0.2s, height 0.2s, box-shadow 0.2s; }
	  body #magicPointer.is-hover {
		background: #fff; }
	  body #magicPointer.pointer-blur {
		height: 50px;
		width: 50px;
		background: none;
		border: 1px solid #fff;
		box-shadow: 0px 0px 15px -5px white; }
	  body #magicPointer.pointer-overlay {
		height: 50px;
		width: 50px;
		mix-blend-mode: difference;
		box-shadow: 0px 0px 15px -5px white; }

	body .magic-hover {
	  transition: all 0.2s; }
	  body .magic-hover:hover {
		cursor: none!important; }
}
				
			

CSS Class

				
					magic-hover magic-hover__square
				
			

TESTE POPUP

Recupere seu investimento

Depois de passar pelas aulas principais, você estará pronto para conquistar clientes e começar a oferecer serviços. Acredite ou não, com apenas um site, que pode ser criado em cerca de 2 a 3 dias, você já terá a chance de recuperar o investimento feito no curso!