訪問者驚きの手めくり風、画像ギャラリー作成サンプル
2009年03月24日-
Create a unique Gallery by using z-index and jQuery | This Blog Use jQuery
訪問者驚きの手めくり風、画像ギャラリーを作成できるサンプル。
以下がデモで、実際に試してみましょう。驚きの効果が得られるはずです。
HTML定義部分。分かりやすいコードも魅力です。
<!-- relevant for the tutorial - start -->
<div class="grid_6 prefix_1 suffix_1" id="gallery">
<div id="pictures"> <!--画像の定義部分-->
<img src="images/picture1.png" alt="" />
<img src="images/picture2.png" alt="" />
<img src="images/picture3.png" alt="" />
<img src="images/picture4.png" alt="" />
<img src="images/picture5.png" alt="" />
</div>
<div class="grid_3 alpha" id="prev"> <!--ページ送りのリンク部分-->
<a href="#previous">« Previous Picture</a> </div> <!--前へリンク-->
<div class="grid_3 omega" id="next"> <a href="#next">Next Picture »</a> </div><!--次へリンク-->
</div><!-- relevant for the tutorial - end -->
またまた、jQueryベースのプログラムです。
JavaScriptのプログラム自体は40行ぐらいのもので学習にもよいかも。
紹介先サイトで、HTML、JavaScript、CSSの定義方法について触れられているので、参考にしてもよいですね。
関連エントリ
最新のブログ記事(新着順)
- 和柄背景画像フリー素材
- SVGのローディングアイコン「svg-spinners」
- グリッドにおしゃれなエフェクトをつけるサンプル
- 属性に値を設定するだけでパララックスアニメーションさせられる「Scroll Btween」
- スクロールで要素が迫ってくるようなエフェクトを作る「PushIn.js」
- 総数3.2万個のアイコンライブラリまとめサイト「Iconer」
- 2000個近いフリーのピクトグラムアイコン「tabler-icons」
- ページスクロールで背景ムービーが動くページが作れる「ScrollMovie」
- テキストがシャッフルされてかっこいいMENU実装
- 手書き風ピクトグラムアイコン400種「Doodle Icons」
- 過去のエントリ