ページに今まで見たことのないような背景画像をCSSとJavaScriptで設定「Parallax Backgrounds」:phpspot開発日誌
Parallax Background with Javascript and CSS ページに今まで見たことのないような背景画像をCSSとJavaScriptで設定「Parallax Backgrounds」。 一見なんの変哲もないサイトのように見えて、スクロールしてみると2枚の背景画像が違う速度でスクロールし、面白い効果が見られます。 スクロールバーをつまんでゆっくりページをスクロールしてみてください。 雲の画像が、その後ろの布風の背景画像よりも高速に動いてみえると思います。 JavaScriptの window.onscroll イベントによってそれぞれの背景画像のスクロール位置を調節しているようです。 凄く面白いなぁ、と思ったのですが、この方法を応用することで、新たに面白い効果を作ることができるかもしれませんね。 訪問者への驚きの要素として実装してみると面白いでしょう。 サポートブ
Prototype.jsでiGoogleっぽいポータルな仕組みを作れるJSライブラリ「Xilinus」:phpspot開発日誌
Prototype.jsでiGoogleっぽいポータルな仕組みを作れるJSライブラリ「Xilinus」 2007年08月31日- var portal = new Xilinus.Portal("#page div")Xilinus : Prototype Portal Class I have always wanted to create a Class to handle in a easy way portal page like netvibes. After having tried to used Sortable of script.aculo.us, I decided to write my own Class. Prototype.jsでiGoogleっぽいポータルな仕組みを作れるJSライブラリ「Xilinus」。 Xilinus を使って、次のような、ドラッグ＆ドロ
超便利！JavaScript用の文字列拡張関数いろいろ:phpspot開発日誌
Ivan Uzunov Blog Blog Archive Top 10 JavaScript String.prototype Extensions This is the list of mine top 10 JavaScript String.prototype extensions. If you want to you can post yours bellow. 超便利！JavaScript用の文字列拡張関数いろいろ String.prototype でStringクラスを拡張し、次のような機能を実装するための関数が公開されています。 trim - トリミングを行う関数 splitrim - トリミングとsplitを行う関数 escHtml - HTMLエスケープを行う関数 unescHtml - HTMLアンエスケープを行う関数 urlEncode - URLエンコードを
忘れてはいけない超絶JavaScriptライブラリ「BlueShoes:JavaScript Collection」:phpspot開発日誌
BlueShoes: JavaScript Collection Get all the above components in one package. There is an example that uses most of the components.忘れてはいけない超絶JavaScriptライブラリ「BlueShoes:JavaScript Collection」。 既に紹介したと思っていたJavaScriptライブラリであるBlueShoesの紹介。 ご存知の方も多いと思いますが、知らない人も多いようですね。 ライブラリ、というより、リッチなコンポーネント集といったイメージで、次のような様々なコントロールが使えます。 WYSIWYGエディタ Excel風スプレッドシート ツリービュー スライダーコントロール 他にも下記の様々なリッチコンポーネントが使えます。 入力系コンポーネ
画像の映り込みエフェクトを実現するJavaScriptライブラリ「reflex.js」:phpspot開発日誌
reflex.js (with IE 6/7 support) reflex.js 1.1 allows you to add a Cover Flow effect (including reflection) to images on your webpages. 画像の映り込みエフェクトを実現するJavaScriptライブラリ「reflex.js」 次のような画像の映り込みエフェクトを付けることができます。 使い方は、必要なライブラリを読み込んで class を付与するだけのようです。 他にもいろいろあります。 Corner.js - 角丸効果や、シャドウ効果を画像に与える Glossy.js - 画像にガラス風の光沢を与える Instant.js - インスタントカメラ風エフェクトを与える Slided.js - スライドのフレーム風にエフェクトを与える Filmed.js - 映
画像にマスクを施せるJavaScriptライブラリ「Edge.js」と画像エフェクトライブラリ集:phpspot開発日誌
画像にマスクを施せるJavaScriptライブラリ「Edge.js」と画像エフェクトライブラリ集 2007年08月06日- Edge.js (with basic IE 6/7 support) Edge.js 1.1 allows you to add individual masks (inc. inbuilt mask) to images on your webpages. It uses unobtrusive javascript to keep your code clean. 画像にマスクを施せるJavaScriptライブラリ「Edge.js」。 Edge.js を使えば次のように、画像にマスクを与えることが可能です。 次のように、JavaScript でマスク画像の配列を定義して、必要ライブラリを読み込んだ後、img タグに適切なクラスを付与する感じになります。 <!--
画像の拡大プレビューを超クールに行える「Highslide JS」:phpspot開発日誌
Highslide JS - JavaScript thumbnail viewer Highslide JS, formerly Vevstein Thumbnail Expander, is a piece of JavaScript that streamlines the use of thumbnail images on web pages. The library offers these features and advantages: 画像の拡大プレビューを超クールに行える「Highslide JS」。 サムネイルをクリックするとそのまま画像がズームされ、影付きで写真を表示できます。 設置は次のように行います。 スクリプトインクルード <script type="text/javascript" src="highslide/highslide.js"></script>
画像に簡単にポラロイド風エフェクトをかけられるJavaScriptライブラリ「Instant.js」:phpspot開発日誌
FlashとAjaxを使った使いやすいファイルアップロードライブラリ「FancyUpl... 次の記事 ≫：16x16ピクセルの芸術的favicon集 Instant.js Instant.js 1.0 allows you to add an instant picture effect (including tilt) to images on your webpages. 画像に簡単にポラロイド風エフェクトをかけられるJavaScriptライブラリ「Instant.js」 次のように、画像をポラロイド風にすることが出来ます。使い方も簡単で、画像の class 属性に定められたclass名を付けるだけ。 使い方は、まず、<script type="text/javascript" src="instant.js"></script> でinstant.js を読み込んで、 画像にcl
滑らかな画像スライドショーを実現するJavaScriptライブラリ:phpspot開発日誌
JonDesign's (Javascript) SmoothGallery: Mootools Mojo for Images | What is it ? Using mootools v1.0, this javascript gallery and slideshow system allows you to have simple and smooth (cross-fading...) image galleries, slideshows, showcases and other cool stuff on your website... 滑らかな画像スライドショーを実現するJavaScriptライブラリ。 画像の透明度を下げながら画像を切り替えるので、滑らかな画像切り替え効果が得られます。 デモページ 実装は、JavaScriptとCSSを読み込んでHTMLを定義し、Jav
Flashムービーのサイズをブラウザ幅に応じて自動調整できるJSライブラリ「FitFlash」:phpspot開発日誌
FitFlash - Smart Flash Resize Script FitFlash is a smart script that resizes your flash automatically if your browser window size is smaller or greater than your flash minimum desired size keeping it accessible independent of screen resolution. Flashムービーのサイズをブラウザ幅に応じて自動調整できるJSライブラリ「FitFlash」。 通常、Flashムービー(SWF)はブラウザに貼り付けた状態だと固定サイズとなっています。 このムービーサイズをJavaScriptで動的にうまく調節できるライブラリがFitFlashです。 FitFlashは次
WEBアプリに超絶簡単にJavaScriptのキーボードショートカット機能を実装する「shortcuts.js」:phpspot開発日誌
WEBアプリに超絶簡単にJavaScriptのキーボードショートカット機能を実装する「shortcuts.js」 2007年04月20日- Handling Keyboard Shortcuts in JavaScript Despite the many JavaScript libraries that are available today, I cannot find one that makes it easy to add keyboard shortcuts(or accelerators) to your javascript app. WEBアプリに超絶簡単にJavaScriptのキーボードショートカット機能を実装する「shortcuts.js」。 次のように定義することで、Ctrl+Shift+Xのショートカットキーが押された際の機能を実装できます。 shortcut(
JavaScriptでボックス要素の角丸を自由自在に操るライブラリ「RUZEE.Borders」:phpspot開発日誌
JavaScriptでボックス要素の角丸を自由自在に操るライブラリ「RUZEE.Borders」 2007年03月27日- ruzee.com - Steffen Rusitschka ShadedBorder - JavaScript Round Corners with Drop Shadow Rouding corners with JavaScript has a long history. Everything started on 16th of March 2005 with Nifty Corners and loads of other libs followed. JavaScriptでボックス要素の角丸を自由自在に操るライブラリ「RUZEE.Borders」。 同様のライブラリに Nifty Corners がありますが、これを更に進化させ、使いやすく、高速に、かつよ
JavaScriptによるモーショントゥイーンアニメーション実装「JSTween」:phpspot開発日誌
JAVASCRIPT MOTION TWEEN JavaScriptによるモーショントゥイーンアニメーション実装「JSTween」の紹介。 デモサイト、解説ページを見てみてください。これまで見たことがないJavaScriptアニメーション表現を見ることが出来ます。 次のようなTweenクラスがあって、それを使うことでこういったアニメーションが実現できるということかなり便利そう。 var t = new Tween(object,property,easing,start,end,duration,suffixe); 次のJavaScriptソースコードが提供されています。 Tween.js 、ColorTween.js 、OpacityTween.js 、TextTween.js 、Sequence.js 、Parallel.js 名前を見るとなんとなく分かりますが、必要に応じてファイルを
押さえておきたい15のJavaScriptスニペット:phpspot開発日誌
WebCodr.com Blog Archive 15 Javascript Snippets You Can’t Live Without Please Note: We have moved to our new home WebCodr.com - please update your links and bookmarks! 押さえておきたい15のJavaScriptスニペット。 画像読み込み＆フェーディング 動的テーブル カレンダー選択ウィジェット タブバー ドラッグできるWindow ズームできるイメージサムネイル LightBox2 ドラッグ＆ドロップなショッピングカート ドラッグ＆ドロップなソート可能リスト JavaScriptのロギング＆デバッギング フォントリサイズの検出 地図上にポインタとテキストを置く フォトアルバム＆スライドショー スライドダウン＆アップアニメーシ
超絶クールなMacスタイル写真ギャラリー「PhotoFlip」:phpspot開発日誌
Mac Style PhotoFlip Gallery This Photoshop Flash tutorial will show you how to design a cool photo gallery as seen on AppleTV website and in many Mac application (ie. iTune, iPhone). 超絶クールなMacスタイル写真ギャラリー「PhotoFlip」。 次のような、iPhoneに搭載されているような写真ギャラリーが作れます。 PhotoFlip の動作デモはこちら ギャラリー自体は次のようなXMLファイルで初期化することが出来るので、使うのは簡単です。 サイトに設置して、訪問者を驚かせられそうなUIとして覚えておきたいですね。 関連エントリ Flashを使った超高機能クールフォトギャラリー「dfGallery」 ス
無料で使えるFlashテンプレートがいろいろ「FlashVillage」:phpspot開発日誌
FlashVillage.com - FREE Flash Templates All FlashVillage templates are 100% FREE. You simply need to register as a FREE member and you can start downloading. 無料で使えるFlashテンプレートがいろいろ「FlashVillage」。 オープンソースのFlaファイルをダウンロードすることが可能です。 どれも結構高度な物なので、Flash開発の参考や、そのものをテンプレートに何かを作ったり出来そうです。 配布されているものを以下に紹介。 グリグリ動く、テレビ風インタフェース クールなフォトギャラリー ＯＳ風インタフェースのサイト ページ内容がパズル風に切り替わる超クールインタフェース 虫眼鏡風インタフェース 樹木が徐々に育っていく風アニメ
注目！Flashを応用してHTML＆CSSだけでは通常作れない画像効果を得る「swfIR」:phpspot開発日誌
注目！Flashを応用してHTML＆CSSだけでは通常作れない画像効果を得る「swfIR」 2007年02月27日- swfIR: swf Image Replacement When you start to use swfIR, you’ll need the ability to style it, the same way that you can do with regular images. Flashを応用してHTML＆CSSだけでは通常作れない画像効果を得る「swfIR」。 こういった仕組みで、久しぶりに感動させられました。 Ajaxにこだわらず、Flashも応用することでこんなことも出来るんだ、と思わせられたものでした。 なんと、<img src="〜"> な画像タグがあったとして、この画像に、動的に角丸やシャドウ効果、回転効果やボーダーを直接かけることが出来ます。 次の
CSS開発に使える「Free CSS Toolbox」:phpspot開発日誌
Free CSS Toolbox - Free CSS Validator, CSS Formatter, CSS Compressor Free CSS Toolbox is a freeware productivity software for web developers who work with CSS code. CSS開発に使える「Free CSS Toolbox」。 次の機能を持つWindowsで動作するアプリケーションです。 色わけされたCSSエディター CSSフォーマッター、Beautifier機能 CSSエラーチェッカー CSS圧縮機能 W3C CSS バリデート機能 CSS開発のIDEとして使えそう。
CSSで角丸テクニック２５:phpspot開発日誌
CSS Juice - Design, Tutorial, Showcase and more 25 Rounded Corners Techniques with CSS Rounded corners is one of the most popular and frequently requested CSS techniques even the father of internet Google also launch the rounded corners style markup with her Google Adsense and let users to custom their ads recently. CSSで角丸テクニック２５がまとめられていました。 様々なサイトにでの角丸実装ドキュメントのまとめです。 Sliding Doors Even More Round
CSSを使ってカッコいい円形メニューを作る:phpspot開発日誌
metal.ize - tutoriales Este es un peque・ experimento con CSS que muestra un men・circular con los elementos a su alrededor.CSSを使ってカッコいい円形メニューを作るサンプル。 次のような円形でアイコンにカーソルを合わせるとツールチップが表示されるような円形メニューのサンプルが紹介されています。 尚、紹介したページの言語は英語ではないのですが、解説ページのサンプルコードを読みつつ原理を理解するとよいでしょう。 HTMLがリスト要素になっていて綺麗なHTMLになっているのが特徴。ＣＳＳをオフにすると次のようなリスト要素の見栄えになります。 Flashや画像のクリッカブルマップでこういったナビゲーションを作るのは簡単そうですが、リスト形式のものはなかなか無かった気がします。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
