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

Browse By

Tag Archives: Javascript

[TWITTER] jTweetsAnywhere – JSを数行追加するだけで、サイト内にTwitterの機能を組み込む事ができるjQueryプラグイン

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

jQueryを使って、Twitterのタイムラインや入力欄、フォローボタンなどの実装を簡単に行えるプラグイン。どのくらい簡単かというと、数行のJSを挿入するだけでできます(jQueryの導入も必要)。中でもTLの表示のオプションが豊富で、ジオタグを参照して地域ユーザーを抽出したり、リストを参照した結果を出力する事も可能。もちろん特定のユーザーのつぶやきを抽出する事もできます。実装が簡単な上に高機能という、なかなかホットな内容です。Twitterの@anywhereのサポートで制作されているそうです。

[JAVASCRIPT] jQuery Plugin – hoverFade – 軽量なボタンフェードプラグイン

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

マウスホバーによりフェードしながら画像切り替えを行うjQueryプラグイン。最近よく見かける手法です。導入が簡単で、動作が軽快という点が特徴。サクっと実装できれば、それほど手間をかけずにリッチなナビゲーション表現ができちゃいます。イイですねこれ。常用JSフォルダに入れておこっと。

[JAVASCRIPT] InnerFade with JQuery – jQueryを使ったシンプルなフェード&スライド表現

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

DIVやUL内の画像やテキストをフェードやスライドさせるjQueryプラグイン。オプションを切り替えるだけでフェードとスライドを切り替えて使う事ができる点と、実装が簡単な点が素晴らしい。サイト内の特定のエリア内で複数の画像を切り替えて使いたい時に便利です。ユーザーの手によるスライドの切り替えや、サムネール一覧などの細かい機能はありませんが、単純にスライドさせたいだけの時には低機能の方がラクです。また表示させる内容の順番をランダムにする事もでき、各スライドごとの時間の指定も行えます。ULタグ内でリストにしてもいいし、DIV内でPタグで囲ってもイイようです。実際ガッツリ使ってみましたが、派手さはないけど堅実なプラグインでした。

[JAVASCRIPT] 20 Awesome jQuery Enhanced CSS Button Techniques – jQueryを使ったボタン表現

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

jQueryを使って、ボタン表現に一手間加えた作例のまとめ記事。フェード表現や角丸を使った装飾的な拡張から、オンマウスでスライドする事で詳細説明を出す機能的なもの、iPhoneのスライドボタンを模したものや、JSによりグラデーションを表現したもの、ドロップダウンメニューまで色々あります。中にはCSS3でできる事もありますが、閲覧環境がそれほど整ってもいないので、こうしたボタン表現の拡張にはまだまだJSが一番手堅いですね。

[JAVASCRIPT] 50 Fundamental jQuery Controls, Components and Plugins – 目的別で選ぶjQueryプラグイン

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

目的別に紹介されたjQueryプラグイン。「この目的にはこれ!」という感じに紹介されてます。メニュー周り、フェード表現、テーブルソート、グラフ描画、タブ切り替え、カレンダー、プログレスバー、カラーピッカー、ToolTip、グリッドレイアウト、レーティング、フォーム関係、メディアプレーヤー、スライダー、Lightbox亜種、画像トリミング、フォームパーツ置き換えといった感じで、様々な目的に対応できる記事。こうして見ると、JSの関わり方って以前に比べて多様化してますね。

[WEB DESIGN] 25 Creative Single Page Websites With Awesome JavaScript Effects – Javascriptをうまく使ったシングルページサイト

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

Javascriptを使って、シングルページのウェブサイトを効果的に演出した作例集。シングルページである事と情報量の多さを同時に実現するための手段として、Javascriptが使われています。例えばタブ切り替えやスライドによるコンテンツ切り替え、横スクロール、透過PNGを使った効果的な演出やトリックなど、どれもデザイン手法として野心的な試みばかりです。こういうサイト作るのって楽しいですよね。アイデアというか仕組みというか、色々と参考になります。

[WEB DESIGN] Scalable Full Body Backgrounds in Web Design – 背景をBodyいっぱいに使ったクールサイト

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

背景を大きくBodyいっぱいに使ったクールサイトの紹介記事。この手のサイトの多くはFlashを使って制作されますが、最近ではCSS & Javascriptで同様の表現をするサイトもあるようです。ページ下部ではそうしたNon Flashサイトもいくつか紹介されてます。実際画面いっぱいに大きくFlashを使ったサイトってロードが遅い上に、「えぇい!もう面倒だ!」と思ってCmd + Wを押しても、今度はFlashプラグインがテンパって閉じる事もすぐにできなかったりして、アレだしナニです。ただしこうしたサイトデザインは、質の良い写真や素材があって初めてできる表現なので、多少案件を選びますね。

[JAVASCRIPT] jQuery Image Galleries & Sliders – Best Of – jQueryを使ったコンテンツスライダーまとめ

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

jQueryを使ったコンテンツスライダーは、最近じゃよく見かける手法になりました。限られたスペース内で多くの情報を見せようと思った時に、機能的かつ装飾面でもクールな手法です。ここではソレ系の動きをするjQueryプラグインをまとめて紹介してます。よく見かける有名なプラグインもあれば、初めて見るものも多くありました。中でもこのスライダー特にスゴい。グリングリンします。こうした表現はすっかりFlashからJSに移行しちゃったな、という印象。


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