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ố?!

6 Nhận xét

  • Chèn ảnh bằng cách dán trực tiếp link ảnh | Tool upload ảnh
  • Chèn video Youtube bằng cách dán trực tiếp link video
  • Chèn code theo mẫu [pre]code[/pre]. Lưu ý: mã hóa code trước khi bình luận

    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
    Mới hơn Cũ hơn

    Maybe You Like

    Thoughts, stories and ideas
    Follow