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
				
			

Torne-se um WebDesigner de Sucesso!

Pré-cadastro comunidade webhub

Obrigado!

Recebemos suas informações com sucesso! Vamos cadastrá-lo em nosso sistema de WebDesigners da WebHub e, em breve, notificaremos você sobre novos projetos.

Obrigado!

Recebemos suas informações com sucesso e estamos prontos para dar o próximo passo no seu projeto. Em breve, você receberá uma mensagem no WhatsApp ou Email para que possamos discutir os detalhes do desenvolvimento do seu site.

Recupere seu investimento

Se você for um completo iniciante, levará em média 1 a 2 meses para assistir todas as aulas básicas. Após isso, já estará apto a conseguir seus primeiros clientes. Acredite ou não, com apenas um site, que pode ser criado em 2 ou 3 dias, você já terá a chance de recuperar seu investimento com a comunidade!