Share Hiệu ứng con trỏ chuột màu mè cho anh em Wordpress.

Thấy một số hiệu ứng đẹp , mà mè mà có người lại thích Hôm nay share lại cho anh em nào cần vô lấy nhé

Share Hiệu ứng con trỏ chuột màu mè cho anh em WordPress

Thống kê bài viết

Nhìn qua em nó phát xem có thích ko đã nhé

Share Hiệu ứng con trỏ chuột màu mè cho anh em WordPress

Cách chèn Hiệu ứng con trỏ chuột

OK vào việc luôn nhé , Cho code sau vào Function.php của theme đang dùng nhé :

function con_tro_chuot(){
?>    
<div class="con-tro-chuot-outline"></div>
<div class="con-tro-chuot"></div>
<style>
.con-tro-chuot, .con-tro-chuot-outline { z-index: 99999999; pointer-events: none; position: absolute; top: 50%; left: 50%; border-radius: 50%; opacity: 0; transform: translate(-50%, -50%); transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; } .con-tro-chuot { width: 8px; height: 8px; background-color: #dc5656; } .con-tro-chuot-outline { width: 40px; height: 40px; background-color: rgba(229, 128, 128, 0.5); }    
</style> 
<script>
var cursor={delay:8,_x:0,_y:0,endX:window.innerWidth/2,endY:window.innerHeight/2,cursorVisible:!0,cursorEnlarged:!1,$dot:document.querySelector(".con-tro-chuot"),$outline:document.querySelector(".con-tro-chuot-outline"),init:function(){this.dotSize=this.$dot.offsetWidth,this.outlineSize=this.$outline.offsetWidth,this.setupEventListeners(),this.animateDotOutline()},setupEventListeners:function(){var t=this;document.querySelectorAll("a").forEach((function(e){e.addEventListener("mouseover",(function(){t.cursorEnlarged=!0,t.toggleCursorSize()})),e.addEventListener("mouseout",(function(){t.cursorEnlarged=!1,t.toggleCursorSize()}))})),document.addEventListener("mousedown",(function(){t.cursorEnlarged=!0,t.toggleCursorSize()})),document.addEventListener("mouseup",(function(){t.cursorEnlarged=!1,t.toggleCursorSize()})),document.addEventListener("mousemove",(function(e){t.cursorVisible=!0,t.toggleCursorVisibility(),t.endX=e.pageX,t.endY=e.pageY,t.$dot.style.top=t.endY+"px",t.$dot.style.left=t.endX+"px"})),document.addEventListener("mouseenter",(function(e){t.cursorVisible=!0,t.toggleCursorVisibility(),t.$dot.style.opacity=1,t.$outline.style.opacity=1})),document.addEventListener("mouseleave",(function(e){t.cursorVisible=!0,t.toggleCursorVisibility(),t.$dot.style.opacity=0,t.$outline.style.opacity=0}))},animateDotOutline:function(){var t=this;t._x+=(t.endX-t._x)/t.delay,t._y+=(t.endY-t._y)/t.delay,t.$outline.style.top=t._y+"px",t.$outline.style.left=t._x+"px",requestAnimationFrame(this.animateDotOutline.bind(t))},toggleCursorSize:function(){var t=this;t.cursorEnlarged?(t.$dot.style.transform="translate(-50%, -50%) scale(0.75)",t.$outline.style.transform="translate(-50%, -50%) scale(1.5)"):(t.$dot.style.transform="translate(-50%, -50%) scale(1)",t.$outline.style.transform="translate(-50%, -50%) scale(1)")},toggleCursorVisibility:function(){var t=this;t.cursorVisible?(t.$dot.style.opacity=1,t.$outline.style.opacity=1):(t.$dot.style.opacity=0,t.$outline.style.opacity=0)}};cursor.init();
</script>   
<?php    
}
add_action('wp_footer','con_tro_chuot',1000);

function con_tro_chuot(){

<style>

.con-tro-chuot, .con-tro-chuot-outline { z-index: 99999999; pointer-events: none; position: absolute; top: 50%; left: 50%; border-radius: 50%; opacity: 0; transform: translate(-50%, -50%); transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; } .con-tro-chuot { width: 8px; height: 8px; background-color: #dc5656; } .con-tro-chuot-outline { width: 40px; height: 40px; background-color: rgba(229, 128, 128, 0.5); }

</style>