タブメニューなにか良いのないかなと思って探していたら、10 Javascript Ajax Tabsというエントリが後々使えそうなのでご紹介しておきます。 タブに関するまとめは以下で。 10 Javascript Ajax Tabs とりあえず10のJavaScriptAjaxタブメニューエントリはこちらから。 エントリの中でも、以下のメニューが面白かったですね。 口で説明するのは難しいですが、タブをクリックすると上下にスライドしながら違う文章を持ってきます。 以下からサンプル&ダウンロード可能 タブメニューに関して 最近仕事のほうも忙しくなり、なかなか更新できないでいます。 そんなわけで、今回のようにタブを紹介するときにまとめて関連する記事を紹介する率も高くなってきました。 ピンポイント紹介ではなくなってきていますが、ご愛嬌と言う事でお願いします。 [JS]スムーズに切り替わるタブ型コン
- March, 28th, 2017: DHTML Chess for WordPress. DHTML Chess is now available as a WordPress plugin in a free and PRO version. Learn more. - January, 16th, 2017: LudoJS Progress Bar. Samples of progress bars in the LudoJS Javascript framework on my site ludojs.com. - January, 13th, 2017: DHTML Chess 3.0. The new DHTML Chess 3 has been ported to jQuery. New demos are also available. The home of DHTM
Web サイトのレイアウトに関しては、横幅を固定した固定レイアウト、ブラウザのウィンドウサイズと連動するリキッドレイアウト、文字サイズと連動するエラスティックレ... Web サイトのレイアウトに関しては、横幅を固定した固定レイアウト、ブラウザのウィンドウサイズと連動するリキッドレイアウト、文字サイズと連動するエラスティックレイアウトの 3種類がよく使われますが、どのレイアウトが一番文章が読みやすかったり、利便性が高いのかって考えたときに、当然好みは人それぞれ。 じゃあ、その人の好みで、3つのレイアウトを切り替えられるようにしたらいいじゃんということで、そんな CSS 切り替えスイッチを作ってみました。 サンプルはこちらで確認できます 全ファイルのダウンロードはこちら (zip ファイル / 10KB) デフォルトでは横幅固定のレイアウトになっています。スイッチを押すたびにレイアウトが選択
Prototype Carouselは、複数の画像を少ない領域で、回転式のカルーセルのようにスライドして表示することができるスクリプトです。 Prototype Carousel Prototype Carouselは、Prototypeのプラグインで、動作にはprototype.jsとscriptaculous.jsが必要です。 script.aculo.us デモでは、スタティック版とAJAX版があります。
Zoomiとは? Zoomiは、サムネール画像にマウスが重なったときに拡大画像を表示するというライブラリです。 サムネール画像上にマウスを重ねると迅速に拡大画像が表示される より正確に説明すると、サムネール画像と、拡大時に表示する画像の2種類を用意しておき、マウスがサムネール画像に重なった際に拡大時画像を表示するという仕組みになっています。 一方、大きな画像に対して小さなサイズのものを表示するといった逆の処理は正しく行なわれないので注意が必要です。つまり、同じサイズの画像か、それよりも大きいサイズの画像でないと正しく動作しません。 Zoomiは、HTMLページ内にスクリプト(プログラム)を記述しなくてよいという利点があり、全くプログラムが分からない人でも気軽に使えます。ZoomiではHTMLの<img>タグのclass属性にzoomiを指定し、マウスオーバー時に表示する画像のURLをalt
今回は過去のホームページを作る人のネタ帳にて、まとめの一部として使われていたイメージギャラリーを主役にまとめました。 JavaScript系はブログでも使う事が出来たりしますので、お時間のあるときにでもお試しください。 (Flashに一点追加しました) CSSJavaScript Photo Sliderライブラリ。 滑らかなスライドを実装できます。CSSデザインである為、デザインのカスタマイズも可能。 ダウンロードページ 商用利用の場合は29ドルだけど、非営利の場合は無料で使える。 テキストが表示されているところもポップアップするので試してみると楽しいです。 ダウンロードページ 正確にはギャラリーではないですが、虫眼鏡による画像のビューア。 FLASHではないところがまた乙。重いのが難点か・・・。 ダウンロードページ こちらも虫眼鏡。地味に2つの機能がある。 クリックしながら右にドラッグ
タスクボタンのマウスオーバーでタスクの縮小画像を表示「Visual Task Ti... 次の記事 ≫:Ajax+PHP+Smarty+script.aculo.usなデータグリッドコンポーネント Gallery scripts - A library of DHTML and AJAX scripts - DHTMLgoodies.com Another Image gallery script. Thumnbails are listed inside a box at the left. You can click on the thumbnails to bring up a larger version in a right side panel. You can move between strip of thumbnails by clicking on left and r
自分用のメモも兼ねてエントリー。JavascriptやらAjaxやらで何かやりたいときに便利そうなリンク集のまとめです。 Javascript Libraries 主要なライブラリーとエフェクト用の拡張機能、その他ツールなどです。まずはこちらからいろいろ試してみるのがよさげですね。 » Javascript Libraries Ajax Rain Ajaxの小技いろいろ集です。ちょっとしたスクリーンショット付きのこうしたリンク集は眺めていて楽しいですね。 » 485 + Ajax/Javascript/Dhtml examples and demos to download Mini Ajax こちらもAjax Rainと同様です。こちらも綺麗なサイトで眺めていて楽しいですよ。 » MiniAjax.com / A showroom of nice looking simple downl
Mootools menuは、スムーズにアニメーションする動きが快適なアコーディオンタイプのナビゲーションのスクリプトです。 Mootools menu with accordeon and effects アコーディオンの開閉時にもフェード効果があり、よい演出だと思いました。 ナビゲーションの階層表現(デモのgraphic design-custom designでレベル3)の見た目が同じなので、インデントや色・形などで見た目に変化をつけないとちょっと分かりづらいかもしれません。 Mootools menuはmootoolsのプラグインで、動作にはmootools.jsが必要です。
当サイトではCookieを使用しています。引き続き当サイトを閲覧することにより、ポリシーを受け入れたものとみなされます。今後表示しない詳しく見る
3d image reflection with javascript reflection.jsの動作には、prototype.jsとscriptaculous.jsが必要で、外部スクリプトとして使用します。 デモ:背景白 デモ:背景黒 鏡面効果を与える画像のコードは、下記のように記述します。 画像箇所 <div id="holder"> <img src="image.jpg" /> </div> トリガー <script type="text/javascript"> new Reflect3D('holder'); </script>
» Introducing Tablecloth テーブルクロスを導入する。 この記事がWEB関連のなかで話題になっていました。 はて・・テーブルクロス・・・。 何のことやらさっぱりだったんですが、使ってみるとなかなか素敵な動きをしてくれましたので記事に。 あなたのhtmlに2行のコードを加えたら・・・ By simply adding 2 lines of code to your html page you will have styled and active tables that your visitors will love あなたのhtmlにたった2行のコードを加えるだけで、あなたのサイトのテーブルは、あなたのサイトの訪問者に愛される。 なんとも素敵な響きだなと思った人はデモを見てみましょう。 » デモはこちら テーブルによって大量のデータを出力するときには便利な機能ですね。
サイト更新情報 2006/12/06 よく使われているページを検索窓から簡単に辿れるようにしました。(検索窓に「prototype」と入力) 2006/11/27 JavaScript入門/応用サイトJavaScriptistオープン! 2006/11/23 試して確認できるJavaScriptオンラインエディタを公開 2006/11/20 JavaScriptリファレンス、逆引きサンプル集を公開 2006/11/19 JavaScriptライブラリ活用ページ公開 2006/11/15 JavaScriptistベース機能の構築完了 過去のサイト更新情報
reflex.jsは、画像にクラスを指定するだけで鏡面の反射効果や立体効果を表現できるスクリプトです。 reflex.js 実装は、簡単でreflex.jsを外部ファイルとして指定し、画像にクラスを指定するだけで実装できます。 クラス指定によって、角度調整などが行えます。 JavaScript、CSSオフだと通常の画像が表示になります。
Ajaxorized 3d image reflection with javascript week, this week an image reflection script, using unobtrusive javascript. Appleサイトの画像っぽく3Dで鏡面反射画像を作るJSライブラリ。 画像に次のようなエフェクトをかけることが可能です。 使い方は簡単で、次のように3ステップ。 prototype.js、scriptaculous、reflection.js(配布しているもの) を読み込み <div id="holder"><img></div> を定義 <script> new Reflect3D('holder'); </script> 黒の背景画像にも対応しているようです。 1枚の画像でも、雰囲気のある画像として表示させることが出来ますね。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く