スライドギャラリー、エフェクトなど、画像関連のmootoolsプラグインまとめ

Ads
目次
    1. Exhibition
    2. Beautiful Thumbnail Hover Effect
    3. Louper
    4. Zoomer
    5. BarackSlideshow
    6. Fun with CSS3 and mootools
    7. slideshow
    8. Slimbox
    9. imagemenu
    10. Background Animations
    11. slideshow
    12. Simple Slideshow
    13. MooTools ScrollSidebar
    14. SlideItMoo
    15. MOOFLOW
    16. Simple 3D Carousel
    17. Pamoorama
    18. ReMooz
    19. moo.rd
    20. iCarousel
    21. Mootools 1.0+ Plugins, Examples, Tutorials & Demos List

最近jQueryばかりなので
備忘録的にmootoolsの
プラグインもいくつかまとめて
おこうと思ってエントリーします。
個人的に使用頻度が高いのは
画像関連なのでそれ中心に。

mootoolsもjQuery同様、軽量なjsライブラリとして人気を集めています。以前話題になったscroll-clock（スクロールバーで作られた時計）もmootoolsを使ってます。「それ、jQueryで出来るよ」というのはとりあえず置いておいて、mootoolsの画像関連プラグインをいくつかご紹介します。

※利用にはmootools.jsが必要です。

Exhibition

mootools01
これいいかも。クリックした画像にスムーズにスクロールします。縦横斜めに動きます。

Exhibition / デモ / [sexy-lightbox href=’http://holyshared.github.com/Exhibition/?TB_iframe=true&height=600&width=850′ title=’Exhibition’]この場でデモを見る[/sexy-lightbox]

Beautiful Thumbnail Hover Effect

mootools02
凄く素敵なエフェクトがサムネイルにかけられます。使ってみたいなぁ・・

Beautiful Thumbnail Hover Effect / デモ / [sexy-lightbox href=’http://www.nitinh.com/static/Thumbnails/index.html#?TB_iframe=true&height=600&width=850′ title=’Exhibition’]この場でデモを見る[/sexy-lightbox]

Louper

mootools03
デモ面白かったですｗ画像にマウスオーバーするとルーペが出現、ドラッグで部分的に拡大出来ます。重ねた画像がルーペを通して表示される、という感じですかね。ルーペも同梱されてますよ。

Louper / デモ / [sexy-lightbox href=’http://mifjs.net/misc/louper/Demo/?TB_iframe=true&height=600&width=850′ title=’Louper’]この場でデモを見る[/sexy-lightbox]

Zoomer

mootools04
こちらもマウスオーバーで拡大させます。Louperは部分的でしたが、コチラは全体をマウスオーバーした際に拡大。エフェクトが素敵。

Zoomer / デモ / [sexy-lightbox href=’http://mifjs.net/misc/zoomer/?TB_iframe=true&height=600&width=850′ title=’Zoomer’]この場でデモを見る[/sexy-lightbox]

BarackSlideshow

mootools05
オバマ大統領のサイトにインスパイアされて作ったそうです。クールなデザインですね。エフェクトも選択可能です。

BarackSlideshow / デモ / [sexy-lightbox href=’http://devthought.com/wp-content/projects/mootools/barackslideshow/Demo/?TB_iframe=true&height=600&width=850′ title=’BarackSlideshow’]この場でデモを見る[/sexy-lightbox]

Fun with CSS3 and mootools

mootools06
cssとmootoolsを使ったアニメーションのサンプル。何ともいえない動きしますね・・

Fun with CSS3 and mootools / デモ / [sexy-lightbox href=’http://demo.rickyh.co.uk/fun-with-CSS3-and-mootools/?TB_iframe=true&height=600&width=850′ title=’Fun with CSS3 and mootools’]この場でデモを見る[/sexy-lightbox]

slideshow

mootools07
自動でも手動でも。スライドショーです。キャプションやエフェクトも素敵です。

slideshow / デモ / [sexy-lightbox href=’http://www.electricprism.com/aeron/slideshow/?TB_iframe=true&height=600&width=850′ title=’slideshow’]この場でデモを見る[/sexy-lightbox]

Slimbox

mootools08
Lightbox風のギャラリー。定番ですね。

Slimbox / デモ / [sexy-lightbox href=’http://www.digitalia.be/demo/slimbox/?TB_iframe=true&height=600&width=850′ title=’Slimbox’]この場でデモを見る[/sexy-lightbox]

imagemenu

mootools09
こちらもよく見かける、画像を使ったメニュー。マウスオーバーでスムーズに動いてくれます。

imagemenu / デモもリンク先にあります / [sexy-lightbox href=’http://phatfusion.net/imagemenu/?TB_iframe=true&height=600&width=850′ title=’imagemenu’]この場でデモを見る[/sexy-lightbox]

Background Animations

mootools10

背景が動きます。シームレスな画像を使えばデモのようなアニメな背景が作れる。デモみないとピンと来ないですよね。。

Background Animations / デモ / [sexy-lightbox href=’http://davidwalsh.name/dw-content/background-animation.php?TB_iframe=true&height=600&width=850′ title=’Background Animations’]この場でデモを見る[/sexy-lightbox]

slideshow

mootools11
先ほどのと同じ名ですが、別のプラグインです。汎用的なギャラリーです。

slideshow / デモは同じページにあります / [sexy-lightbox href=’http://phatfusion.net/slideshow/?TB_iframe=true&height=600&width=850′ title=’Background Animations’]この場でデモを見る[/sexy-lightbox]

Simple Slideshow

mootools12
ボタンが画像の上に配置されるギャラリーです。フェードインアウトします。

Simple Slideshow / デモ / [sexy-lightbox href=’http://davidwalsh.name/dw-content/simple-slideshow-controls.php?TB_iframe=true&height=600&width=850′ title=’Simple Slideshow’]この場でデモを見る[/sexy-lightbox]

MooTools ScrollSidebar

mootools13
なかなか面白い動きをします。スクロールについてくるサイドバー。上に戻る、下に進む、のボタンがあり、スムーズにスクロールします。

MooTools ScrollSidebar / デモ / [sexy-lightbox href=’http://davidwalsh.name/dw-content/scrolling-sidebar.php?TB_iframe=true&height=600&width=850′ title=’MooTools ScrollSidebar’]この場でデモを見る[/sexy-lightbox]

SlideItMoo

mootools14
こちらもスライドショー系。サムネイル表示でコンパクトに納められますね。表示はLightbox風です。

SlideItMoo / デモ / [sexy-lightbox href=’http://www.php-help.ro/examples/mootools_rotator?TB_iframe=true&height=600&width=850′ title=’SlideItMoo’]この場でデモを見る[/sexy-lightbox]

MOOFLOW

mootools15
これ、かっこいいです。バーをスライドさせるとアイコンが大きくなりながら流れていきます。説明難しい・・ぜひデモを。

MOOFLOW / デモも同じページにあります。 / [sexy-lightbox href=’http://www.outcut.de/MooFlow/example-skin.html?TB_iframe=true&height=600&width=850′ title=’MOOFLOW’]この場でデモを見る[/sexy-lightbox]

Simple 3D Carousel

mootools16
需要があるか分かりませんが、3D風にサークル上にアイコンがマウスに合わせて動きます。こんなFlashありましたよね。

Simple 3D Carousel / デモ / [sexy-lightbox href=’http://www.hotajax.org/download/mootools/3d-carousel/index.html?TB_iframe=true&height=600&width=850′ title=’Simple 3D Carousel’]この場でデモを見る[/sexy-lightbox]

Pamoorama

mootools17
パノラマ写真を横にスライドさせてくれます。面白いかも。

Pamoorama / デモ【1】【2】【3】 / [sexy-lightbox href=’http://www.silverscripting.com/pamoorama/sample1.html?TB_iframe=true&height=600&width=850′ title=’Pamoorama’]この場でデモ1を見る[/sexy-lightbox]

ReMooz

mootools18
画像の拡大時にエフェクトをかけます。ダイナミックでなかなかよさ気。

ReMooz / デモ / [sexy-lightbox href=’http://digitarald.de/project/remooz/1-0/showcase/flickr-big/?TB_iframe=true&height=600&width=850′ title=’ReMooz’]この場でデモを見る[/sexy-lightbox]

moo.rd

mootools19
沢山あります。画像がスクロールするエフェクトやフェードアウトするエフェクトなどなど。ぜひお好みのライブラリを探してみてください。

moo.rd

iCarousel

mootools20
サムネイルを使ったスライドメニュー。移動する際のエフェクトがクールです。

iCarousel / デモはリンク先にあります / [sexy-lightbox href=’http://zendold.lojcomm.com.br/icarousel/example3.asp#?TB_iframe=true&height=600&width=850′ title=’iCarouse’]この場でデモを見る[/sexy-lightbox]

Mootools 1.0+ Plugins, Examples, Tutorials & Demos List

mootools21
mootoolsを使ったサンプル集。国内サイトなので英語が苦手な方はこちらをご覧になってはいかがでしょう。画像系以外も沢山あります。

Mootools 1.0+ Plugins, Examples, Tutorials & Demos List

以上、mootoolsの画像系プラグインのまとめでした。バージョン、ライセンス等の詳細はリンク先でお確かめ下さい。

僕は経験が有りませんが、ｊQueryとmootoolsを同じサイトで使いたい、と言う方はjQueryとmootoolsを同時に使う方法が参考になりそうです。

ホーム
トップ
タイトルとURLをコピーしました