Thêm hiệu ứng cursor cho trang web của bạn thêm thú vị

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.
Thêm hiệu ứng cursor cho trang web của bạn thêm thú vị
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ị.

Thêm hiệu ứng cursor cho trang web của bạn thêm 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.

0/5
0 ratings
5
4
3
2
1
Có những thứ luôn quẩn quanh cuộc đời bạn và đôi lúc không có lời giải thích, liệu rằng đó có phải là duyên số?!

5 Nhận xét

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.


  1. KiMiDev

    chả làm được ad ơi

    Trả lời Xóa
  2. tuấn nguyễn
    1/10/2022 09:02:00 CH

    code 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óa
  3. traosoilike.click
    1/10/2022 09:04:00 CH

    hazzz bước 3 có khúc đọc chả hiểu ad ơi. ko được

    Trả lời Xóa

Maybe You Like

Follow
Google Translate