BLOG

MovingBackgroundImageOnMousemove

おはようございます。

最近メモ書きを復活させて、頭がすごいすっきりするのを実感しておりますどうもハヤトワンです。

まずは1ヶ月続けてみる。

ということで日課コーディング

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

ラーメン。。。

        const el = document.querySelector('.bg');
        el.addEventListener("mousemove", (e) => {
            el.style.backgroundPositionX = -e.offsetX + "px";
            el.style.backgroundPositionY = -e.offsetY + "px";
        });

シンプルにbackgroundPositionの横軸縦軸をoffset使ってマウスムーブで動せるようにしてる感じですね。

ラーメン。。。

ということで今日も頑張りましょう。

ラーメン。。。