BLOG

boxShadowEffects

おはようございます。

忘年会シーズン、今日も今から忘年会ですどうもハヤトワンです。

今日はびちどん忘年会、肝臓が爆発しないことだけを祈って臨みます。

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

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

        let box = document.querySelectorAll('.box');
        let shadow = '';
        for(let i = 0; i < box.length; i++) {
            box[i].addEventListener('mouseover', () => {
                for (let i = 0; i < 800; i++) {
                    shadow += (shadow? ',':'')+ i*1+'px ' + i*1+'px 0 #e8305b';
                }
                box[i].style.boxShadow = shadow;
                box[i].style.transition = '0.3s ease-in-out';
            },false);
        };

これはボックスシャドーをえらい長くだしております。

ほんで、マウスオーバーイベントでカーソルあたったら伸びるようにしてる感じ。

このshadowをfor文で動的に処理してるのとか、斬新に感じました。

いろんな使い方があるもんですね。

ということでおわり。

今日も良い一日を!