带悬停音效（超低声波）的磁吸按钮

Magnetic button with sound，带磁力吸引动画效果的按钮

h5, gsap, button

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 3330
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

$(document).on('mousemove touch', function(e) {
    magnetize('.cerchio', e);
});

function magnetize(el, e) {
    var mX = e.pageX,
        mY = e.pageY;
    const item = $(el);

const customDist = item.data('dist') * 20 || 120;
    const centerX = item.offset().left + (item.width() / 2);
    const centerY = item.offset().top + (item.height() / 2);

var deltaX = Math.floor((centerX - mX)) * -0.45;
    var deltaY = Math.floor((centerY - mY)) * -0.45;

var distance = calculateDistance(item, mX, mY);

if (distance < customDist) {
        TweenMax.to(item, 0.5, {
            y: deltaY,
            x: deltaX,
            scale: 1.1
        });
        item.addClass('magnet');
    } else {
        TweenMax.to(item, 0.6, {
            y: 0,
            x: 0,
            scale: 1
        });
        item.removeClass('magnet');
    }
}

function calculateDistance(elem, mouseX, mouseY) {
    return Math.floor(Math.sqrt(Math.pow(mouseX - (elem.offset().left + (elem.width() / 2)), 2) + Math.pow(mouseY - (elem.offset().top + (elem.height() / 2)), 2)));
}

/*- MOUSE STICKY -*/
function lerp(a, b, n) {
    return (1 - n) * a + n * b
}

// Inizio Cursor
class Cursor {
    constructor() {
        this.bind()
            //seleziono la classe del cursore
        this.cursor = document.querySelector('.js-cursor')

this.mouseCurrent = {
            x: 0,
            y: 0
        }

this.mouseLast = {
            x: this.mouseCurrent.x,
            y: this.mouseCurrent.y
        }

this.rAF = undefined
    }

bind() {
        ['getMousePosition', 'run'].forEach((fn) => this[fn] = this[fn].bind(this))
    }

getMousePosition(e) {
        this.mouseCurrent = {
            x: e.clientX,
            y: e.clientY
        }
    }

run() {
        this.mouseLast.x = lerp(this.mouseLast.x, this.mouseCurrent.x, 0.2)
        this.mouseLast.y = lerp(this.mouseLast.y, this.mouseCurrent.y, 0.2)

this.mouseLast.x = Math.floor(this.mouseLast.x * 100) / 100
        this.mouseLast.y = Math.floor(this.mouseLast.y * 100) / 100

this.cursor.style.transform = `translate3d(${this.mouseLast.x}px, ${this.mouseLast.y}px, 0)`

this.rAF = requestAnimationFrame(this.run)
    }

requestAnimationFrame() {
        this.rAF = requestAnimationFrame(this.run)
    }

addEvents() {
        window.addEventListener('mousemove', this.getMousePosition, false)
    }

on() {
        this.addEvents()

this.requestAnimationFrame()
    }

init() {
        this.on()
    }
}

const cursor = new Cursor()

cursor.init();

//play sound on hover
var SoundHover = $("#sound-hover")[0];
$(".trigger-audio").on('mouseenter', function() {
    SoundHover.play();
});
// $(".trigger-audio").on('mouseout', function() {
//   SoundHover.pause();
//   // SoundHover.volume = .2;
//   SoundHover.currentTime = 0;
// });

编译

CSS

HTML

Magnetic button with sound，带磁力吸引动画效果的按钮

h5, gsap, button

编辑器支持Emmet

快捷键

Magnetic button with sound，带磁力吸引动画效果的按钮

h5, gsap, button

GSAP鼠标悬停在图片上时的透明水纹（波纹）特效

使用CSS3 mask（蒙版，遮罩）属性实现超酷按钮悬停动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：