ロゴをマウスに追従させる

css custom propertiesを試したくてやった

マウスについてくると懐かしみがある

完全に遊びの機能である

code:script.js

const docStyle = document.documentElement.style;

document.addEventListener('mousemove', (e) => {

docStyle.setProperty('--mouse-x', e.clientX);

docStyle.setProperty('--mouse-y', e.clientY);

});

code:style.css

:root {

--mouse-x: 0;

--mouse-y: 0;

}

.brand-icon {

position: fixed;

left: 0;

top 0;

transform: translate(calc(var(--mouse-x) * 1px), calc(var(--mouse-y) * 1px));

}

https://gyazo.com/3ed6526d9d364182da4fb92f8d3da499

戻すのがちょっと大変なので頑張ろう