[reflect.js2]ステップbyステップ【画像への移り込み効果】
jQuery系です。
【Reflection.js】[LINK]
の導入をステップ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="https://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="https://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" src="https://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="https://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="https://force4u.cocolog-nifty.com/skywalker/prettyPhotoSomethingBlue/Images/7.jpg" />
</div>
</body>
</html>
「reflect.js.6.html.txt」をダウンロード
「reflect.js.6.html」をダウンロード
classで指定するオプションは以下
とても簡単に
クロスブラウザ環境で移り込みを再現できます
便利ですね。
写真を多く見せるサイトではカッコいいですね
画像が変わる場合等や
画像の点数が多い場合は有効です
が
１ケ２ケで固定な画像なら
PNG24で透過画像を作る方がセオリーだろうなぁ
| 固定リンク
「JavaScript」カテゴリの記事
- Google Libraries API(2011.02.02)
- [JQUERY]prettyPhotoのオプション(2010.11.01)
- [reflect.js2]ステップbyステップ【画像への移り込み効果】(2010.09.30)
- [prettyPhoto3]ステップbyステップ【prettyPhoto3の導入】(2010.09.27)
- [javascript]IPアドレスを取得する。(2010.06.26)
この記事へのコメントは終了しました。
[RSS]
コメント