ちょっと目立つサイトを作るために今後、発展するんじゃないかなと思ってます。
画像のグラフィックの仕組みを紹介できればと思っています。
SAMPLE解説
●STEP1.・・・「画像を刻んで表示する。
以下のサンプルを見てください。
SAMPLE
1枚の画像に見えますが、実はcssのclipで切り抜いた画像を上下に２枚貼り付けています。
<img src="../img/images.jpg" style="position:absolute;clip:rect(0px,650px,217px,0px);"/>
<img src="../img/images.jpg" style="position:absolute;clip:rect(217px,650px,435px,0px);"/>
１つの画像をこれよりもっと細かく刻んで、別々の要素にしてしまうところから始まります。
これをJavascriptで処理するのがStep1です。
SAMPLE
ボタンを押すと1枚の画像要素を引数に受け取り、次々と刻んだ画像要素を挿入していきます。
そして最後に従来の画像要素を削除してしまいます。(見た目的にはわかりませんが処理しています。)
<script language="javascript" type="text/javascript">
//刻み単位(大きくするほど大雑把な処理。しかし処理は軽くなる)
var SLICE_UNIT = 1;
//ぶれ具合(ぶらすほど時間がかかる)
var MOVE = 20;
//グラフィック処理実行中か否か
var ON_THE_RUN = false;
function graphicTest(tarImg){
if(ON_THE_RUN){
return;
}
ON_THE_RUN = true;
//画像を刻んで表示する。
for(var i=0; (i+1)* SLICE_UNIT < parseInt(tarImg.height);i++){
var curImg = document.createElement('img');
curImg.setAttribute('src',tarImg.getAttribute('src'));
curImg.style.position = 'absolute';
var clipStyle = 'rect(' + (i* SLICE_UNIT) + 'px,' + tarImg.width + 'px,' + ((i+1)* SLICE_UNIT) + 'px,0px' +')';
curImg.style.clip = clipStyle;
curImg.style.top = parseInt(tarImg.offsetTop) + 'px';
curImg.style.left = parseInt(tarImg.offsetLeft) + 'px';
tarImg.parentNode.insertBefore(curImg,tarImg);
}
//本対象のイメージは削除してしまう。
tarImg.parentNode.removeChild(tarImg);
}
</script>
●STEP2.・・・刻んだ画像を左右に分散させる。
今回は刻んだ画像を左右に分散させて「にじむ」ようなグラフィック処理にしました。
※ランダム関数を使って手っ取り早くやりたかっただけです。
SAMPLE
ボタンを押すと刻んだ画像が左右に分散します。
<script language="javascript" type="text/javascript">
//刻み単位(大きくするほど大雑把な処理。しかし処理は軽くなる)
var SLICE_UNIT = 1;
//ぶれ具合(ぶらすほど時間がかかる)
var MOVE = 20;
//グラフィック処理実行中か否か
var ON_THE_RUN = false;
function graphicTest(tarImg){
//実行中の場合は処理を続行させない。
if(ON_THE_RUN){
return;
}
ON_THE_RUN = true;
//画像を刻んで表示する。
for(var i=0; (i+1)* SLICE_UNIT < parseInt(tarImg.height);i++){
var curImg = document.createElement('img');
curImg.setAttribute('src',tarImg.getAttribute('src'));
curImg.style.position = 'absolute';
var clipStyle = 'rect(' + (i* SLICE_UNIT) + 'px,' + tarImg.width + 'px,' + ((i+1)* SLICE_UNIT) + 'px,0px' +')';
curImg.style.clip = clipStyle;
//画像をランダムにずらす
var curLeft = Math.floor(Math.random()* MOVE);
if(Math.floor(Math.random()*2) == 1){
curLeft = -curLeft;
}
curImg.style.top = parseInt(tarImg.offsetTop) + 'px';
curImg.style.left = (parseInt(tarImg.offsetLeft) + curLeft) + 'px';
curImg.setAttribute("name","scrollImg");
tarImg.parentNode.insertBefore(curImg,tarImg);
}
//本対象のイメージは削除してしまう。
tarImg.parentNode.removeChild(tarImg);
}
</script>
●STEP3.・・・分散させた画像を本来の位置に(じっくりと)戻していく。
左右に分散した画像を本来の位置に戻していきます。これは、setIntervalメソッドを使って、ユーザーに見せながら実施していきます。これで完成です。
SAMPLE
画像が完全に戻った後は、clearIntervalメソッドでタイマーを破棄。そして刻んだ画像を削除して、元の状態に戻しています。こうすることで、再度、実行可能になります。
<script language="javascript" type="text/javascript">
//刻み単位(大きくするほど大雑把な処理。しかし処理は軽くなる)
var SLICE_UNIT = 1;
//ぶれ具合(ぶらすほど時間がかかる)
var MOVE = 20;
//グラフィック処理実行中か否か
var ON_THE_RUN = false;
function graphicTest(tarImg){
//実行中の場合は処理を続行させない。
if(ON_THE_RUN){
return;
}
ON_THE_RUN = true;
//画像を刻んで表示する。
for(var i=0; (i+1)* SLICE_UNIT < parseInt(tarImg.height);i++){
var curImg = document.createElement('img');
curImg.setAttribute('src',tarImg.getAttribute('src'));
curImg.style.position = 'absolute';
var clipStyle = 'rect(' + (i* SLICE_UNIT) + 'px,' + tarImg.width + 'px,' + ((i+1)* SLICE_UNIT) + 'px,0px' +')';
curImg.style.clip = clipStyle;
//画像をランダムにずらす
var curLeft = Math.floor(Math.random()* MOVE);
if(Math.floor(Math.random()*2) == 1){
curLeft = -curLeft;
}
curImg.style.top = parseInt(tarImg.offsetTop) + 'px';
curImg.style.left = (parseInt(tarImg.offsetLeft) + curLeft) + 'px';
curImg.setAttribute("name","scrollImg");
tarImg.parentNode.insertBefore(curImg,tarImg);
}
//クローンを保持(後で元に戻すため)
var copiedTarImg = tarImg.cloneNode(true);
//クローンかけても画面上の表示位置は覚えていないので、別途保持する。
var tarLeft = parseInt(tarImg.offsetLeft);
//本対象のイメージは削除してしまう。
tarImg.parentNode.removeChild(tarImg);
//画像を元の表示に戻していく。完了したら、従来のHTML構成に戻す。
var timerId = setInterval(function(){
var moveImgCount = 0;
var imgArray = document.getElementsByName('scrollImg');
for(var i=0; i<imgArray.length;i++){
var curImg = imgArray[i];
var curLeft = parseInt(curImg.style.left);
if(curLeft > tarLeft){
curImg.style.left = (curLeft - 1) + 'px';
moveImgCount++;
}else if(curLeft < tarLeft){
curImg.style.left = (curLeft + 1) + 'px';
moveImgCount++;
}
}
if(moveImgCount == 0){
//処理を止める。
clearInterval(timerId);
//画像を元に戻す
imgArray[0].parentNode.insertBefore(copiedTarImg,imgArray[0]);
for(var i=0; i<imgArray.length;i++){
imgArray[i].parentNode.removeChild(imgArray[i]);
}
ON_THE_RUN = false;
}
},40);
}
</script>
●まとめ
ネット上でラスタースクロール処理などがありますが、原理はこれに基づいていると思います。
後、すみません。ちなみに本スクリプトは欠点があります。
・画像を刻んで表示させたとき、画像以降のHTMLのデザインに影響を与えている。（スポンサー広告が上に上がってきている。）
・処理中にブラウザの表示位置を変えるとずれる。(offsetで座標をとってるところが怪しい）
ここらへんは、自身の問題なので、時間があるときに再調整したいと思います。
PR
