skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

クールなスライド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」