« [JeditX]特定の文字以外を削除【正規表現】 | トップページ | [Favicon]faviconの記述(いまさらだけど)【apple-touch-icon-precomposed】 »

[reflect.js2]ステップbyステップ【画像への移り込み効果】



jQuery系です。
Reflection.js[LINK]新しいウィンドで開きます
Force4u00220930_190518


の導入をステップbyステップで

 

【1】HTMLを用意します。



<!DOCTYPE html> 
<html lang="ja"> 
<head> 
<title>[reflect]</title>
<style type="text/css">
html { 
display: block;
}
body{
background-color: #000;
}
</style>
</head>
<body>
<div align="center">
<noscript> </noscript>
</div>
</body> 
</html> 




効果がわかりやすいように
背景を黒にしています。

「reflect.js.1.html.txt」をダウンロード

「reflect.js.1.html」をダウンロード

 

【2】画像を配置します。



<!DOCTYPE html> 
<html lang="ja"> 
<head> 
<title>[reflect]</title>
<style type="text/css">
html { 
display: block;
}
body{
background-color: #000;
}
</style>
</head>
<body>
<div align="center">
<noscript> </noscript>
<img src="http://force4u.cocolog-nifty.com/skywalker/prettyPhotoSomethingBlue/Images/7.jpg" />
</div>
</body> 
</html> 



「reflect.js.2.html.txt」をダウンロード

「reflect.js.2.html」をダウンロード


 


【3】reflect.jsを組み込みます



<!DOCTYPE html> 
<html lang="ja"> 
<head> 
<title>[reflect]</title>
<style type="text/css">
html { 
display: block;
}
body{
background-color: #000;
}
</style>
<script type="text/javascript" src="http://force4uip.appspot.com/reflect/reflection.js"></script>
</head>
<body>
<div align="center">
<noscript> </noscript>
<img class="reflect rheight50 ropacity30" src="http://force4u.cocolog-nifty.com/skywalker/prettyPhotoSomethingBlue/Images/7.jpg" />
</div>
</body> 
</html> 





「reflect.js.3.html.txt」をダウンロード

「reflect.js.3.html」をダウンロード

 


【4】imgタグにclass指定します。
形式は

class="reflect rheight50ropacity30"


となります。



<!DOCTYPE html> 
<html lang="ja"> 
<head> 
<title>[reflect]</title>
<style type="text/css">
html { 
display: block;
}
body{
background-color: #000;
}
</style>
<script type="text/javascript" src="http://force4uip.appspot.com/reflect/reflection.js"></script>
</head>
<body>
<div align="center">
<noscript> </noscript>
<img class="reflect rheight50 ropacity30"&#xA0;src="http://force4u.cocolog-nifty.com/skywalker/prettyPhotoSomethingBlue/Images/7.jpg" />
</div>
</body> 
</html> 



「reflect.js.4.html.txt」をダウンロード

「reflect.js.4.html」をダウンロード


 

【5】マウスイベントを追加します。



<!DOCTYPE html> 
<html lang="ja"> 
<head> 
<title>[reflect]</title>
<style type="text/css">
html { 
display: block;
}
body{
background-color: #000;
}
</style>
<script type="text/javascript" src="http://force4uip.appspot.com/reflect/reflection.js"></script>
</head>
<body>
<div align="center">
<noscript> </noscript>
<img onmouseover="Reflection.add(this, { opacity: 2/3 });" onmouseout="Reflection.add(this, { opacity: 1/3 });" class="reflect rheight50 ropacity30" src="http://force4u.cocolog-nifty.com/skywalker/prettyPhotoSomethingBlue/Images/7.jpg" />
</div>
</body> 
</html> 




「reflect.js.5.html.txt」をダウンロード

「reflect.js.5.html」をダウンロード

 

【6】クリックイベントを追加する事もできます。



<!DOCTYPE html> 
<html lang="ja"> 
<head> 
<title>[reflect]</title>
<style type="text/css">
html { 
display: block;
}
body{
background-color: #000;
}
</style>
<script type="text/javascript" src="http://force4uip.appspot.com/reflect/reflection.js"></script>
</head>
<body>
<div align="center">
<noscript> </noscript>
<img onclick="Reflection.add(this, { height: 1/3, opacity: 2/3 });" class="reflect rheight50 ropacity30" src="http://force4u.cocolog-nifty.com/skywalker/prettyPhotoSomethingBlue/Images/7.jpg" />
</div>
</body> 
</html> 



「reflect.js.6.html.txt」をダウンロード

「reflect.js.6.html」をダウンロード

 

classで指定するオプションは以下

Force4u00220930_192604


Force4u00220930_192702

Force4u00220930_193325


 

とても簡単に
クロスブラウザ環境で移り込みを再現できます
便利ですね。
写真を多く見せるサイトではカッコいいですね
フォトアルバム等
画像が変わる場合等や
画像の点数が多い場合は有効です

1ケ2ケで固定な画像なら
PNG24で透過画像を作る方がセオリーだろうなぁ

|

« [JeditX]特定の文字以外を削除【正規表現】 | トップページ | [Favicon]faviconの記述(いまさらだけど)【apple-touch-icon-precomposed】 »

JavaScript」カテゴリの記事

コメント

この記事へのコメントは終了しました。