【ビフォー・アフター画像切り替えのWebページの作成法】

-- 回答受付中にもコメント欄を開いています --
 
下記例のようなビフォー・アフターのWebページを作成する方法を教えてください。
 
特徴は、アフター画面の上でマウスを左から右へ移動させると、移動したところ
までが順次連続的にビフォー画面切り替わる。
 
ビフォー・アフター画像切り替えの例:
http://www.guardian.co.uk/world/interactive/2011/mar/14/japan-earthquake-before-and-after
 

回答の条件
  • URL必須
  • 1人2回まで
  • 13歳以上
  • 登録:2011/03/15 01:25:18
  • 終了:2011/03/15 18:21:06

ベストアンサー

id:Cherenkov No.2

Cherenkov回答回数1503ベストアンサー獲得回数4932011/03/15 13:46:31

ポイント50pt

質問のリンク先はFlashですとしか答えられないので、以下のようなJavaScriptを使ったサイトのサンプルコードを書きました。

それぞれソースコードを読めば仕組みはわかりますね。position:relativeな要素の下にposition:absoluteな要素を配置して重ねるのがミソだと思います。


DEMO:

http://jsfiddle.net/vzLT3/


<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>
$(function() {
  $('.beforeafter').mousemove(function(event){
    var offset = $(this).offset().left;
    if ((event.clientX - offset) < ($(this).find(".after").width() -50) && (event.clientX - offset) > 50) {
      $(this).find(".before").width(event.clientX - offset);
    }
  }); 
});
</script>
</head>
<body>
<div class="beforeafter" style="width: 940px; height: 529px; position:relative;"> 
  <div class="after" style="background: url('http://www.abc.net.au/news/events/japan-quake-2011/images/beforeafter/sendai-airport-2.jpg') repeat scroll 0% 0% transparent; width: 940px; height: 529px; position:absolute;"></div>
  <div class="before" style="background: url('http://www.abc.net.au/news/events/japan-quake-2011/images/beforeafter/sendai-airport-1.jpg') repeat scroll 0% 0% transparent; width: 392.5px; height: 529px; position:absolute;"></div>
</div>
</body>
</html>
id:mkonomi

新たな、ビフォー・アフター画像のページのご紹介ありがとうございました。

興味深く閲覧させていただきました。

 

また、JavaScriptを使ったコードの作成ありがとうございました。

これから勉強させていただきます。

2011/03/15 18:19:34

その他の回答(1件)

id:deflation No.1

deflation回答回数1036ベストアンサー獲得回数1262011/03/15 13:30:48

ポイント35pt

Flashを使って、上のレイヤの画像を横方向に動かせば良いのです。

マウスの動きと背景画像」が参考になるでしょう。

id:mkonomi

さっそくの回答ありがとうございました。

これから勉強させていただきます。

確認ですが、「横方向に動かせば」と書かれておられるのは、

上のレイヤの画像全体をそのまま横へスライドするのではありませんよね。

2011/03/15 18:19:15
id:Cherenkov No.2

Cherenkov回答回数1503ベストアンサー獲得回数4932011/03/15 13:46:31ここでベストアンサー

ポイント50pt

質問のリンク先はFlashですとしか答えられないので、以下のようなJavaScriptを使ったサイトのサンプルコードを書きました。

それぞれソースコードを読めば仕組みはわかりますね。position:relativeな要素の下にposition:absoluteな要素を配置して重ねるのがミソだと思います。


DEMO:

http://jsfiddle.net/vzLT3/


<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>
$(function() {
  $('.beforeafter').mousemove(function(event){
    var offset = $(this).offset().left;
    if ((event.clientX - offset) < ($(this).find(".after").width() -50) && (event.clientX - offset) > 50) {
      $(this).find(".before").width(event.clientX - offset);
    }
  }); 
});
</script>
</head>
<body>
<div class="beforeafter" style="width: 940px; height: 529px; position:relative;"> 
  <div class="after" style="background: url('http://www.abc.net.au/news/events/japan-quake-2011/images/beforeafter/sendai-airport-2.jpg') repeat scroll 0% 0% transparent; width: 940px; height: 529px; position:absolute;"></div>
  <div class="before" style="background: url('http://www.abc.net.au/news/events/japan-quake-2011/images/beforeafter/sendai-airport-1.jpg') repeat scroll 0% 0% transparent; width: 392.5px; height: 529px; position:absolute;"></div>
</div>
</body>
</html>
id:mkonomi

新たな、ビフォー・アフター画像のページのご紹介ありがとうございました。

興味深く閲覧させていただきました。

 

また、JavaScriptを使ったコードの作成ありがとうございました。

これから勉強させていただきます。

2011/03/15 18:19:34
  • id:Cherenkov
    プラグインを見つけたのでリンク貼っておきますねー。
    Catch My Fame » jQuery Before/After Plugin http://www.catchmyfame.com/2009/06/25/jquery-beforeafter-plugin/
  • id:mkonomi
    プラグインのご紹介ありがとうございました。
     
    Cherenkov さんの回答欄で示されている方法、うまく動作しました。
    ありがとうございました。
     

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません