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é

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
- Hostvn Black Friday 2022 – Giảm giá lên đến 79% 09/2023
- [hỏi đáp] Hiện thị thông tin bên dưới sản phẩm bằng hook trong wooce wordpress 09/2023
- Share theme du lịch Travlio – Travel Booking WordPress Theme 09/2023
- Webico Slider Flatsome Addons – tạo Slider đẹp cho Flatsome 09/2023
- Chuyển Widgets mới về phiên bản cũ cho WordPress 5.8 09/2023
- Hiệu ứng tab hình ( bài 1) – Tab Gallery trong wordpres 09/2023