No.2ベストアンサー
- 回答日時:
ANo1です。
反応がないのでよくわかりませんが、適当に、画像が入れ替わるごく簡単なものを作成してみました。
>上の画像はゆっくり下に、下の画像は少し早く
>上に移動させるような~~
速度が違って入れ替わるのって具体的にどういう動きなのかイメージできなかったので、とりあえず2つの画像の位置が入れ替わるというものです。
実際に使用するには、途中でリサイズ等された時にも再設定できるような部分を組み込まないとならないと思いますが、とっかかりのヒントにでもなれば・・・
※ #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)
みたいな感じで…
No.1
- 回答日時:
こんにちは
ご質問が包括的に過ぎるので、ここの回答欄だけで回答するのは難しいかと…
以下に、ごく簡単な考え方と作り方の例がありますが、ご質問との共通点はありそうなので参考になるのではないかと思います。
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% …
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- その他(IT・Webサービス) このサイトのスクロール逆じゃないですか? 1 2022/10/05 20:48
- USTREAM 映像・動画編集にお詳しい方、教えて下さい。 2 2023/03/05 07:22
- Visual Basic(VBA) エクセルマクロでアニメを作る方法を教えてください。 1 2023/02/07 14:27
- 中古車 【中古キューブ】涼しくする方法 10 2023/05/26 08:16
- 生物学 レッサーパンダが好きな方、詳しい方に質問です。レッサーパンダも怒ることでありますか?できたら画像や動 3 2023/08/25 15:34
- YouTube ユーチューブへの動画投稿にサムネイルを付ける方法は? 1 2022/07/21 23:45
- Illustrator(イラストレーター) WIN10 PAINT の手のひらツールが出ないときはどうしたらよいでしょうか 2 2022/11/06 10:06
- 写真・ビデオ iphoneで風景の加工についての質問です。 上の空の色(画像)を下の空の色(画像)のような色合いに 1 2022/07/25 21:52
- HTML・CSS トリミングで表示した画像をクリックで元どおりにしたい 3 2022/12/16 18:49
- YouTube Win10 Youtubeの動画を開くと、必ず右下に設定ダイアログ?が表示されます 2 2023/03/26 11:35
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
jQueryで同じクラス名のものを...
-
jQueryでのドラッグアンドドロ...
-
デフォルト非表示にしたい。【t...
-
clear機能を失わずにファイルア...
-
MAX関数を使ってからLEFT JOIN...
-
CSS のみのタブ切り替えについて
-
createElementで作成した要素を...
-
[急ぎ] videoタグで埋め込んだm...
-
jqueryで要素の中身を要素の外...
-
スクロール可能なチェックボックス
-
jspでcssが読み込めない
-
eclipseでcssを使うためには?
-
htmlの記述で link rel=styles...
-
アコーディオン自動開閉メニュ...
-
SimplyScrollについて
-
JQuery UIで、表示したタブの中...
-
divのheight指定で画面一杯に表...
-
【初心者】UWSCでjavascriptで...
-
チェックボックスに入っている...
-
jQueryアコーディオンで複数メ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
デフォルト非表示にしたい。【t...
-
jQueryで同じクラス名のものを...
-
Colorboxがうまく設置できません
-
Javascript初心者|jQueryの.va...
-
jQueryでのドラッグアンドドロ...
-
アップロードファイルの種類に...
-
embed要素のsrc属性の値を変更...
-
fancyboxのポップアップ時の画...
-
JQueryで画像の上で文字を動かす
-
一定時間で入れ替わるバナー画...
-
ボタンを押すたびに交互に切り...
-
交互に入れ替わる画像を複数配置
-
全部のサイコロをjavascriptで...
-
clear機能を失わずにファイルア...
-
JavaScriptが、Firefoxで動かな...
-
bxsliderで最初に縦に複数表示...
-
「画像クリックで音声再生」を ...
-
画像マウスオーバーで、checkb...
-
イラストのボタンを押したとき...
-
背景色と連動するスライドショ...
おすすめ情報