ポインタを合わせるだけでボックス内を水平に動くようにするCSSとMootoolsのあわせ技
2008年03月27日 公開
ちょっとしたサイトのアクセサリーとして使えそうな感じです。
サンプルはこちら
灰色のボックス内のはじっこにマウスを持っていくと、ボックス内だけがスクロールし始めます。
詳細は以下で。
コードは結構簡単
以下のようにmootools.svn.jsを読み込みます。
以下も、bodyタグの前に挿入<script type="text/javascript" src="mootools.svn.js"></script>
html部はこんな感じ。<script type="text/javascript">
window.addEvent('domready', function(){
var scroll = new Scroller('container', {area: 100, velocity: 1});
$('container').addEvent('mouseover', scroll.start.bind(scroll));
$('container').addEvent('mouseout', scroll.stop.bind(scroll));
});
</script>
<div id="container">
<div class="slider">
... add some HML sections here...
</div>
</div>
CSSに関しては、公開サイトの方で確認してみてください。<div id="container">
<div class="slider">
<div class="section">section 1 content</div>
<div class="section">section 2 content</div>
<div class="section">section 3 content</div>
<div class="section">section 4 content</div>
<div class="section">section 5 content</div>
</div>
</div>
わずか数行です。
サンプルセットがダウンロードもできます。
woork: Using CSS and Mootools to simulate Flash horizontal navigation effect