質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

3回答

366閲覧

JavaScript スクロール量によって左右に移動する要素を画面幅内で折り返しさせたい

shu-shu-

総合スコア5

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2022/09/15 03:29

実現したいこと

スクロール量によって左右に移動する要素を画面幅内で折り返しさせたいです。

挙動の詳細としましては、、
下にスクロールすることで左端に固定した要素がスクロールのぶんだけ
右に移動し、画面の右端までいくと折り返して次は左に移動する。
そして、そのまま続けてスクロールし続けて左に移動した要素が画面の左端に当たると
また折り返して右に移動するといったイメージです。
上にスクロールすると巻き戻しのように同じように移動させることができたらと思います。

上記のような挙動にする方法をご教授いただきたいです。
以下コードのように試行錯誤していますが、知識不足でなかなか実現に至りません。
お力添えいただければ幸いです。
よろしくお願いします。

該当のソースコード

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2022/09/15 03:35

手書きでいいので図示できますか?
guest

回答3

0

こんな感じで

javascript

1<style> 2body{ 3margin:0; 4height:500%; 5} 6#circle{ 7position:fixed; 8height:100px; 9width:100px; 10background-Color:red; 11border-radius:50px; 12} 13</style> 14<script> 15window.addEventListener('scroll',e=>{ 16 const bodyWidth=document.body.offsetWidth-circle.getBoundingClientRect().width; 17 const winHeight=document.body.offsetHeight-window.innerHeight; 18 const bodyTop=document.body.scrollTop; 19 const loop=5; 20 const num0=bodyTop/winHeight*loop; 21 const num1=parseInt(num0)%2; 22 const ratio=num1?1-num0%1:num0%1; 23 circle.style.left=ratio*bodyWidth; 24 25}); 26</script> 27<div id="circle">&nbsp;</div>

投稿2022/09/15 05:58

yambejp

総合スコア114583

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

shu-shu-

2022/09/15 06:21

ありがとうございます。 とても勉強になりました。 今後の参考にさせていただきたいと思います。
guest

0

ベストアンサー

下記でどうでしょう。

JavaScript

1const move = document.getElementById('js-move'); 2const moveW = move.clientWidth; 3window.addEventListener('scroll', () => { 4 let winW = window.innerWidth - moveW; 5 let y = window.pageYOffset; 6 let x = y % winW; 7 let n = Math.floor(y / winW); 8 console.log(winW, y,x, n); 9 if (( n % 2 ) == 0 ){ 10 move.style.transform = 'translatey(-50%) translateX(' + x + 'px)' 11 } else { 12 move.style.transform = 'translatey(-50%) translateX(' + (winW - x) + 'px)' 13 } 14})

CodePenサンプル

投稿2022/09/15 05:16

hatena19

総合スコア33620

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

shu-shu-

2022/09/15 06:20

イメージ通りに実現できました。 サンプルまでありがとうございます。 大変助かりました。
guest

0

ありがとうございます。
こちらでわかりますでしょうか。
イメージ説明

そのままスクロールし続けて左端まで移動できたら折り返してまた右に移動といったかたちです。
ボールが画面の両端で跳ね返るようなイメージです。

投稿2022/09/15 04:06

shu-shu-

総合スコア5

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問