BLOG

parallax

おはようございます。

今日は数年に一度の七草大寒波らしく、どうりで今日の寝起きが悪かったわけだと納得しておりますどうもハヤトワンです。

体が冬眠を求めてる

理性で勝ちます

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

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

自分にとって新しい表現だったので、抑えておきたいなと思いました。

<section>
        <ul>
            <li class="scroll" data-rate="-2" data-direction="vertical">pa</li>
            <li>ral</li>
            <li class="scroll" data-rate="2">lax</li>
        </ul>
        <span class="scroll" data-rateY="-1" data-rateX="2" data-direction="horizontal"></span>
    </section>
    <script>
        window.addEventListener('scroll',function(e) {
            const target = document.querySelectorAll('.scroll')

            for (index = 0; index < target.length; index++) {
                let pos = window.pageYOffset * target[index].dataset.rate;
                if(target[index].dataset.direction === 'vertical') {
                    target[index].style.transform = 'translate3d(0px,'+pos+'px, 0px)';
                }else {
                    let posX = window.pageYOffset * target[index].dataset.ratex;
                    let posY = window.pageYOffset * target[index].dataset.ratey;
                    target[index].style.transform = 'translate3d('+posX+'px, '+posY+'px, 0px)';
                }
            }
        });
    </script>

スクロールイベントにてdatasetで属性指定して、pageYOffsetで高さつけたりしてパララックスしてる感じですね。

応用できそう。

最近jsが少しずつ分かってきつつあるので楽しい。

頑張ろうと思います。

それでは今日も良い一日を!