詳しい人求む！

パララックスについて　上下に動かす方法

解決済

質問者：rerere121
質問日時：2016/11/08 15:58
回答数：2件

はじめまして。初めて質問させていただきます。
パララックスについて分からないのですが、スクロール時に上の画像はゆっくり下に、下の画像は少し早く上に移動させるような、最終的に上下画像を逆転させるパララックスを作りたいのですがjsや方法は問わないのでご教授いただけませんでしょうか？
よろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

参考程度に

No.2ベストアンサー

回答者： fujillin
回答日時：2016/11/10 16:41

ANo1です。

反応がないのでよくわかりませんが、適当に、画像が入れ替わるごく簡単なものを作成してみました。
＞上の画像はゆっくり下に、下の画像は少し早く
＞上に移動させるような～～
速度が違って入れ替わるのって具体的にどういう動きなのかイメージできなかったので、とりあえず２つの画像の位置が入れ替わるというものです。

実際に使用するには、途中でリサイズ等された時にも再設定できるような部分を組み込まないとならないと思いますが、とっかかりのヒントにでもなれば・・・

※ #mainはスクロールを発生させるために高さを確保しているだけです。
※ 画像が重なった時でも識別しやすいように、ひとまずopacity:0.7に設定してあります。

（スクリプトのインデントは全角空白に変えてありますので半角に）
<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>

<style type="text/css">
#main { height:1500px; }
#imageBox { position:absolute; top:0; left:0; width:100%; height:100%; }
#imageBox img { width:80%; height:49%; opacity:0.7; }
#imageBox img:last-child { position:absolute; top:50%; left:20%;　}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2 …

<script type="text/javascript">
$(window).on("load", function(){
　var scT, imgs, pos = [], dX, dY, i;

// 初期値設定
　scT = $(document).height() - $(window).height();
　if(scT < 10) return;

　imgs = $("#imageBox img");

　for(i=0; i<2; i++) pos[i] = imgs.eq(i).offset();
　dY = (pos[1].top - pos[0].top) / scT;
　dX = (pos[1].left - pos[0].left) / scT;
　for(i=0; i<2; i++){
　　imgs.eq(i).css({ position: "absolute", top:pos[i].top, left:pos[i].left });
　}　　

// スクロール時の処理
　$(document).on("scroll", function(){
　　var sc = $(document).scrollTop();
　　if( sc > scT ) return;
　　var y = dY * sc | 0, x = dX * sc | 0;
　　imgs.eq(0).css({ top: pos[0].top + sc + y, left: pos[0].left + x });
　　imgs.eq(1).css({ top: pos[1].top + sc - y, left: pos[1].left - x });
　});
});
</script>

</head>
<body>
<div id="main">SCROLL TEST</div>

<div id="imageBox">
<img src="A.jpg" alt="">
<img src="B.jpg" alt="">
</div>

</body>
</html>

※ ご質問文につられて「二つの画像が入れ替わる」ものをイメージしてしまいましたが、改めて考えてみると、一つの画像を指定位置間で自由に移動できるものを作成しておいて、必要な数だけ設定するようなものの方が使いやすいのかもしれませんね。
例えば、
　imageMover(id, startX, startY, endX, endY)
みたいな感じで…

- 0
- 件

通報する

この回答へのお礼

ありがとうございます！
これでやってみます！

通報する

お礼日時：2016/11/11 11:55

参考程度に

No.1

回答者： fujillin
回答日時：2016/11/08 16:25

こんにちは

ご質問が包括的に過ぎるので、ここの回答欄だけで回答するのは難しいかと…

以下に、ごく簡単な考え方と作り方の例がありますが、ご質問との共通点はありそうなので参考になるのではないかと思います。
http://webdesignmagazine.net/javascript/parallax1/

他にも説明サイトは多々ありますので、不足な部分に関しては、そのあたりを見てみるのも参考になるのではと思います。
http://www.bing.com/search?q=%E3%83%91%E3%83%A9% …

パララックス用のライブラリも多く作られているようですので、簡単に実現するなら、その中から使えそうなものを探して利用させていただくのが近道かもしれません。
http://www.bing.com/search?q=%E3%83%91%E3%83%A9% …