Webやアプリのデザイントレンドを紹介。たまに雑談。

Browse By

Tag Archives: MooTools

[Javascript] Simple Modal – シンプルなModal表示JS

  • Pocket
  • このエントリーをはてなブックマークに追加

シンプルなModal表示JS。シンプルとはいえLightboxよりも多機能で、画像以外にもHTMLやVideo Embedなど様々なフォーマットに対応してます。これ系のLightbox亜種は色々ありますが、トランジションなども含めて綺麗な作りだったので紹介。個人的に残念なのはJSライブラリにmootoolsを使っている点。jQueryの方が色々使いやすい場面多いんスよねー。DLするにはアイコンをドラッグしましょう。あとこのサイト、リロードすると色が変わります。なんだかえらくかっこヨくてシビれました。

[WEB DESIGN] 10 front-end techniques to improve your site usability – サイトのユーザビリティを印象的にする10のテクニック

  • Pocket
  • このエントリーをはてなブックマークに追加

サイトのユーザビリティを印象的にする、10のテクニック。主にJavascriptを使った機能面でのサイトの充実を目指すものです。JSといっても、ここではいわゆるデザイン面での装飾ではなく、あくまでもユーザーの利便性を上げるための機能的な補強です。例えばテーブル内のデータをユーザーの都合によってソートする、YouTubeのようにユーザーサイドでレイアウトを変更する、ウィザード形式の入力フォーム、外部リンクにアイコンを追加、iCalライクなカレンダー表示、パスワードの脆弱性チェック、レーティングなどがその内容です。ソーシャル系などの、CGMサイトにおいてあったら便利だな、と思うような内容が多いですね。

[JAVASCRIPT] Floom – Blinds-effect MooTools slideshow – MooToolsを使ったクールなスライドショー

  • Pocket
  • このエントリーをはてなブックマークに追加

MooToolsを使ったクールなスライドショー。ブラインドが開くようなトランジションを使って写真を紹介できます。デモページはこちら。写真の下に、スライドショーの表示時間の残りをプログレスバーで見る事ができる点が機能的にナイス。またCSS3のtext-shadowが細かく使用されていて、デザイン的にもとってもクール。スタイリッシュに写真を見せたい時に使えそうなJavascriptです。

[JAVASCRIPT] 30+ Animated Tab-Based Interface and Accordion Scripts – JSを使った、アニメーションするタブやアコーディオン表現まとめ

  • Pocket
  • このエントリーをはてなブックマークに追加

Javascriptを使って表現する、アニメーションするタブやアコーディオンインターフェースをまとめた記事。アニメーションするというだけあって、その多くはjQueryやmootoolsなどのJSライブラリを使用しています。この記事自体はちょっと古いんだけど、紹介されている内容がアツかったので紹介。タブとアコーディオンインターフェースはそれぞれ分けて紹介されてます。CSS 3になると:targetを使う事で、こうした表現もラクチンになりますな。

[JAVASCRIPT] 25 Useful MooTools Tutorials – ナイスなMooToolsプラグインと、そのチュートリアル

  • Pocket
  • このエントリーをはてなブックマークに追加

わりと最近じゃJSガラみのエントリというと、jQueryプラグインが多いですが、こちらで紹介されてるのはmootools関係のプラグイン。それぞれチュートリアル付きで25例紹介されてます。動きやエフェクトに関して充実しているのはどちらも一緒ですね。mootools導入済みサイトなんかで是非これひとつ。