reflex.jsは、画像にクラスを指定するだけで鏡面の反射効果や立体効果を表現できるスクリプトです。 reflex.js 実装は、簡単でreflex.jsを外部ファイルとして指定し、画像にクラスを指定するだけで実装できます。 クラス指定によって、角度調整などが行えます。 JavaScript、CSSオフだと通常の画像が表示になります。
[JS]画像に鏡面効果を与えるスクリプト -reflex.js
reflex.jsは、画像にクラスを指定するだけで鏡面の反射効果や立体効果を表現できるスクリプトです。 reflex.js 実装は、簡単でreflex.jsを外部ファイルとして指定し、画像にクラスを指定するだけで実装できます。 クラス指定によって、角度調整などが行えます。 JavaScript、CSSオフだと通常の画像が表示になります。
『10のJavaScript、Axaxタブメニュー』他、タブまとめ*ホームページを作る人のネタ帳
タブメニューなにか良いのないかなと思って探していたら、10 Javascript Ajax Tabsというエントリが後々使えそうなのでご紹介しておきます。 タブに関するまとめは以下で。 10 Javascript Ajax Tabs とりあえず10のJavaScriptAjaxタブメニューエントリはこちらから。 エントリの中でも、以下のメニューが面白かったですね。 口で説明するのは難しいですが、タブをクリックすると上下にスライドしながら違う文章を持ってきます。 以下からサンプル＆ダウンロード可能 タブメニューに関して 最近仕事のほうも忙しくなり、なかなか更新できないでいます。 そんなわけで、今回のようにタブを紹介するときにまとめて関連する記事を紹介する率も高くなってきました。 ピンポイント紹介ではなくなってきていますが、ご愛嬌と言う事でお願いします。 [JS]スムーズに切り替わるタブ型コン
軽快かつクールなページ内小窓作成用ライブラリ「Mocha UI」:phpspot開発日誌
MooTools Mocha UI Mocha is a MooTools user interface class made with canvas tag graphics. This is an on going exercise to help me become more familiar with both MooTools and the canvas tag. 軽快かつクールなページ内小窓作成用ライブラリ「Mocha UI」。 次のような移動＆リサイズ＆クローズ＆最大化可能なウィンドウを簡単に作成できます。 サイト内のデモでは、タイトルと内容を入力することで、動的にウィンドウを作成できることが紹介されています。 フレームワークには、mootools 使用。 かなり軽快に動いてくれ、ページ内で別窓を作るＵＩを作る際にはかなり使えそう。 関連エントリ Prototype.jsベ
マウスが上に来るとくるりんと文字の色を変えるスクリプト「Scrollovers」
リンクなどの文字列の上にマウスが来ると自動的にくるりんと回転する感じで文字の色が変化するというちょっと楽しいエフェクトを加えてくれるスクリプト、それが「scrollovers.js」です。 Firefox 2.0、Internet Explorer 7、Internet Explorer 6、Internet Explorer 5.5、Safari 3 (Windows)、Opera 9で動作確認されているとのことで、個人利用でも商用利用でも無料で使用できます。 論より証拠、デモを見た方が理解できます。 デモとダウンロードは以下から。 Scrollovers - A New Way of Linking http://www.scrollovers.com/ 「scrollovers.js」自体の中身がどうなっているかというのは以下からわかります。 http://www.scrollove
セクシーに動作するスライドメニューバー実装JSライブラリ:phpspot開発日誌
Sexy sliding JavaScript side bar menu using mootools at Andrew Sellick When trying to conceive ways in which space could be saved on a web page I decided a sliding menu would work well as shown in the images below.セクシーに動作するスライドメニューバー実装JSライブラリ。 クリックするとニューっとアニメーションしてセクシーに開いてくれるメニュー実装のためのライブラリが公開されています。 デモはこちら CSSによってデザインできるので、デザインも簡単です。 ちょっと変わり種ということで、デザイン系のサイトで使えそうですね。
自分が使いやすいと思ったJSを混ぜ混ぜしてみる｜CSS HappyLife
JavaScriptいぢってるのは楽しいけど、書くことはまったく出来ないので、似たような機能を持つのが多い中でも選ぶ理由の一つが、class名が気に入るかとかhtmlがごちゃごちゃしないかとかそんな基準だったり。 んで、jQueryのプラグインの中でもjquery_autoさんがぼちぼち気に入ったけど、class名が！とか思ったので、いぢって自分用にしてみました。 そんな事してたら、他の便利なJavaScriptも足してみたくなったので、足したりしてたらこんなんなりましたっていうのを公開。 今回その実験に使わせていただいたJavaScriptたちは以下。 jquery.js interface.js thickbox.js jQuery_Auto.js yuga.js heightLine.js 上記の色々なJSたちを自分用にしたサンプル？デモ？とダウンロードは以下。 サンプルページ ダウ
アスタリスクで隠されたパスワードを確認する方法 [K'conf]
ログインが必要なサイトの多くは、IDとパスワードを入力するフォームが設置されています。 通常、このようなフォーム内のパスワード部分に入力した文字は盗み見防止のため、「********」のようなアスタリスクになって文字が隠されるようになっていますが、しばしば、この入力したパスワードを確認したい状況になる場合も少なくありません。 このようなケースに役立つハックの紹介。 以下のJavaScriptをアドレスバーに入力すると、次のようなダイアログ内にパスワードが表示されます。 javascript:(function(){var s,F,j,f,i; s = ""; F = document.forms; for(j=0; j<F.length; ++j) { f = F[j]; for (i=0; i<f.length; ++i) { if (f[i].type.toLowerCase() ==
![アスタリスクで隠されたパスワードを確認する方法 [K'conf]](https://cdn-ak-scissors.b.st-hatena.com/image/square/cf9028d1820ac888c3aa505fcaff9f4183045203/backend=imagemagick;height=288;version=1;width=512/http%3A%2F%2Fkenz0.s201.xrea.com%2Fimage%2Fweblog%2F071121%2F2.gif)
文字を隠すように貼るシールを表現するJavaScript*ホームページを作る人のネタ帳
なんとも一風変わった遊び心。 その仕掛けは単純だけど、アイデア次第では面白い事が出来そうですね。 サンプルデモはこちら 使い方は以下に。 まずはダウンロードから ダウンロードするものは下記の3つのJsファイルです。 ダウンロードはこちら ダウンロードが終了してファイル名を見ると、妙な名前で保存されているので、今回は名前を変更して使います。 上記のファイル名より上部の名前をすべて消します。 その時、次のような下の部分だけを残し、消します。 下記のような呼び出しを付ける。 <script type='text/javascript' src='pack.js'>/* jquery core */</script> <script type='text/javascript' src='min.js'></script> <script type='text/javascript' src='j
ページが崩壊していく効果を演出するJavaScript「meltdown.js」:phpspot開発日誌
HTML崩壊 meltdown.js - KAZUMiX memo まずは軽いページでお試しください。例えば Google とか。ページが崩壊していく効果を演出するJavaScript「meltdown.js」。 動かしてみるとビックリな効果が得られます。 ライブラリとしても公開されているようなので、リンククリック後に画面崩壊なんてことをしてみると訪問者への驚き効果として何か使えるシーンがあるかもしれません。 是非一度試してみましょう。
既存のテーブルを簡単にソートさせるjavascript「Table-Sort」
twitter facebook hatena google pocket テーブルで作成した表をソートさせるjavascriptは多くありますが、内部を少しいじらなければならないケースが多いです。 Table-Sortは、既存の仕組みでそのまま簡単にソートさせることができるjavascriptです。 sponsors 使用方法 Table-Sortのtable-sort.jsを、mootoolsからmootools.jsをダウンロードします。 <script src="http://yourdomain/mootools.js" type="text/javascript"></script> <script src="http://www.skuare.net/test/js/table-sort.js" type="text/javascript"></script> <script
スムーズに画像を拡大するかなり導入が簡単なJavaScript「FancyZoom」 - GIGAZINE
IE6/IE7/Firefox/Safariに対応しているJavaScriptで、使い方もかなり簡単でページにほとんど変更を加えずに導入可能。 また、リンクの先読みにも対応しており、画像の上にマウスが乗ったことを感知して自動的に先読みすることもできますので体感的にはかなり速度アップしているように感じます。 画像をズームする機能のみに特化しているため、ほかの余計な機能付きのライブラリよりも動作は軽いのも特徴で、クリックしてズームされた後にはちゃんとドロップシャドウ効果が付いたりするなど、芸も細かい。 実際のデモと詳細は以下から。 cabel.name: FancyZoom 1.0 上記ページの下の方にある「Example」に体感できる例があります。なかなか面白い。 で、実際に設置するにはまず上記ページ中にあるZIPファイルをダウンロードしたら解凍し、出てきた2つのフォルダをFTPソフトなどで
アニメーションする面白いタブＵＩ実装JSライブラリ「Tab Styled Accordion」:phpspot開発日誌
NYOKIGLITTER - Tab Styled Accordion アニメーションする面白いタブＵＩ実装JSライブラリ「Tab Styled Accordion」。 タブをクリックするとアコーディオン風にアニメーションしながらタブが切り替わります。 クリックすると驚きのアニメーション効果はこちら 訪問者に驚きの体験を与えたいという方は、一度使ってみましょう。
クールにスライドするメニューを作成するJavaScriptライブラリ「Image Menu」:phpspot開発日誌
Image Menu クールにスライドするメニューを作成するJavaScriptライブラリ「Image Menu」。 メニューにカーソルを合わせると、カーソル部分がアニメーションしながら開くメニューを実装できます。。 画像を変えれば、よりクールなメニューを作れそうですね。 必要なJSライブラリ,CSSをインクルードした後、次のようなコードで簡単に初期化できる模様。 <h2>Example:</h2> <div id="kwick"> <ul class="kwicks"> <li class="kwick opt1"><span>Lanscapes</span></li> <li class="kwick opt2"><span>People</span></li> <li class="kwick opt3"><span>Nature</span></li> <li class="kwi
JavaScript Library Archive
JavaScript Library Archiveについて JavaScriptライブラリをまとめたサイトです。用途別に探すことができ、配布元、使用方法、ライセンスなどについて解説をしております。 新着JavaScriptライブラリ プログラムのコードに色を付ける「google-code-prettify」 角丸を表現する「jQuery Corners 0.3」 jQueryベースのカラーピッカー 「Farbtastic」 水平方向のアコーディオンメニュー「horizontal accordion」 セレクトボックスをカスタマイズする「Script.aculo.us Select Box」 IE6でhover,active,focus擬似要素を使う為の「csshover」 画像に光沢を与えるjsライブラリ『Glossy.js』 IE6以下をIE7と同じようにするライブラリ『IE7.js』
透明なプレートのCSS・JavaScript（ジャバスクリプト）ドックメニュー
上からにょきっと出てくるドックメニューですね。 完全に隠れたら、そこにあるということがわからないので、多少の変更は必要かもしれませんが、なかなか素敵な感じでお勧めの一品。 注意事項 Please note that the images for the menu are .pngs with transparency. If you are using Internet Explorer 6 or below, you will not see the transparency. You can change the images out to gifs, jpegs or whatever suits your fancy ;-) 相手先でも注意されているように、PNG画像に透明を使用しているため、IE6含む、それ以下のものでは透明になりません。 その場合は、gifによる透明を使うか、J
[JS]デザイナーのためのjQueryのチュートリアル
Web Design Wallのエントリー「jQuery Tutorials for Designers」から、JavaScriptのライブラリ「jQuery」が視覚的にどのように動作するかデモと共に解説してる10のチュートリアルを紹介します。
GAC なぜなにGAC->JavaScript
お世話になっております。 質問なのですが、JavaScriptからSWFの特定シーンに 飛ばす方法はありますでしょうか？フレームに飛ばす には関数GotoFrame()を使用すればいいという所までは 分かったのですが、シーンの移動方法が分かりません。 宜しくお願い致します。 開発環境：Windows2000, Flash MX 出来ます。ただし Mac 版 IE は swLiveConnect に対応していないため、使えません。 まず、Flash をはり付けるページのタグで、以下のように name 属性と id 属性、それに swLiveConnect を true にする必要があります。 <object id="namae" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://down
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQueryを使った、クールな写真ギャラリーを作るためのライブラリ『galleria』 | IDEA*IDEA
ActionScript FlashとJavaScriptの連携(2) - JavaScriptからswfを制御 - Flash-Web Application Weblog Directory
UIパターンいろいろ - DesignWalker
