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

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

使用方法
下のコードをダウンロードし、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」サンプル

sponsors

「クールなスライドjavascript「MouseWheelBodyScroll」」をシェアする

記事作成:
記事URL:

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