1. Home
  2. Webデザイン
  3. html+CSS+javascript
  4. 「女の子の服が透けて見える不思議なウィンドウ」がおもしろい!
AmazonAmazon クレジットカードAmazon DashAmazon PrimeAmazon.co.jpAmazon
Chromeを簡単にカスタマイズ!14色の公式ブラウザテーマを公開!

Chromeを簡単にカスタマイズ!14色の公式ブラウザテーマを公開!

Googleの「Chrome」チームが初となるChromeの公式テーマを公開しました。今回公開された14色のカラーリングは色合いや濃淡も様々なものが用意されています。これらのテーマ...

PNGやJPEGより圧縮性能が高い次世代画像フォーマットの「WebP」を使おう!

PNGやJPEGより圧縮性能が高い次世代画像フォーマットの「WebP」を使おう!

一般的なWebサイトに用いられている画像はPNGやJPEGがほとんどですが、今回はWebサイトにおける次世代画像フォーマットのWebP(ウェッピー)の話をしたいと思います。WebPはG...

JPEG/PNG形式の画像をWebPへ一括変換できるソフト「WebPconv」が便利!

JPEG/PNG形式の画像をWebPへ一括変換できるソフト「WebPconv」が便利!

今回紹介するのはJPEG/PNG形式の画像を次世代画像フォーマットである「WebP」(ウェッピー)に一括変化することができるソフトである「WebPconv」を紹介したいと思います。We...

Googleが提供する画像をブラウザ上で最適化して圧縮できるサイト「Squoosh」!

Googleが提供する画像をブラウザ上で最適化して圧縮できるサイト「Squoosh」!

Webサイトで画像を掲載する際に、画像の画質やファイルサイズを最適化して圧縮するのはサイトの表示速度を高速化するためにも必須の項目です。そこで今回紹介するのはGoogl...

無料で使えるオンラインのポスター&チラシメーカー「DesignCap」が便利!

無料で使えるオンラインのポスター&チラシメーカー「DesignCap」が便利!

今回紹介するのは簡単にハイクオリティなポスターを作ることが可能な無料のオンラインのポスター&チラシメーカーである「DesignCap」です。このDesignCapを使えばソフトウ...

CORSAIR 簡易水冷CPUクーラーH60の新旧を比較してみました!

CORSAIR 簡易水冷CPUクーラーH60の新旧を比較してみました!

ちょっと前からCORSAIRの簡易水冷CPUクーラーからカラカラという異音が聞こえるようになってきたので、CPUクーラーを買い換えることにしました。そんなわけで今回はCORSAIR...

Xボーダーを使って日本に発送できない海外サイトの商品を購入する方法!

Xボーダーを使って日本に発送できない海外サイトの商品を購入する方法!

以前に、AmazonUSで日本に発送できない商品も日本語で簡単に買える「Xボーダー」がすごい便利!という記事で紹介した「Xボーダー」ですが、実はこのXボーダーは海外のAmazo...

送料込み28円!?スマホ三脚固定ホルダー(ブラケット)を買ってみた!

送料込み28円!?スマホ三脚固定ホルダー(ブラケット)を買ってみた!

今回はスマートフォンを三脚固定するためのホルダーの三脚ブラケットがAmazonで送料込み28円という超激安価格で販売されていたので一つ購入してみました。そこで今回はスマ...

Windows標準搭載の仮想デスクトップを便利に拡張できるソフト「Sylphyhorn」!

Windows標準搭載の仮想デスクトップを便利に拡張できるソフト「Sylphyhorn」!

今回紹介するのはWindows10の仮想デスクトップの機能を更に便利に拡張できるソフトの「Sylphyhorn」を紹介したいと思います。Windows10から標準で搭載されている仮想デスク...

NetaGear RSS News

Now Loading

Article

「女の子の服が透けて見える不思議なウィンドウ」がおもしろい!

 html+CSS+javascript 
sweetduet_xray_000.png

今回はおもしろいページを見つけたので久しぶりにJavaScript関連の記事を書きたいと思います。タイトルにそぐわないかもしれませんが技術的な話です。今回紹介するのは「女の子の服が透けて見える不思議なウィンドウ」というJavaScriptとブラウザのウィンドウを巧みに使ったおもしろいページです。

ページを開いてみるとパッと見ではただかわいい女の子の画像が表示されているだけなのですが、その名のとおりPushボタンを押すと小さいウィンドウが表示され、そのウィンドウを通して女の子を見ると服が透けて見えます。このページのウィンドウを巧みに使ったおもしろいギミックはJavaScriptを用いて実装されています。

女の子の服が透けて見える不思議なウィンドウ


sweetduet_xray_001.png

女の子の服が透けて見える不思議なウィンドウ
http://sanya.sweetduet.info/xray/

※スマートフォンやタブレット端末ではウィンドウの表示が異なるため正しく動作しません。閲覧にはPC用ブラウザ推奨となります。また、もしウィンドウ内の表示位置がずれるときは、ウィンドウの中でマウスを動かしてみてくださいとのこと。

sweetduet_xray_002.png
1 ページにアクセスしたら「Push」ボタン押すと、新しいウィンドウが表示されます。

sweetduet_xray_003.png
2 これを移動させて女の子の方へ移動させてあげると服が透けます。

sweetduet_xray_004.png
3 透けるウィンドウはサイズも変更可能です。

sweetduet_xray_005.png
4 さらにもう一度「Push」ボタンを押して、ウィンドウを2枚重ねると・・・!?

sweetduet_xray_006.png
なにげにウィンドウの枚数で表情も変わります。

Internet Explorer


sweetduet_xray_008.png

「おい、おれが見たら服が透けないぞ!」というそこのあなた。残念ながらInternet Explorerでは女の子の服が透けません。Internet Explorerでは動作しない仕様なのでInternet Explorerの方は他のブラウザに変えてから出直してください。

Google Chrome - ブラウザのダウンロード
http://www.google.co.jp/chrome/intl/ja/landing.html

ちなみにInternet Explorer以外のGoogle ChromeとFirefoxとOperaでは動作を確認できました。「女の子の服が透けないInternet Explorerなんか使ってられるか!」とこれを機にブラウザ変更に意欲的な人にはGoogle Chromeをお勧めしておきます。Google Chromeだったらこういう系は大抵動きますし。

ソースコード


sweetduet_xray_007.png

こういうおもしろいページを見るとソースコードを見たくなるのが、コーダーというものです。非常に興味深いのでさっそくソースコードを見てみると実装の仕方は2通りに分かれて書かれていました。やっていること自体は非常にシンプルです。

function timer1()
{
// 閉じられたウィンドウを削除
for ( var i=0; i<wnd.length; i++ )
if ( wnd[i].closed )
wnd.splice(i,1);

ix = document.getElementById("img").offsetLeft;
iy = document.getElementById("img").offsetTop;

for ( var i=0; i<wnd.length; i++ )
{
var w = wnd[i];

// 親ウィンドウに合わせてスクロール
w.scrollTo(w.screenX-screenX+scrollX+w.cx-cx,
w.screenY-screenY+scrollY+w.cy-cy);
}
}

1つ目の手法は、PUSHボタンを押すと新たなウィンドウが表示され、子ウィンドウの中にはスクール水着の画像が表示されてウィンドウの動きに合わせてそれをスクロールするというものです。要はウィンドウ内にスクール水着の画像があり、元の画像の上にちょうどコンテンツが被る様に表示させています。

function timer2()
{
// 閉じられたウィンドウを削除
for ( var i=0; i<wnd.length; i++ )
if ( wnd[i].closed )
wnd.splice(i,1);

ix = document.getElementById("img").offsetLeft;
iy = document.getElementById("img").offsetTop;

for ( var i=0; i<wnd.length; i++ )
{
var w = wnd[i];

// 子ウィンドウ同士の重なっている部分に裸画像
for ( var j=0; j<N; j++ )
{
d = w.document.getElementById("img"+j);
if ( d )
d.style.clip = "rect(0px,0px,0px,0px)";
}

for ( var j=0; j<Math.min(N,wnd.length); j++ )
if ( i!=j )
{
d = w.document.getElementById("img"+j);
if ( d )
{
d.style.clip = "rect("
+ Math.max(wnd[j].screenY+event.scrollY+wnd[j].cy-(screenY+cy+iy),0) + "px,"
+ Math.max(wnd[j].screenX+event.scrollX+wnd[j].cx+wnd[j].innerWidth-(screenX+cx+ix),0) + "px,"
+ Math.max(wnd[j].screenY+event.scrollY+wnd[j].cy+wnd[j].innerHeight-(screenY+cy+iy),0) + "px,"
+ Math.max(wnd[j].screenX+event.scrollX+wnd[j].cx-(screenX+cx+ix),0) + "px)";
}
}
}
}

2つ目は子ウィンドウ同士の重なっている部分を計算してCSSのclipプロパティを用いて透けた画像の表示を行っています。rect(上,右,下,左)でボックスを切り抜きで表示することができます。これをjavascriptで動的に表示領域やスクロール幅を計算して表示しているようです。

これらはonloadでsetInterval(timer2,300);とsetInterval(timer1,30);として呼び出している訳です。子ウィンドウをこういう風に使って遊ぶページは見たことがなかったので非常に興味深かったです。

sweetduet_xray_010.png

赤コーダーになりたい
http://d.hatena.ne.jp/kusano_prog/

製作者の@kusano_kさんは赤コーダーになりたいというブログをやっているようなので興味のある方はそちらもご覧ください。

今回の個人的感想




最近はあまりこういうhtml+css+javascript関連の記事は書いていなかったのですが、久しぶりに紹介したくなり急遽記事を書きました。この技術デモのページを見つけたときは正直驚きました。このページは技術云々よりも、まさにアイデアの勝利というような感じ。いや、もちろん技術もありますが、ウィンドウをこのように使うという発想が何よりもすばらしい。こういう新しい発想ができる人がいるからWebはおもしろいです。

中を開いて見てるとやっていること自体はそんなに難しいことはないのですが、こういうものに応用するという発想とかアイデアがすごいと思います。完成されたものの中の仕組みを見てみれば簡単に見えますが、こういう発想に至りそれを実際に実装してみようと思うところまではなかなかいかないものです。そういった意味でも@kusano_kさんはすごい。

Related article

COMMENT TO THIS ENTRY

どっかで見た絵だと思ったら邦子か

10017

2次を期待していて正解だったw

10028

Choromeを使っていますが・・・服が透けて見えるだけではなく・・・水着もすけているのはなぜでしょう・・・(裸が見えます)

10038

タブで開く設定をどこで変更するのか忘れたせいで楽しめなんだ(´・ω・`)

10082

ふーん

10298

Most Popular

Now loading...

Social Links

Sponsored Link

Popular Article

Access Ranking

Now Loading...

当ブログにリンクしていているサイトの中でアクセス数の多いサイト上位15位が表示されます。今ならリンクするだけで簡単に上位に表示されます。