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

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

sponsors

使用方法

使用方法

ちょっと読みにくいですが、ページをめくって読んでください。

手順1

以下のコードをダウンロードし、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>

手順2

3つのjavascriptを埋め込みます。
申し訳ありませんが、ソースを参照してください。

手順3

ベース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">
<!-- 中身(手順4参考) -->
</div>
</div>
</div>

手順4

中身HTML

<div id="contentN" class="scrolling-content" style="left: 10px; top: 100px;">
<h3>ページタイトル</h3>
<p>中身</p>
</div>

なお、styleは2ページ目から1024pxずつ加えていきます。

手順5

テキストアンカーリンク

<div style="position:absolute; top:Npx; left:Npx;width:100%">
<a href="#" onMouseover="panel.clearTimer().toElement($('contentN')); return false;">タイトル名</a>
</div>

sponsors

Javascriptサンプルページ一覧
skuare.net