BLOG

animatedCursor

おはようございます。

寒さが人を殺しにかかってきてるなと思っておりますどうもハヤトワンです。

皆様体調管理ほんまに気をつけて。

ということで、今日のコーディング。

https://github.com/HayatoMoromasa/sample/tree/main/animatedCursor

        (function() {
            const link = document.querySelectorAll('nav > .hover-this');
            const cursor = document.querySelector('.cursor');

            const animateit = function(e) {
                const span = this.querySelector('span');
                const { offsetX: x, offsetY: y } = e,
                { offsetWidth: width, offsetHeight: height } = this,

                move = 25,
                xMove = x / width * (move * 2) - move,
                yMove = y / height * (move * 2) - move;

                span.style.transform = `translate(${xMove}px, ${yMove}px)`;

                if(e.type === 'mouseleave') span.style.transform = '';
            };

            const editCursor = e => {
                const { clientX: x, clientY: y } = e;
                cursor.style.left = x + 'px';
                cursor.style.top = y + 'px';
            };

            link.forEach(b => b.addEventListener('mousemove', animateit));
            link.forEach(b => b.addEventListener('mouseleave', animateit));
            window.addEventListener('mousemove', editCursor);
        })();

animateitがホバーされる要素についての記述、edidtCursorがそのままカーソルについての記述

const { clientX: x, clientY: y } = e;

みたいな表現これまでの引き出しになかったので勉強になりました。

まだまだ🐣です

ということで今日も良い一日を!