• Giới thiệu
  • Liên hệ
  • Điều khoản
  • Bảo mật
Tech News, Magazine & Review WordPress Theme 2017
  • Home
  • Designer
    • PHOTOSHOP
      • Tutorial
      • Download
    • ILLUSTRATOR
      • Tutorial
      • Download
    • LIGHTROOM
      • Tutorial
      • Download
    • PHOTOGRAPHY
  • Blogspot
    • Template Blogspot
    • Thủ Thuật Blogspot
  • WordPress
    • Plugin WordPress
    • Theme WordPress
    • Thủ Thuật WordPress
  • Thủ Thuật
    • Công Nghệ
    • Web
    • Windows
  • Tài Liệu
    • Lập Trình
    • Khóa học
    • Phần mềm
    • Tiktok
  • GAME
    • Game Offline
    • Game Online
No Result
View All Result
  • Home
  • Designer
    • PHOTOSHOP
      • Tutorial
      • Download
    • ILLUSTRATOR
      • Tutorial
      • Download
    • LIGHTROOM
      • Tutorial
      • Download
    • PHOTOGRAPHY
  • Blogspot
    • Template Blogspot
    • Thủ Thuật Blogspot
  • WordPress
    • Plugin WordPress
    • Theme WordPress
    • Thủ Thuật WordPress
  • Thủ Thuật
    • Công Nghệ
    • Web
    • Windows
  • Tài Liệu
    • Lập Trình
    • Khóa học
    • Phần mềm
    • Tiktok
  • GAME
    • Game Offline
    • Game Online
No Result
View All Result
Tin Tức Tổng Hợp
No Result
View All Result

Hướng dẫn thêm hiệu ứng cursor cho trang web

admin by admin
Tháng Chín 1, 2021
Home Thủ Thuật Web

Thêm hiệu ứng cursor cho trang web – 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ị.

Hướng dẫn thêm hiệu ứng cursor cho trang web
Hướng dẫn thêm hiệu ứng cursor cho trang web

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é!

Hướng dẫn thêm hiệu ứng cursor cho trang web

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 5: Lưu thay đổi là xong.

Đánh giá bài viết
[Total: 1 Average: 5]

Bài viết liên quan:

  1. Cách thêm thanh toán Momo vào website
  2. Cách sử dụng Chế độ tối của Google Tìm kiếm
  3. Cách để Goole index bài viết chỉ sau 2 Phút
  4. 12 Mẹo tăng tốc độ Trang web hiệu quả
  5. Cách để Google index bài viết nhanh chỉ sau 5 phút
Tags: thêm hiệu ứng cursor cho trang web
admin

admin

Next Post
Game mobile Play Together: Cảnh giác lừa đảo

Game mobile Play Together: Cảnh giác lừa đảo

Download Zalo PC Dark Mode New 2022

Download Zalo PC Dark Mode New 2022

4 Hosting miễn phí cho người mới bắt đầu

4 Hosting miễn phí cho người mới bắt đầu

Login
guest
guest
0 Góp ý
Inline Feedbacks
Xem tất cả các bình luận

Ân sủng là gì? Sự ân sủng là gì?

Misoa là ai? Nữ MC lên tiếng “bị bạn trai tác động vật lý”

DQ là số điện thoại của ai? Vì sao gọi cho bạn?

M3p là ai? Làm nghề gì?

Quỷ Satan Là Ai? Sức Mạnh Của Quỷ Satan Là Gì?

Satan là ai? 4 câu truyện đáng sợ liên quan đến Satan

  • Viết BLog
    • Giới thiệu
    • Liên hệ
    • Điều khoản
    • Bảo mật

    © 2021 Đoàn Hải Blog

    No Result
    View All Result
    • Home
    • Designer
      • PHOTOSHOP
        • Tutorial
        • Download
      • ILLUSTRATOR
        • Tutorial
        • Download
      • LIGHTROOM
        • Tutorial
        • Download
      • PHOTOGRAPHY
    • Blogspot
      • Template Blogspot
      • Thủ Thuật Blogspot
    • WordPress
      • Plugin WordPress
      • Theme WordPress
      • Thủ Thuật WordPress
    • Thủ Thuật
      • Công Nghệ
      • Web
      • Windows
    • Tài Liệu
      • Lập Trình
      • Khóa học
      • Phần mềm
      • Tiktok
    • GAME
      • Game Offline
      • Game Online

    © 2021 Đoàn Hải Blog

    wpDiscuz
    0
    0
    Rất thích suy nghĩ của bạn, hãy bình luậnx
    ()
    x
    | Reply