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é 🙂
CÓ THỂ BẠN QUAN TÂM
- Plugin Hủy kích hoạt và vô hiệu hóa các widget không dùng trong WordPress
- Tặng Free domain .site hoàn toàn miễn phí
- Theme divi cật nhật theme wordpress đẹp
- Kick hoạt Variation Swatches for WooCommerce mặc định của flatsome
- Hiển thị số lượng sản phẩm đã bán trong Woocommerce wordpress
- Sale 11.11 giảm 68% tại interdata.vn