ホームページを作る人のネタ帳


売れない、人が来ないホームページにならない為の、インターネットの知識とブログネタ

ポインタを合わせるだけでボックス内を水平に動くようにするCSSとMootoolsのあわせ技


スポンサード リンク

CSS+

ちょっとしたサイトのアクセサリーとして使えそうな感じです。
サンプルはこちら
灰色のボックス内のはじっこにマウスを持っていくと、ボックス内だけがスクロールし始めます。

詳細は以下で。

コードは結構簡単


以下のようにmootools.svn.jsを読み込みます。

<script type="text/javascript" src="mootools.svn.js"></script>

以下も、bodyタグの前に挿入

<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>

html部はこんな感じ。

<div id="container">
<div class="slider">
... add some HML sections here...
</div>
</div>

<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>

CSSに関しては、公開サイトの方で確認してみてください。
わずか数行です。

サンプルセットがダウンロードもできます。
woork: Using CSS and Mootools to simulate Flash horizontal navigation effect




新ブログ:ITクオリティもよろしく。
スポンサード リンク


はてなRSSへ追加 My Yahooへ追加 Livedoorへ追加 Google Readerへ追加

はてなブクマこのエントリーを含むはてなブックマーク livedoorクリップ livedoorクリップ Buzzurlにブックマーク Buzzurlにブックマーク newsing it! del.icio.usでブックマーク
私の他のブログの更新状況
RSS表示パーツ
最近のエントリー
» Photoshopちょいテク『惑星を作ってみよう』+360度パノラマ画像も作れるように
» 最近、ブログを書いている途中に筆が止まる理由がわかった気がする
» ブログエントリ別に見る『注目度10の法則』
» 天才という言葉は、生きている人にいう言葉じゃない気がする
» まるでphotoshop!JavaScriptで実装するクールなカラーピッカー[prototype.js]
» 今後の期待度が高いphotoshopブラシまとめサイト『Quality Brushes for Photoshop』
» FLASHサイト作成インスピレーションの参考になるflashサイト7つ
» あの時、何気なく吸い始めた一本のタバコの値段が900万だと知ったとき
» jQueryサンプル公開後の反省会。みなさんからのアドバイスを5本サンプル化
» [追記]数百件先の画像まで一気に検索してしまうインターフェイスを搭載したfirefoxアドオン
» プロとアマの違いってぶっちゃけたったひとつ
» 一晩で覚えるjQueryの逆引き基礎サンプル7つ
» あなたは大丈夫?知らず知らずのうちに感じている10のパソコンストレス
» よごれた感じのフォトショップチュートリアルとブラシ
» 第2回web開発者インタビュー。マチウケメール便開発者『開発環境はeclipseです!』

ホームページを作る人のネタ帳トップへ

Comment

当ブログのコメントポリシーはこちら

 
管理人にのみ表示する
 

Home

ブログ記事を検索

Google

カテゴリー

月別過去記事

RSSフィード

私のおすすめ書籍

リンク

お問い合わせとか

お問合せ、広告について

名前:
メール:
件名:
本文:

プラグイン

あわせて読みたい

フィードメーター - ホームページを作る人のネタ帳

SPONSORS


このブログについて

当サイトはインターネットでのデザインや、ホームページ作成に関する私Yamadaの個人的勉強をネタとしてご紹介するサイトになっています。 
>> 管理人プロフィール
>> このブログの人気記事
メールでホームページを作る人のネタ帳を購読





私が個人的に作ったり運営しているサイト
■アイデアノート
■WEB9.0 ホットなWEBサービスを
■ブログ支援【e】パレット(超人気)
■どばっと動画検索 イーチューブ
■ブログネタ収集用『BMF』
■PHPプログラムを作る人のメモ帳
■SEO上級者マニュアル

この日記のはてなブックマーク数

最近のエントリー

タグクラウド

最近のトラックバック

最近のコメント