クールなスライドjavascript「MouseWheelBodyScroll」

コンテンツ内容が少なかった場合、スライド表示させることで訪問者に中身が乏しいという印象を軽減できる可能性があります。
MouseWheelBodyScrollはページごとにスクロールさせるjavascriptです。
どうやらマウスウィールで遷移できそうですが、当方試す環境がありません。。。

使用方法
下のコードをダウンロードし、headに加えてください。
<script src="http://yourdomain/mootools.js" type="text/javascript"></script>
<script src="http://yourdomain/moo.extend.js" type="text/javascript"></script>
<style type="text/css">
* {margin:0px;padding:0px}
#container {float:left;margin-top:10px}
.scrolling-content {background-color:#fff;position:absolute;padding:15px 30px}
</style>
次に3つのjavascriptを埋め込みます。
申し訳ありませんが、サンプルのソースを参照してください。
ベースHTML
<div id="container">
<div style="height: 400px; width: 100%; overflow:hidden; position:absolute" id="tile-wrap">
<div style="width: 6810px; height: 1704px; background-image: url(tile2.jpg); position: relative;" id="tile-inner">
<div id="contentN" class="scrolling-content" style="left: 10px; top: 100px;">
<h3>ページタイトル</h3>
<p>中身</p>
</div>
<!-- 枚数分 (なおstyleは2ページ目から1024pxずつ加えていきます)-->
</div>
</div>
</div>
クールなスライドjavascript「MouseWheelBodyScroll」サンプル

2007年08月31日

前の記事：画像を3D風に左右に傾かせるjavascript「reflex.js」
次の記事：タブメニューを作成するjavascript「MooTabs1.2」

関連記事

• マウスウィールでも横スクロールするjavascript「horizontinyscrolling.js」
• スクロールさせるjavascript「iscroll」
• ビジュアル面で最高のタイムピッカーJavaScript「nogray_time_picker」
• BOMBERMAN JAVASCRIPT GAME by mootools.js
• [mootools]mooVRotatingMenu

• jQueryでLightBoxを実現するjavascript「jQuery Lightbox Plugin (balupton edition)」
• ビジュアル面で最高のタイムピッカーJavaScript「nogray_time_picker」
• BOMBERMAN JAVASCRIPT GAME by mootools.js
• 3ステップで表をソート＆値を検索できるjavascript「dataTables」
• Movable Type 4.2にバージョンアップ
• ページの目次を自動で作成するjavascript「jqTOC」
• JavaScriptライブラリ「raphael」で図を描く
• ニューデザイン
• Widgetboxで手軽にRSS型ウィジェット（ガジェット）を作る
• 奥から手前にズームするJavaScript「Spacegallery.js」