mootools 112 サンプル：skuare.net

JavaScriptライブラリのmootoolsのプラグインを利用して出来るサンプルです。
Ajaxライブラリの一つmootoolsは、必要十分なメソッドに抑え、軽く、早いのが特徴です。
ここでは、画像関連、メニュー関連、フォーム関連、テキスト関連、その他、日本語未解説の分類でAjaxライブラリmootoolsを紹介しています。

Image(19)
Menu(13)
Form(8)
Text(9)
Other(18)
W/O_JP(45)

JavaScriptはOnにしてください
以下のように表示されます

mootoolsでLightbox「Picbox」 only 5kb

JavaScriptライブラリのmootoolsでLightboxを実現するPicboxです。よくある感じではありますが、わずか5kbです。また拡大画像のドラッグや等倍化なども可能です。

via : Picbox

クールな画像ギャラリーを作成できるJavaScript「UvumiTools Gallery Plugin」

LightBoxなんてもう古い。もっとクールに画像を見せ付けましょう。 JavaScriptライブラリmootoolsのプラグイン「UvumiTools Gallery Plugin」です。

via : UvumiTools Gallery Plugin

マウスホイールで画像を拡大／縮小できるJavaScript「Animated Panel」

マウスホイールが主流となってきつつある昨今、画像だってマウスホイールで拡大／縮小したい。そんな欲求が出てくるのも時勢かもしれません。 Animated PanelはJavaScriptライブラリのmootoolsを利用して、実現しました。

via : Animated Panel

mootoolsでも画像をめくるように遷移させるJavaScript「mooStack」

画像をめくるように切り替えるJavaScriptをいくつか紹介してきました。そんな便利なJavaScriptをmootoolsでも可能にしたのが、mooStackです。

via : mooStack

画像に奥行き感をもたせられるJavaScript「mParallax」

レイヤー表示（？）JavaScript「jParallax」は、重ねたPNG画像が動くなど奥行き感を出せました。そんな、JavaScriptのmootools版「mParallax」です。

via : mParallax

Appleぽい画像ギャラリーjavascript「MooFlow」

AppleのiTunesやCoverFlowで使用されているギャラリーに影響を受けたjavascriptです。画像が多くなると滑らかではないですが、正直こんなのが欲しかったと思うスクリプトです。その名も、MooFlowです。

via : MooFlow

mootoolsで、いい感じに横スクロールするJavaScript「mooHorizonSlider」

ECなどではスペースの有効活用のため、また楽しさを醸し出すために横スクロールさせる手法が多く見られます。
今回はそれをJavaScriptライブラリのmootoolsを使用して可能にした「mooHorizonSlider」を紹介します。

via : mooHorizonSlider

セクシーなLightBoxを実現するJavaScript「Sexy LightBox」

LightBoxの亜種が様々出ています。 mootool.jsをベースとするSexy LightBoxもその一つです。しかもセクシーという触れ込み。。。

via : Sexy LightBox

JavaScriptライブラリ「mootools」で3Dぐるぐるさせる

最近、英語で言うところのcarousel（回転木馬）と言われる画像をぐるぐる回すのがはやっています。これをJavaScriptライブラリ「mootools」を使用して3Dにした「Mootools 3D Carousel」を紹介します。

via :Mootools 3D Carousel

Windows Vistaライクな画像ギャラリーjavascript「ImageFlip」

最近の画像ギャラリーの進化ぶりには目を見張るものがあります。 ImageFlipはWindows Vistaからヒントを得て作られたjavascriptの画像ギャラリーです。

via : ImageFlip

javascriptライブラリ「mootools」でパズルを作成する

Slide Puzzle in JavaScript (mootools)では簡単に画像からパズルを作成するjavascriptを公開しています。

via : Slide Puzzle in JavaScript (mootools)

簡単に画像を拡大できるjavascript「Thumbnoo」

ギャラリー系javascriptでは、拡大用とサムネイル用の画像2種類を必要とする場合があります。しかし、いちいち作成していてはサーバー容量があっという間に満杯になってしまいます。 Thumbnooはサムネイルいらずで簡単に画像を拡大させることができます。

via : Thumbnoo

画像に影やリフレクションを付けるjavascript「efxFactory」

サイト作成時によく使用する画像。それを加工したいと思うのはサイト運営者の性でしょう。 efxFactoryは、画像に影やリフレクションを付与できるmootoolsベースのjavascriptです。

via : efxFactory

回転式の画像ギャラリーjavascript「MooRevolver」

Eコマースなどで商品を陳列する際、一定時間で商品を変更していくケースがあります。その場合にMooRevolverを使用すると、全商品を可視にしながらもエフェクトを付けることができます。

via : MooRevolver

画像をクールに表示するjavascript「mooSlide」

ホームページなどでは画像を表示させる際に「LightBox」やその派生品を使用するケースが増えてきています。 artViperのmooSlideも派生品の一つですが、表示の仕方がよりクールです。

via : mooSlide

華麗なイメージギャラリー＆スライドショーを実現するjavascript「SmoothGallery」

ブログでは写真を掲載するケースが多いですが、奇麗にかつ見やすく表示するのは困難をともないます。 JonDesignが提供するSmoothGalleryでは華麗なイメージギャラリーに加えて、スライドショーも実現できます。

via : SmoothGallery

画像をスライド表示させるjavascript「iCarousel」

Web上には無限のスペースがあるとはいえ、やはりディスプレイの表示領域には限界があります。 Fabio Zendhi NagaoのiCarouselを使用すると、ニュースティッカーや画像のスクロール表示をすることが出来ます。今回は商品説明などでよく使われるような、画像のスライド表示を説明します。

via : iCarousel

動画も対象のLightbox系javascript「Mediabox」

Web2.0の象徴といえば画像をクールに表示できる「Lightbox」があります。しかしLightboxでは画像のみが対象でした。 MediaboxはフラッシュはもちろんYouTubeなどの動画サイト、iflameまで表示できます。

via : Mediabox

スライドショーを作成するjavascript「Slideshow」

スライドショーを作成するjavascriptのうち画像間のエフェクトを変更できるのはあまり多くありません。 Slideshowはエフェクト（種類・時間）、ナビゲーションの方法などを変更することができます。

via : Slideshow

mootoolsで3Dメニュー「JavaScript 3D Cube Menu」

サイトの重要要素、メニューがこんな風にできると凄く印象的になります。 JavaScriptライブラリmootoolsを利用したJavaScript 3D Cube Menuです。

via : JavaScript 3D Cube Menu

mootoolsで洗練されたメニューを作成する「Lavish Menu」

メニューはサイトを構成する重要な要素であり、最も目に触れる部分です。そのデザインにこだわる方に、以前華麗なメニューを作成するjavascript「FancyMenu」を紹介しましたが、今回のも負けてはいません。 JavaScriptライブラリmootoolsの「Lavish Menu」です。

via : Lavish Menu

華麗なメニューを作成するjavascript「FancyMenu」

メニューを作成する時にjavascriptやCSSでロールオーバーした時に異なる印象を与える仕組みを作ることがあります。そのロールオーバーに新たな仕組みをdevthoughtのFancy menuが提供しています。

via : Fancy Menu

javascriptライブラリ「mootools」でポップなメニューを作成する

メニューは訪問者が一番目にする機会の多い場所です。そのため、目立ち、わかりやすいメニューを作成することが求められます。 popMenuではmootoolsを使用し、簡単に動きのあるメニューを作成する方法を紹介しています。

via : popMenu

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

コンテンツ内容が少なかった場合、スライド表示させることで訪問者に中身が乏しいという印象を軽減できる可能性があります。 MouseWheelBodyScrollはページごとにスクロールさせるjavascriptです。

via : MouseWheelBodyScroll

サイドバーをセクシーに開閉させるjavascript「SlidingSideBar」

Webデザインを行う際に、見やすさが重要な要素の一つにあげられます。この観点から言えば余計なものは削除する必要がありますが、サイト開設者としてはどうしても表示したいものがあります。 Andrew SellickのSexy sliding JavaScript side bar menuではデザインにも配慮した開閉式のサイドバーを作成することが出来ます。

via : Sexy sliding JavaScript bar menu

開閉するサイドバーを作成するjavascript「PBB SideBar」

コンテンツを重視する観点から、メニューなどは必要に応じて開閉できると良いかもしれません。 PBB SideBarはエフェクト付きでサイドバーを開閉できるjavascriptです。

via : PBB SideBar

メニューツリーを作成するjavascript「Slidinglist」

メニューをツリーで作成すると、サイトの構造が見えやすくなります。 Slidinglistでは地味になりがちなツリーメニューに動きを加えています。

via : Slidinglist

javascriptライブラリ「mootools」でアコーディオンメニュー

サイトを制作する際に重要なのがメニューで、メニューの項目が増えるとアコーディオン形式のメニューが重宝されます。今回はjavascriptライブラリ「mootools」でアコーディオンメニューを作成します。

via : Mootools: horizontal accordions

タブメニューを作成するjavascript「MooTabs1.2」

メニューにもさまざまな種類がありますが、エフェクトありだとアコーディオンやタブが主流でしょう。そんなタブメニューに動きを加えたスクリプトです。 MooTabs1.2はmootoolsベースで簡単にタブメニュ－を作成できます。

via : MooTabs

スライドするタブメニューjavascript「Perspective tabs」

タブメニューを採用するケースがあると思いますが、タブの数が多くなると想定の横幅に収まらないときがあります。 Perspective tabsはタブをスライドさせることができ、省スペースで多数のタブを収納できるようになります。

via : Perspective tabs

MacライクなDockメニューを作成するjavascript「PBB Dock」

Macで好評なDockメニュー。アイコンでメニューを視覚的に表示するとともに伸縮自在にすることで、非常にユーザビリティに優れています。 PBB DockはjavascriptでDockメニューを実現しています。

via : PBB Dock

スクロールさせるjavascript「iscroll」

なんと表現したらいいのか分からないけれど、スクロールさせられるjavascript。あまりのスムーズさに何度もスクロールしてしまいます。 mootoolsベースでSeitentitelで公開されています。

via : MooScroll

ビジュアル面で最高のタイムピッカーJavaScript「nogray_time_picker」

時間を指定できるタイムピッカーは、多くありますが、ここまでデザイン性に富んだものはなかったかと思います。
NoGray Time Pickerはサンプルをご覧いただければわかりますが、まさに時計型です。
これにより、直感的な操作でユーザビリティが向上可能です。

via : NoGray Time Picker

フォームの項目をチェックするjavascript「fValidator」

双方向性時代になりフォームは重要性を増し、簡便性に加え入力チェックが必須となってきています。 Fabio Zendhi NagaoのfValidatorでは、リアルタイムにフォームの項目をチェックすることができます。

via : fValidator

フォームをリアルタイムでチェックするjavascript「FormCheck」

フォームで入力を間違われると確認のしようがなくなる可能性がありますそのためにもフォームの入力項目を確認する必要があります。 Formcheck 2ではリアルタイムに入力内容を確認し、異なる場合は、ヒントを出すjavascriptを公開しています。

via : Formcheck 2

フォームに吹き出しでヒントを出すjavascript「Hints.js」

フォームでは作成者と入力者の意図が一致しないときがあります。またユーザビリティの観点からもわかりやすいフォーム制作が求められます。 Hints.jsを挿入するとフォームに吹き出しでヒントを出すことができます。

via : Hints.js

超クールなカレンダーjavascript「Calendar」

これまで多くのデートピッカーと呼ばれるカレンダーを紹介してきました。しかし、総じて地味な外見が多かったです。今回紹介するCalendarは超クールなカレンダーを作成できるjavascriptです。

via : Calendar

フォームで複数ファイルを送信するjavascript「Multiple file upload」

通信環境の発展で画像や動画をアップロードする機会が増えています。 Multiple file uploadはフォームから複数のファイルを送信することができるjavascriptを公開しています。

via : Multiple file upload

フォームを彩るjavascript「mooFancyForm」

フォームを外見をデザインすることで、訪問者のコンタクト率の上昇が期待できます。 FancyFormを使用すれば、checkboxとradioの印象を良くすることができます。

via : FancyForm

javascriptライブラリ「mootools」でtextareaの文字数を制限する

フォームなどでのフリーアンサーは文字数を指定したいことがあります。 textLimitではmootoolsベースで、文字数を制限する方法を紹介しています。

via : textLimit

JavaScriptライブラリ「mootools」でテキストにエフェクトをかける

Mootools Function Chainingにて面白い表現が紹介されていました。 JavaScriptライブラリ「mootools」を使用し、テキストにエフェクトをかける方法です。

via : Mootools Function Chaining

フォントの大きさを変更するjavascript「fontSize.js」

ユニバーサルデザインという言葉がWeb業界でも言われ、フォントのサイズを3段階に変更できるサイトも増えています。しかし、開設者側の見やすさと閲覧者が望む見やすいフォントサイズは果たして一致しているのでしょうか。 justinmaierでは、既存の概念とはひと味違う方法でフォントの大きさを変更できる「fontSize」を公開しています

via : fontSize

フォントの種類を変更するjavascript「Selector.js」

ホームページを作成する時に悩むのがフォントの種類。見る環境や人によって最良のフォントは変わってきますので、非常に難しいところです。 justinmaierでは、Web上でフォントの種類を変更できる「fontSelector.js」を公開しています。

via : fontSelector.js

テキストの書き換えを可能にするjavascript「inLineEdit.js 2」

オンライン上でテキストの変更が可能になればサイトの管理がしやすくなるでしょう。またブログなどで閲覧者が投稿したコメントを閲覧者自身が書き換えたい時などにも効果的です。 justinmaierで公開しているテキスト変換script「inLineEdit.js 2」による上記のような課題を解決することができます。

via : inlineEdit Plugin

テキストを書き換え可能にするjavascript「inLineEdit Plugin」

テキストの書き換えを可能にするjavascript「inLineEdit.js 2」は複数行に渡る書き換えができないことや書き換えられる範囲がわかりづらいことが難点でした。 justinmaierがこれを解決するinLineEdit Pluginを提供しています。

via : inlineEdhit.js 2

高機能な文字書き換えjavascript「class.editInPlace.js」

WEB2.0と言われる昨今、サイト上で文字を書き換えられるケースが増えています。 class.editInPlace.jsはEditInPlaceと呼ばれる文字を書き換えられるjavascriptを公開しています。

via : class.editInPlace.js

テキストボックスを伸縮させるjavascript「resizeTextarea」

ディスプレイの表示領域は使用環境によって異なってきます。そのため、限れられたスペースを有効活用することが求められます。 Eject MediaではmootoolsベースのresizeTextareaを公開し、テキストボックスの伸縮を可能にしています。

via : resizeTextarea

テキストに影をつけるjavascript「text drop shodow」

文字や画像を強調したい時に影をつけることがあります。画像はWeb上でもできましたが、テキストではできませんでした。 pr0digy.comでは、テキストに影を付けられるMootools text drop-shadowを公開しています。

via : text drop-shadow

javascriptライブラリ「mootools」でリンクを目立たせる」

メニューなどリンクを張っているテキストは出来れば目立たせたいです。 CSSでa:hoverで変化を付け加えることが出来ますが、できればもう少しという欲張りな方へ。 javascriptライブラリ「mootools」でリンクを目立たせる方法を紹介します。

via : Sample Nav Bar

テキストや画像をアスキーアートにするJavaScript「MooAsciiArt 」

J久しぶりにmootoolsからの紹介です。 MooTools ASCII Artは、その名の通り、テキストや画像をアスキーアート化します。

via：MooTools ASCII Art

クールな動きで時間を表示するJavaScript「Learn how to Create a Retro Animated Flip-Down Clock」

JavaScriptライブラリのmootoolsを使用して、時間をめくるような感じで表示します。この動きはティザーサイトのカウントダウンに使えそうですね。

via：Learn how to Create a Retro Animated Flip-Down Clock - Nettuts+

JavaScript「MooCage」でカウントダウンさせる

JavaScriptライブラリのmootoolsを利用して、カウントダウンをさせます。

via：MooCage

JavaScriptライブラリmootoolsでもコナミコマンド「Konomi_Mootools」

以前紹介したjQueryでコナミコマンドをJavaScriptライブラリのmootoolsでも実現してみましょう。

via：Konomi_Mootools

要素に重力を与えられるJavaScript「AvriBubble」

WEBは平面的ですが、そこに重力を加えられると表現の幅が広がりそうです。 AvriBubble : a very ligth 2D engine based on Mootoolsは要素に重力のようなものを与えられます。

via : AvriBubble

mootoolsで複数エレメントを操作する「Fx.Presets」

JavaScriptライブラリのmootoolsベースであるFx.Presetsを利用すると複数エレメントの動きを操作できます。今回は動きが面白いExpanding Boxesを紹介します。

via : Fx.Presets

mootoolsでコードをシンタックスハイライトさせるJavaScript「Lighter.js」

サイト上でhtmlやjsなどを紹介する時に、わかりやすく表示できると見る人もうれしいでしょう。 Lighter.jsはJavaScriptライブラリmootoolsを利用してシンタックスハイライトを可能にします。

via : Lighter.js

クールなウィンドウを表示できるjavascript「Mocha」

ユーザーインターフェースは訪問者の印象を左右する重要な要素です。 MooTools Mocha UIを使用することでクールなウィンドウを表示できます。

via : MooTools Mocha UI

テーブルの表を伸縮させるjavascript「ElasticTable」

テーブルで多くの項目を作りたいけどスペースが・・・という悩みは、このjavascriptで解消されそうです。 ElasticTableはテーブルで作成した各項目を自在に伸縮してくれます。

via : ElasticTable

既存のテーブルを簡単にソートさせるjavascript「Table-Sort」

テーブルで作成した表をソートさせるjavascriptは多くありますが、内部を少しいじらなければならないケースが多いです。 Table-Sortは、既存の仕組みでそのまま簡単にソートさせることができるjavascriptです。

via : Table-Sort

javascriptでCSSを操る「Dynamic CSS via JavaScript」

便利なのかわかりませんが、CSSをjavascriptで指定できるDynamic CSS via JavaScriptです。 javascriptなどの各プログラミング言語を使用してる人にとっては、ループや条件分岐できて便利なのかな。

via : Dynamic CSS via JavaScript

クールにロールオーバーするjavascript「flippyMOO」

マウスをロールオーバーするとコンテンツが表示される方法は数多くあります。しかし、flippyMOOのようにクールなのも少ないでしょう。

via : flippyMOO

色をHEX、RGB、HSBで表示するカラーピッカーjavascript「mooRainbow」

Webでの色の指定は16進法を意味するHEXで指定することになります。しかしHEXはRGBなどと比較すると一般的ではなく、色の指定が難しいことがあります。 mooRainbowというサイトでは、色指定をHEXで簡単に行えるカラーピッカーと呼ばれるjavascriptを公開しています。

via : mooRainbow

色を選択するカラーピッカーjavascript「Mootools Colo(u)r picker」

フォームで色を指定させることがあれば、色を選択できるカラーピッカーが有効です。視覚的に明度や色相を判別でき、感覚的なHEXでの色入力が可能です。 Mootools Colo(u)r pickerではmootoolsベースのカラーピッカーを公開しています。

via : Colo(u)r picker

日本語OKの日付選択javascript「PBBDatePicker」

フォームで日付を選択してもらう際に便利な日付選択javascriptデートピッカーデートピッカーを用いれば視覚的に年月はもちろん数年先の曜日も判明します。 PBBDatePickerでは、mootoolsベースのデートピッカーを公開しています。

via : PBBDatePicker

カレンダー表示＆日付選択させるjavascript「Fancy MooTools Date Picker」

申込フォームなどでは、よく日付を入力してもらうことがあります。これを簡単にかつ奇麗なデザインで実現したFancy MooTools Date Pickerを紹介します。

via : Fancy MooTools Date Picker

タイムライン作成javascript「Timeline」

年表などを作成するとき時系列で並べると便利ですが、長くなりすぎるとページに収まりません。そこでTimelineを使用すると、ある一部分のみを表示することができます。

via : Timeline

画像も角丸にするjavascript「roundedcorners」

今回はjavascriptライブラリ「mootools」で角丸を実現します。roundedcornersでは、画像も角丸にできるjavascriptを公開しています。＊画像も使用しているので少し煩雑かもしれません。

via : roundedcorners