[MooTools] SpriteNavigation Plugin

MooToolsとCSSでFlashのような滑らかなマウスオーバーやカレント表示を実装するプラグイン。

spritenavigation plugin

元ネタはCreate a Sprited Navigation Menu Using CSS and MooToolsで、
よくやるコーディングに合わせて作り直しつつちょっとロジックを変えてクラス化した。
使用する際にはHTMLとCSSにいくつかルールがあります。

DEMOはこちら

Image

全部つなげて作る。順番はなんでもいいです。
デモのやつは上から、通常・マウスオーバー・クリック・カレント、になってます。

navigation

Download(psd file):[ダウンロードが見つかりません]

Creative Commons License

“[MooTools] SpriteNavigation Plugin” の続きを読む

[MooTools Tutorial] ページのコンテンツをスライドさせて切り替える

コンテンツを全部横並びの帯状に配置して、ボタンクリックで水平方向にスライド表示させるチュートリアルです。
中身が少なくて写真で誤魔化さざるを得ないようなサイトにもってこいなアニメーション。
Coreだけで作れるのでお手軽だと思います。

View DEMO

View DEMO

Coreクラスのダウンロード方法などは省略しているので、初回のMooToolsのCoreとMoreについてをご覧ください。
なお、Step1~Step3も同じ内容となっています。

“[MooTools Tutorial] ページのコンテンツをスライドさせて切り替える” の続きを読む

[MooTools] mooZoomGallery Plugin

mooZoomGalleryはサムネイル画像から拡大画像への表示を、画像が並んでいるエリア内で行うMooTools用ギャラリープラグインです。
LightBoxのようにレイヤーを被せて表示するのではなく、他のサムネイルを非表示にする事で画像を表示する場所を確保します。
……なんかこの動きどこかで見たような気がしなくもないですが、
このプラグインは全て同じサイズのサムネイル画像を並べたレイアウトに特化しています。

View DEMO
View Demo

“[MooTools] mooZoomGallery Plugin” の続きを読む

[MooTools] mooContreGallery Plugin

mooContreGalleryはhttp://www.contreforme.ch/のProjectsページで使われている
画像拡大、スクロール、インフォメーション表示など一連のエフェクトを貴方のサイトに実装するプラグインです。
本家サイトの動きをClass化+最新バージョンに対応させつつ再現したものですが、
オプションを変更する事によってエフェクトをお好みにアレンジすることが出来ます。


moocontregallery demo

View Demo

当プラグインの公開についてはcontreforme sàrlの中の人に許可を頂きました。
This class original source created from contreforme sàrl. Thank you!

また、このプラグインは「これどうやって作るの?」という質問がきっかけで出来たものです。
jQueryではやる気が出ず、MooToolsでの回答になりましたが(笑)質問を送ってくれたH氏にも感謝!
チュートリアル記事はこちら »

“[MooTools] mooContreGallery Plugin” の続きを読む

[MooTools Tutorial]背景画像を複数読み込んでクロスフェードで切り替える

MoreのAssetsクラスを使うチュートリアル後編です。
前編で背景画像を1枚Assetsクラスで読み込むソースを書きましたが、
今度は背景画像を3枚読み込んでからクロスフェードで切り替えるものに変更します。

View DEMO

導入などの説明はすっ飛ばしてるので前編をご覧下さい。

“[MooTools Tutorial]背景画像を複数読み込んでクロスフェードで切り替える” の続きを読む

[MooTools Tutorial]巨大な背景画像の読み込みとMoreの使い方

MooToolsには豊富な機能拡張クラス(プラグイン)があります。
公式サイトでは基本クラス群をCore、機能拡張クラス群をMoreと称してあるのでそのように覚えておくと良いと思います。
Moreクラスはコアに実装されていない機能を個別に提供するもので、
どれもCoreのクラスに依存しているのでCoreとセットでないと動きません。

Moreの公式サイトでの配布は約60種類、MooTorialに約70種類くらいあります。
大体のことは網羅されているので、そのまま活用するもよし、組み合わせて新しいプラグインを作るもよしです。

このエントリーはそんな便利なMoreクラスの使い方を説明しつつ、
Flashでやってしまいがちな横幅1000pxを越える大きな背景画像の読み込みを、MoreのAssetsクラスを使って行うチュートリアルです。
前編後編で分けていますがタイトルが違うのでご注意を。こちらは前編です。

View Demo

前編:ページ開く→ローディング画像表示と背景画像を1枚読み込み→読み込み完了で背景表示

後編:画像3枚読み込み→クロスフェードでエンドレス切替

ということをやってます。後編はこちら »
“[MooTools Tutorial]巨大な背景画像の読み込みとMoreの使い方” の続きを読む

[mootools] クリックした場所に線を表示する

何しようとしたのか分かる人には分かってしまうかもしれないw
クリックした座標をposition:absoluteのtopまたはleftの数値に置き換えて、
画面上に1pxの線を縦横ランダムに表示します。

縦線・横線はいいけど斜線は画像使うか1px単位で要素出力とかしないとだめかーと思い至って中断。
線が流れるアニメーションにしたほうが面白いかな

canvasの存在を忘れてた

canvasでやりますた AnoRect