Hiệu ứng chuột khi click vào Có hình trái tim đẹp

hieu ung chuot

Hiệu Ứng Click Chuột Làm Dân Chúng Thích Thú – Điểm Nhấn Độc Đáo Cùng Vua Code

Trong hành trình mang đến trải nghiệm thú vị và độc đáo cho người dùng, hiệu ứng click chuột không chỉ thu hút sự chú ý mà còn tạo nên dấu ấn riêng cho website WordPress của bạn. Để góp phần làm tăng sự thích thú của người dùng, Vua Code chia sẻ với anh em một món đồ chơi độc lạ – hiệu ứng click chuột có hình trái tim đẹp. Đây là bài viết được Vua Code chia sẻ lại từ bạn Lê Anh Đông, từ website flatsome.xyz

Tại Sao Nên Dùng Hiệu Ứng Click Chuột?

  • Tạo Điểm Nhấn: Thu hút sự chú ý với hiệu ứng hình trái tim đẹp mắt.
  • Tăng Trải Nghiệm Người Dùng: Khiến việc tương tác trở nên thú vị hơn.
  • Độc Đáo & Sáng Tạo: Giúp website của bạn nổi bật hơn so với các trang khác.

Cách Dùng Và Code Hiệu Ứng Trái Tim

Trước khi share, bạn cần xem qua nó là gì để quyết định có cần nó hay không: DEMO tại đây

Hiệu ứng chuột khi click vào Có hình trái tim đẹp - Vua Code @nguon:flatsome.xyz
Hiệu ứng chuột khi click vào Có hình trái tim đẹp – Vua Code @nguon:flatsome.xyz

Hiệu ứng chuột khi click vào Có hình trái tim đẹp

thấy cũng ko đến nổi nào đúng ko anh em . OK bắt tay vào việc nào , trong theme bạn add code này vô nhé

<script src="https://cdn.jsdelivr.net/mojs/latest/mo.min.js"></script>

<script type="text/javascript">

class Heart extends mojs.CustomShape {

    getShape() {

        return '<path d="M73.6170213,0 C64.4680851,0 56.5957447,5.53191489 51.7021277,13.8297872 C50.8510638,15.3191489 48.9361702,15.3191489 48.0851064,13.8297872 C43.4042553,5.53191489 35.3191489,0 26.1702128,0 C11.9148936,0 0,14.0425532 0,31.2765957 C0,48.0851064 14.893617,77.8723404 47.6595745,99.3617021 C49.1489362,100.212766 50.8510638,100.212766 52.1276596,99.3617021 C83.8297872,78.5106383 99.787234,48.2978723 99.787234,31.2765957 C100,14.0425532 88.0851064,0 73.6170213,0 L73.6170213,0 Z"></path>';

    }

}

mojs.addShape('heart', Heart);




const CIRCLE_RADIUS = 20;

const RADIUS = 32;

const circle = new mojs.Shape({

    left: 0,

    top: 0,

    stroke: '#FF9C00',

    strokeWidth: {

        [2 * CIRCLE_RADIUS]: 0

    },

    fill: 'none',

    scale: {

        0: 1

    },

    radius: CIRCLE_RADIUS,

    duration: 400,

    easing: 'cubic.out'

});




const burst = new mojs.Burst({

    left: 0,

    top: 0,

    radius: {

        4: RADIUS

    },

    angle: 45,

    count: 14,

    timeline: {

        delay: 300

    },

    children: {

        radius: 2.5,

        fill: '#FD7932',

        scale: {

            1: 0,

            easing: 'quad.in'

        },

        pathScale: [.8, null],

        degreeShift: [13, null],

        duration: [500, 700],

        easing: 'quint.out'

    }

});




const heart = new mojs.Shape({

    left: 0,

    top: 2,

    shape: 'heart',

    fill: '#E5214A',

    scale: {

        0: 1

    },

    easing: 'elastic.out',

    duration: 1600,

    delay: 300,

    radius: 11

});




document.addEventListener('click', function(e) {

    const coords = {

        x: e.pageX,

        y: e.pageY

    };

    burst

        .tune(coords)

        .replay();




    circle

        .tune(coords)

        .replay();




    heart

        .tune(coords)

        .replay();




});

</script>
&lt;script src="https://cdn.jsdelivr.net/mojs/latest/mo.min.js"&gt;&lt;/script&gt;

&lt;script type="text/javascript"&gt;

class Heart extends mojs.CustomShape {

getShape() {

return '&lt;path d="M73.6170213,0 C64.4680851,0 56.5957447,5.53191489 51.7021277,13.8297872 C50.8510638,15.3191489 48.9361702,15.3191489 48.0851064,13.8297872 C43.4042553,5.53191489 35.3191489,0 26.1702128,0 C11.9148936,0 0,14.0425532 0,31.2765957 C0,48.0851064 14.893617,77.8723404 47.6595745,99.3617021 C49.1489362,100.212766 50.8510638,100.212766 52.1276596,99.3617021 C83.8297872,78.5106383 99.787234,48.2978723 99.787234,31.2765957 C100,14.0425532 88.0851064,0 73.6170213,0 L73.6170213,0 Z"&gt;&lt;/path&gt;';

}

}

mojs.addShape('heart', Heart);




const CIRCLE_RADIUS = 20;

const RADIUS = 32;

const circle = new mojs.Shape({

left: 0,

top: 0,

stroke: '#FF9C00',

strokeWidth: {

[2 * CIRCLE_RADIUS]: 0

},

fill: 'none',

scale: {

0: 1

},

radius: CIRCLE_RADIUS,

duration: 400,

easing: 'cubic.out'

});




const burst = new mojs.Burst({

left: 0,

top: 0,

radius: {

4: RADIUS

},

angle: 45,

count: 14,

timeline: {

delay: 300

},

children: {

radius: 2.5,

fill: '#FD7932',

scale: {

1: 0,

easing: 'quad.in'

},

pathScale: [.8, null],

degreeShift: [13, null],

duration: [500, 700],

easing: 'quint.out'

}

});




const heart = new mojs.Shape({

left: 0,

top: 2,

shape: 'heart',

fill: '#E5214A',

scale: {

0: 1

},

easing: 'elastic.out',

duration: 1600,

delay: 300,

radius: 11

});




document.addEventListener('click', function(e) {

const coords = {

x: e.pageX,

y: e.pageY

};

burst

.tune(coords)

.replay();




circle

.tune(coords)

.replay();




heart

.tune(coords)

.replay();




});

&lt;/script&gt;

nó là script bạn cân nhắc trước khi dùm nhé haha

bạn chỉ cần lưu lại và check demo nhé

Chúc bạn thành công !

Các bạn có thể đọc thêm bài viết Vua Code tại:

Share Code tin tức mới chạy ngay đầu trang

Thêm phần đánh giá cho sản phẩm trong wordpess

THEME WORDPRESS GIÁ RẺ, ĐẸP – CHUẨN SEO

Cách giúp bài viết tối ưu SEO hơn

Link bài viết gốc: Hiệu ứng chuột khi click vào Có hình trái tim đẹp

Leave a Reply

Your email address will not be published. Required fields are marked *

PhoneZalo