mootools 92 Plugins：skuare.net

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

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

via : MooFlow

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

華麗なメニューを作成する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「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

j

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

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

via : textLimit

フォントの大きさを変更する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「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