Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated
Hiệu ứng này tạo thêm tương tác cho con trỏ chuột, nó thay đổi khi bạn di chuyển chuột vào một liên kết hoặc một khu vực nào đó do bạn quyết định làm cho trang web của bạn thêm phần thú vị.
Bài viết này mình sẽ chia sẻ mọi người một hiệu ứng khá thú vị mà mình đang sử dụng ngay trên blog của mình. Hướng dẫn các bạn làm theo các bước bên dưới nhé!
Bước 1: Thêm code html sau vào sau thẻ <body> hoăc trước thẻ </body>.
<div class='mouse-cursor cursor-outer'></div> <div class='mouse-cursor cursor-inner'></div>
Bước 2: Thêm code css sau vào trong theme của bạn thường ở giữa thẻ <body>...</body> hoặc <head>...</head> tuỳ theo trang web của bạn.
<style>
.mouse-cursor{position:fixed;left:0;top:0;pointer-events:none;border-radius:50%;-webkit-transform:translateZ(0);transform:translateZ(0);visibility:hidden}
.cursor-inner{margin-left:-3px;margin-top:-3px;width:6px;height:6px;z-index:10000001;background-color:#CED0D4;-webkit-transition:width .3s ease-in-out,height .3s ease-in-out,margin .3s ease-in-out,opacity .3s ease-in-out;transition:width .3s ease-in-out,height .3s ease-in-out,margin .3s ease-in-out,opacity .3s ease-in-out}
.cursor-inner.cursor-hover{margin-left:-30px;margin-top:-30px;width:60px;height:60px;background-color:#CED0D4;opacity:.3}
.cursor-outer{margin-left:-15px;margin-top:-15px;width:30px;height:30px;border:2px solid #CED0D4;-webkit-box-sizing:border-box;box-sizing:border-box;z-index:10000000;opacity:.5;-webkit-transition:all .08s ease-out;transition:all .08s ease-out}
.cursor-outer.cursor-hover{opacity:0}
</style>
Bước 3: Chèn script sau trước thẻ đóng </body>.
<script>//<![CDATA[
$(function () {
'use strict';
var screenWidth = $(window).width();
if (screenWidth > 991) {
var myCursor = jQuery('.mouse-cursor');
if (myCursor.length) {
if ($("body")) {
const e = document.querySelector(".cursor-inner"),
t = document.querySelector(".cursor-outer");
let n, i = 0,
o = !1;
window.onmousemove = function (s) {
o || (t.style.transform = "translate(" + s.clientX + "px, " + s.clientY + "px)"), e.style.transform = "translate(" + s.clientX + "px, " + s.clientY + "px)", n = s.clientY, i = s.clientX
}, $("body").on("mouseenter", "a, .cursor-pointer", function () {
e.classList.add("cursor-hover"), t.classList.add("cursor-hover")
}), $("body").on("mouseleave", "a, .cursor-pointer", function () {
$(this).is("a") && $(this).closest(".cursor-pointer").length || (e.classList.remove("cursor-hover"), t.classList.remove("cursor-hover"))
}), e.style.visibility = "visible", t.style.visibility = "visible"
}
}
}
//]]></script>
Phần này các bạn lưu ý thêm class cursor-pointer vào vị trí bạn muốn thêm hiệu ứng khi di chuyển chuột vào.
Bước 4: Lưu thay đổi là xong.
Your email address will not be published.
Enter Image URL / Code Snippets / Quotes / name tag, then click parse button accordingly that you have entered. then copy the parse result and paste it into the comment field.
chả làm được ad ơi
Trả lời XóaBạn xem lại làm đúng theo hướng dẫn.
Trả lời Xóacode bị dì rồi ad ơi. em chèn code vào mà ấy không được nó ko hiện. mong ad giúp.
Trả lời Xóahazzz bước 3 có khúc đọc chả hiểu ad ơi. ko được
Trả lời XóaNó giống như thẻ a vậy mặc định nó là cursor pointer bạn thêm class đó vào những vị trí như thẻ button các thứ.
Trả lời Xóa