JavaScriptを上手くデザインに生かしたサイトのみを集めているギャラリーサイト・Not Coffee
JSを使ったWebデザインをしたい方 のインスピレーションに良さそうだっ たので記事に。jQueryやmootools、 Prototypeなど、人気のライブラリを 駆使したサイトのみをショーケース化 しているギャラリー、Not Coffeeの ご紹介です。 数はさほど多くは有りません（150~160ほど）が、今後に期待したいギャラリーです。デザインも素敵なものばかりなのでインスピレーションと更なるjsの使い方の勉強にもいいかもですよ。 ギャラリー形式になっています。jQuery、mootoolsなどのカテゴリで分けられているのでライブラリ別で探せます。 サムネイルにマウスオーバーすると必要な情報が出てきます。どのライブラリがどこに使われているか（これはタグで分けています）などが直ぐに分かりますので探しやすいですね。 以下のようなサイトが掲載されていました。 Alex Buga’s Liv
jQueryでいい感じのコンテンツスライダーを作成するチュートリアルとサンプル:phpspot開発日誌
Create a Custom Content Slider with jQuery jQueryでいい感じのコンテンツスライダーを作成するチュートリアルとサンプル。 次のように、左側にボタンがあって押すと右側のコンテンツがアニメーションで切り替わるコンテンツスライダーの実装チュートリアルとサンプルが公開されています。 サイドバー等に仕込むことで少ないスペースで多くの情報を格納することが出来る上になかなかクールな印象を与えられそうですね。 簡易チュートリアル的なコンテンツを載せる場合なんかに使えそうです。 関連エントリ jQueryとCSS3で作るカラフルなスライダーウィジェット JavaScript製の画像スライダー・ギャラリーいろいろ JavaScriptでページスライダー用ライブラリいろいろ
[JS]めちゃめちゃ小さいMP3プレイヤーのスクリプト -1 Bit Audio Player
MP3ファイルのテキストリンクの横に自動でめちゃめちゃ小さいMP3プレイヤーを設置できるスクリプトを紹介します。 1 Bit Audio Player デモ テキストの右に添えてあるアイコンのクリックでオーディオの再生と停止がコントロールでき、再生中はアイコンが変更されます。 プレイヤーはFlashのMP3プレイヤーが利用されています。 スクリプトはスタンドアローンで利用でき、またWordPressのプラグインとしても動作します。 設置時には、MP3ファイルのリンクの横に自動でアイコンが表示されます。 また、ブックマークレットも用意されており、スクリプトが設置されていないサイトでも1 Bit Audio Playerを利用することができます。 1 Bit Bookmarklet 1 Bit Audio Player（ブックマークレット）
「吹き出し」をツールチップとして実装するjsいろいろ
マウスオーバー等で吹き出しが 現れるツールチップのまとめです。 jQueryが殆どになります。 吹き出しは画像やcssを変更 すれば別の形状にする事も可能 なのでうまく活用したいですね。 吹き出し以外のツールチップを実装できるjsをお望みでしたら以下の記事が参考になりそうです。 15 jQuery Plugins To Create A User Friendly Tooltip 40+ Tooltips Scripts With AJAX, JavaScript & CSS vTip 凄く可視性が高い吹き出し。フェードインで表示し、マウスオーバーの間はマウスストーキングします。使いやすそう。対象がテキストでも画像でもOK。試しに入れてみました。以下のリンクにマウスをあわせるとバルーンが現れます。角はcssで丸くしました。デフォルト状態だとマウスカーソルにarrow部分が重なってしまうので
Yahoo! UI Library 3（YUI3）の基本
「Yahoo! User Interface Library Ver.3」（YUI3）はYahoo!が開発した、Webのページを作成するための汎用ツールライブラリーです。オープンソースで無償で提供されており、アニメーション効果やドラッグ＆ドロップ、データ取得やイベントの応答など、多岐にわたる機能がサポートされています。今回はまずYUI3の全体像を紹介します。 はじめに Yahoo!は、米国時間9月29日に「Yahoo! User Interface Library Ver.3」（YUI3）をリリースしました。YUI3はJavaScriptやCSS（Cascading Style Sheet）で書かれた、Ajaxライブラリーです。 Yahoo!は今まで、インターネットによる情報提供のためのさまざまなツールを作成してきました。開発したツールの中でも、Webのページを作成するのに汎用的に使えるツ
jQueryで実現するリッチな表現のメニュー「10 Fresh jQuery Tutorials to Enhance Navigation Menus」
軽量のjavascriptライブラリとして幅広く利用されているjQuery。その機能は多岐にわたり様々なプラグインやパッケージが後悔されていますが、今日紹介するのはjQueryの中でもナビゲーションに絞って紹介しているエントリー「10 Fresh jQuery Tutorials to Enhance Navigation Menus」です。 Horizontal Scroll Menu with jQuery Tutorial 詳しくは以下 ■Spritemenu フェードインやアコーディオンなどのマウスオーバーアクションが付けられるメニュー ■Sexy Drop Down Menu w/ jQuery & CSS FLASHメニューのようなスムーズなアニメーションを見せるドロップダウンメニュー ■A Simple and Beautiful jQuery Accordion Tutor
ページにFlashみたいな読込み状況を付けた上でクールに表示するjQueryプラグイン「QueryLoader」:phpspot開発日誌
ページにFlashみたいな読込み状況を付けた上でクールに表示するjQueryプラグイン「QueryLoader」 2009年10月05日- ページにFlashみたいな読込み状況を付けた上でクールに表示するjQueryプラグイン「QueryLoader」。 Flashでよくある〜％読み込みました、みたいなものをJavaScriptで実現できるみたいです。ページを完全に読み込ませてから見てもらいたい場合に使えそうです。 読込みバーが右に伸びていって進捗表示 終わったらアニメーションでカッコよく画面切り替え ページ表示したところ 必要なJavaScriptとCSSを<script>と<link>で読み込んだら、次のように初期化するだけで実装できます。 <script type='text/javascript'> QueryLoader.init(); </script> スクリプトのダウンロー
第1回 jQueryにふれる | gihyo.jp
はじめに ここ数年、JavaScriptライブラリを使ってサイトを製作するという機会がどんどん増えてきました。今まででであれば、JavaScriptのライブラリを使う・使わないに関わらず、その製作の多くはプログラマーの方が行っていたと思います。しかし近年、そのJavaScriptライブラリも種類が増えてきて、プログラミングの知識がなくても簡単に導入できるようなライブラリも出てきました。そのため、それらの使い手はプログラマーからWebデザイナーやマークアップエンジニア側へとシフトしつつしている部分もあります。 そんな数多くあるJavaScriptライブラリの中でも、Webデザイナーなどのプログラミング知識がない人でも比較的導入のしやすいのが『jQuery』です。このjQueryの魅力は、その使いやすさとプラグインの豊富さにあり、プラグインだけでも、すでに使ったことがあるという方も多いと思いま
MJL ― MITSUE-LINKS JavaScript Library | 制作／開発 | ミツエーリンクス
概要 MJL (MITSUE-LINKS JavaScript Library)は、ミツエーリンクスで標準利用されるJavaScriptライブラリです。 MJLは弊社内における業務効率を改善するために、統一された設計思想、利便性の向上を念頭においた上で設計・開発されました。 MJLは他のJavaScriptライブラリ群とは異なる設計思想により、独特の特徴を持ちながらも他のライブラリと補完しあえるものを目指しました。 MJLはコピーレフトライセンスであるGNU GPLに基づく自由ソフトウェア（フリーソフトウェア）です。弊社は GNU GPLに則り、本ページにてMJLの全ソースコードを公開します。 ライセンス MJLはGNU GPL Version 3（参考邦訳）のもとに提供されます。 詳細はMJL本体ファイル内のライセンス告知をご覧ください。 ダウンロード MJL本体（圧縮版） mjl.js
[JS]簡単に設置できる超軽量のコンテンツスクローラーのスクリプト -TinyScroller
divで配置したパネルをスクロールできるようにする超軽量のスクリプトをleigeberから紹介します。 TinyScroller JavaScript Scrollable Div – 1.7KB demo スクリプトの容量は約1.7KB（圧縮時）で、対応ブラウザはIE6/7/8, Fx, Op, Safari, Chromeとなっています。 設置も簡単で、パネルのdiv要素と同列に下記のスクロールバーとなるdiv要素を配置します。 <textarea name="code" class="html" cols="60" rows="5"> <div id="scrollbar"> <div id="scroller" class="scroller"></div> </div> </textarea>
写真関連のjQueryプラグインのまとめ「 30 Best jQuery Photo Plugins」
WEBの要素のうち最も重要なもののひとつ写真。そのクオリティや見せ方で、WEBサイトのクオリティは全く違ってきます。今日紹介するのはそんな写真を効果的に見せる、jQueryプラグインをまとめたエントリー「30 Best jQuery Photo Plugins」を紹介したいと思います。 3. GalleryView スライダー、スライドショー、ギャラリー、スクローラーなど様々なプラグインが収録されていますが、今回はその中から特に気になったものをいくつか紹介したいと思います。 詳しくは以下 ■20. jQZoom 細部を拡大してみせてくれるjQueryです。上記のような商材なんかをPRするには良いですね。 ■29. jQuery Multimedia Portfolio 様々なメディアに対応したショーケース。簡単なポートフォリオなどに使えそうです。 ■4. jQuery Cycle 様々な方
spaceforaname.com - このウェブサイトは販売用です！ - spaceforaname リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
jQuery TOOLS - The UI library for the Web
Demo Area A small list of things you can do with this library. 1. Tabs The most important UI widget on the web Minimal setup for tabs Naming the tabs 3 different skins with CSS Loading tab contents with AJAX Handling browsers back button AJAX:ed tabs with History support Using mouseover to switch tabs Making Wizards with the Tabs Making Accordions with the Tabs Customizing the Accordion e
Twitterをサイトに組み込むチュートリアル＆サンプル集:phpspot開発日誌
Twitterをサイトに組み込むチュートリアル＆サンプル集。 当サイトにて、色々とTwitterの機能を実装する仕組みを色々と紹介しましたが、それらをまとめてみました。 JavaScript によるTwitterメッセージの埋め込み Twitterのメッセージをページに載せられるJavaScript「Twitter.js」 JavaScript 単体でTwitterのメッセージをサイトに簡単に埋め込み可能 サイトにリアルタイム更新＆検索機能付きTwitter窓を設置できるjQueryプラグイン「Juitter」 画面遷移なしにTwitterステータス表示＆検索ができるウィジェットを設置可能。 PHP製のウィジェットや投稿用サンプルコード等 Twitterのメッセージ表示などができるPHP＆AJAXなブログパーツ実装が可能な「Ptwix」 Twitterのメッセージ表示用のリロード機能付きウ
【ハウツー】ゼロからはじめるInnerFade - Web画像もテキストも簡単フェードイン/アウト (2) InnerFadeを使う | パソコン | マイコミジャーナル
それでは実際にInnerFadeを使ってみます。ここでは画像をphotoフォルダに、InnerFadeのスクリプトファイルをjsフォルダに入れてあります。 サンプルのファイル構成 InnerFadeはjQueryライブラリを使用しているので、以下のように先にjQueryを読み込ませた後に<script>タグを使ってjquery.innerfade.jsファイルを読み込ませます。 <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.innerfade.js"></script> 必要であればスタイルシートファイルを<link>タグを使って読み込ませます。 (X)HTMLタグの設定 次にフェードさせたい(X)HTMLタグを指定します。こ
20 jQuery Tutorials And Plugins To Impress Your Friends - SpyreStudios
I have always liked playing around with jQuery and I’m sure many of you do too! In fact we’ve published some jQuery ‘getting started‘ guides here on SpyreStudios in the past. So this time I thought we’d go more in depth and I’ve hand-picked 20 awesome jQuery tutorials (most of them have working demos) Here they are: Creating a Keyboard with CSS and jQuery ↓ In this tutorial you’ll learn how to cre
inputlog - Google AJAX APIを使ってjQueryを読み込む
Google AJAX APIを使うとjQueryをgoogleからダウンロードできます。これを使うと自分でサーバーに配置する場合に比べて以下のようなメリットがあります。 バージョン指定を最後までしないことで最新版を利用できる gzipによる圧縮を自動で行ってくれる（jquery.minだと54.5 KB->16 KBへ） 普及すればネット全体でjQueryをキャッシュできる デメリットとしては以下のような感じでしょうか。 インターネットにつながっていないとライブラリが利用できない（ローカルでの確認時の問題） googleのサーバーが落ちたら困る（ほぼないと思いますが。。） 使い方はhtmlで読み込んでいるscript要素を以下のように書き換えるだけです。 <script type="text/javascript" src="js/jquery-1.2.6.min.js"></scrip
でっかいメニューをJavaScriptで作る「Cut & Paste jQuery Mega Menu」
twitter facebook hatena google pocket 表示したい関連リンクなどが多いとき、こんな風に表現すると面白いかもしれません。 Cut & Paste jQuery Mega Menuを利用するとマウスを乗せたときに中身がどばっと表示されます。 sponsors 使用方法 jQueryからjquery.jsを、Cut & Paste jQuery Mega Menuからjkmegamenu.css、jkmegamenu.jsをダウンロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <link rel="stylesheet" type="text/css" href="jkmegamenu.css" /> <script type="text/javascript" sr
スタイリッシュなフォームを作るときに見るべきエントリまとめ
Form Design フォームデザイン さてさて、最近のwebの入力フォームは本当に凝ってるところが多くて、ただただ関心するばかり。 そんなわけで今回は、焦点を『フォーム』に限定し、スタイル抜群なフォームUIを勉強してみたい。 流れ的には インスピレーションデザイン集CSSによるフォームの変更方法JavaScriptによるフォームデザインという感じでお送りいたします。 インスピレーション まずは、スタイリッシュなフォーム。 これらは、webデザイン全体がフォームデザインとなっているまとめです。 まさにバインダー。 webの入力フォームを街頭アンケート用紙のように仕上げたデザイン。かっこいい。 くしゃくしゃっとしたような紙の一部にフォームが設置されている。 こちらもメモに名前を書くかのごとく。 深海に光がさす感じのイメージ。 シンプルイズベストなレイアウト設計がなされている。 １，２，３，
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]写真撮影のように画像を切り取るスクリプト -Photoshoot