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

Browse By

Tag Archives: Javascript

[JAVASCRIPT] sexyCycle image jQuery plugin – セクシーな動きのイメージスライダー

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

jQueryとjQuery Easing Pluginを使ったイメージスライダー。jQueryはオンライン上のものを参照し、jQuery Easing Pluginは同梱されています。セクシーというだけあって動きがイイです。スライドの操作も、画像クリックと「Prev — Next」での両方が使えるので、ウェブ上でスライドやフォトギャラリーなどを制作する際に使い勝手が良さそう。

[JAVASCRIPT] 20 Fresh JavaScript Data Visualization Libraries – JSを使った、データを視覚化するツール

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

Javascriptを使って、データを視覚化するツールが紹介された記事。JSライブラリは限定されておらず、jQueryやMootoolsプラグインの形を取るものが多いです。以前は数値を動的にグラフ化する際にはFlashが使われる事が多かったけど、最近ではJSを使った表現が多いようです。導入さえ済ませばグラフそのものは動的に生成してくれるので便利ですね。

[JAVASCRIPT & CSS] 14 jquery and CSS demos I wish I knew much before – jQueryとCSSを使ったクールな表現

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

jQueryとCSSを使って行うクールな表現がまとめられた記事。CSSで装飾するのはコレ系のテクニックでは当然のことなので、いわゆるクールなjQueryプラグイン、みたいな内容です。スライダー、CSSスイッチャー、アコーディオン、動きのあるホバー表現、フェードを使ったホバー表現、ポップアップ、CSS Sprite、ドロップダウンなどが紹介されてます。サイト内でJSを使ってリッチな表現を行いたい場合にナイスな記事。

[CSS & JAVASCRIPT] 45 Powerful CSS/JavaScript-Techniques – CSSやJSを使った使えるテクニック

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

CSSとJavascript。以前はHTMLさえ書ければウェブデザイナーと言われましたが、最近じゃこのあたりも含めて理解できないとウェブデザイナーとは言えないそうです。というわけでCSSとJSを使った、使えるテクニックをまとめた記事。オンマウス時のアクションをJSで工夫したものや、ひとつの画像をウマく使い回すためのTips、動きを使って表現するJSなど、リッチな表現を目指す際に有効なテクニックが色々紹介されてます。各リンク先では細かな実装方法などの解説もあり勉強になります。

[JAVASCRIPT] 10 Javascript Plugins that Skin and Beautify Web Forms – フォームを装飾するJavascript

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

フォームを美しく装飾するためのJavascriptプラグインがまとめられた記事。入力欄のデザインを置き換えるもの、チェックボックスの画像への置き換え、iPhoneインターフェースへの置き換えなどがその内容。フォームを機能的に拡張するというよりは、デザイン面での装飾に主軸が置かれています。チェックボックスとか、普通にCSS書くだけじゃ画像置き換えとかできないですからね。フォーム周りを装飾したい時にイイ感じの記事。

[JAVASCRIPT] 37 Fresh jQuery Image And Gallery Display Solutions – jQueryを使ったギャラリー向けプラグイン

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

jQueryを使った、ギャラリーサイト向けのプラグインがまとめられた記事。これ系のまとめ記事でよく目にするスライドショーのJSが多く見られますが、37個も集めたという点が素晴らしい。フォトギャラリーと一口に言っても、写真見せ方には色々な方法やトランジションがあります。これだけ数があれば目的のスライドショーが見つかるかもしれません。スライドショーだけでなく、Lightbox亜種のようなオーバーレイ系も結構あります。

[JAVASCRIPT] 10 Useful jQuery Form Validation Techniques and Tutorials – jQueryを使ったフォームチェック

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

メールフォームや登録フォームなどに入力する際に、ページ遷移なしで表示される注意書き、まぁいわゆるフォームバリデーションですが、jQueryを使ったプラグインがまとめられてます。jQueryに限定している点が個人的にナイス。こうしたJSを使ったチェック法は、「入力→送信→ここの書式違うよ→再入力→ここも違うよ→ヒステリ」という流れを防ぐ事ができます。ユーザー登録のあるサイトでの機会損失防止に使えそうです。

[CSS3] Stronger, Better, Faster Design with CSS3 – CSS 3を使った新しい表現

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

CSS3を使った新しい表現手法が紹介された記事。フォーム、モダル表示(Lightboxとか画面外からのスライド)、レイアウトとイメージによるマスク表現の3つについて書かれています。中でも特に興味深いのがModal表現についての記述。動き自体はJavascriptを使ってるんだけど、CSS3のtext-shadowを使った文字表現がかっこイイです。CSS3についての勉強も、ぼちぼちちゃんとやんなきゃなー、といったところです。


Warning: Trying to access array offset on false in /home/users/0/mantid2/web/mantiddesign/wp-content/themes/mStyle8/footer.php on line 8