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é
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é :
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
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é 🙂
.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); }
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();
