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

TigerDao · 17/9/22

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

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);

Với hiệu ứng sẽ tạo phong cách riêng cho web của bạn nhé

Cảm ơn bác @Lân – https://abweb.vn/ Đã chia sẽ nhé

Điểm 5/5 - ( Có 1 bình chọn)

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

TigerDao

Administrator