実現したいこと
スクロール量によって左右に移動する要素を画面幅内で折り返しさせたいです。
挙動の詳細としましては、、
下にスクロールすることで左端に固定した要素がスクロールのぶんだけ
右に移動し、画面の右端までいくと折り返して次は左に移動する。
そして、そのまま続けてスクロールし続けて左に移動した要素が画面の左端に当たると
また折り返して右に移動するといったイメージです。
上にスクロールすると巻き戻しのように同じように移動させることができたらと思います。
上記のような挙動にする方法をご教授いただきたいです。
以下コードのように試行錯誤していますが、知識不足でなかなか実現に至りません。
お力添えいただければ幸いです。
よろしくお願いします。
該当のソースコード
JavaScript
1 let winW = window.innerWidth 2 const move = document.getElementById('js-move') 3 4 window.addEventListener('scroll', () => { 5 let y = window.pageYOffset 6 const rect = elm.getBoundingClientRect(); 7 const left = rect.left; 8 if (left < winW) { 9 move.style.transform = 'translateX(' + y + 'px) scale(1, 1)' 10 } else{ 11 move.style.transform = 'translateX(' + -y + 'px) scale(-1, 1)' 12 } 13 }) 14
回答3件
あなたの回答
tips
プレビュー