スクリプトもスタイルシートも書かずに、多彩なアニメーションで画像がスライドするスライドショーを実装できるスクリプトを紹介します。 こういう実装方法がこれから増えてくるかもしれませんね。 Cycle.js Cycle.js -GitHub 対応ブラウザは下記の通り。 IE8+ Chrome Firefox Safari Opera TODOとして、ARIAのサポート、キーボード操作、IE7対応、エフェクトの追加を予定しているそうです。 いつもは、デモ、使い方、の順番で紹介していますが今回はデモと使い方を併せてご紹介。 Cycle.jsのセットアップ Cycle.jsのバリエーション Cycle.jsのセットアップ ベースとなるHTMLは非常にシンプルです。 スタイルシートをhead内に、スクリプトを</body>の上に外部ファイルとして記述します。 <title>Cycle.js</titl

SWIPEVIEWは、スマートフォンでスワイプできるギャラリーを実装できるJavaScriptです。 jQueryに依存していないようです。 SWIPEVIEW

Swipe JS - a lightweight mobile web slider 軽量のスワイプ可能なスマホ用スライダーJS「SwipeJS」 <div><ul> でリストを定義して<div>をJSで初期化するだけでスワイプでページ送りができるスライダーが簡単実装できます jQueryに依存していないため、軽量。カスタマイズ項目も必要最低限となっているようです 関連エントリ PCでもスマホでもスワイプで画像を送れるギャラリー実装jQueryプラグイン「Asketic Swipe Gallery」 iPhone等でもスワイプで画像を送れるカルーセル実装jQueryプラグイン「Roto」 スマホのタッチイベントを一気に実装できる13KBの軽量ライブラリ「QUOjs」

Holder.js - client side image placeholders 画像のプレースホルダを生成してくれるJSライブラリ「Holder.js」 <img src="holder.js/300x200"> と書くとcanvasを使い、指定したサイズの画像をクライアントサイドで描画してもらえるというもの。 JSなのでサーバ不要でオフラインでも作業できます。 こうした画像をよく使う方は、いちいち作るのは面倒なので、JSコードで書いて画像化できたらなかなか便利ですね 関連エントリ HTML5で美麗なページめくり効果が作れるJSライブラリ「turn.js」 様々なグラフを描画できるJavaScriptライブラリ「NVD3.js」 ストレス無しでGoogleマップを使ったサイトが作れる「gmaps.js」 ブラウザ上でPDFを表示するJSライブラリ「PDF.js」

サイズやカラーをテキストで指定するだけで簡単にダミー画像を生成できる超軽量（4KB）のスクリプトを紹介します。 Holder.js -GitHub [ad#ad-2] Holder.jsのデモ Holder.jsの使い方 Holder.jsのデモ 対応ブラウザ Holder.jsはcanvasとdata URI schemeを使用しているため、下記のブラウザでご覧ください。 Chrome 1+ Firefox 3+ Safari 4+ Internet Explorer 9+ Holder.js [ad#ad-2] Holder.jsの使い方 使い方は、2ステップです。 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <script src="holder.js"></script> Step 2: HTML ダミー画像を設置したい場所にimg要素で記述します。

demo 1：幅1920pxで表示 デスクトップ用の画像（hdsize-wide-512x512.png）を表示 syzeの使い方 上記のdemo 1を例に実装方法を紹介します。 外部ファイル 当スクリプトを外部ファイルとして指定します。 <script src="syze.min.js"></script> JavaScript demo1では表示サイズの数値を元に、class名にもその数値を利用します。 syze.sizes(320, 480, 768, 1024, 1920); class名 .is320(0-479px) .is480(480-767px) .is768(768-1023px) .is1024(1024px-1079px) .is1920(1920+px) CSS 設定が完了したら、あとはサイズごとにスタイルシートを設定します。 body { background:

Lightviewは、実装が容易でシンプル&クールなデザインの画像オーバーレイスクリプトです。 IE6にも対応しており、クロスブラウザで動作するようです。 Lightview

Slider.js: Slideshow with jQuery, CSS Transitions and Canvas - example with Flickr HTML5＆CSS3をフルに活用したスライドショー実装ライブラリ「Slider.js」 スライドショーライブラリは色々ありますが、Slider.jsはCSS3やCanvasをフルに活用したライブラリとなります CSS3を使った画像切替の効果が豊富に用意されているのが特徴です。 ページ番号、送る、戻るといったナビゲーションの表示方法も色々と変えられるようです APIのところを見ればわかりますが使い方が超簡単でコードもシンプルにかけます。 関連エントリ 画像切替が超カッコいいスライドショーが実装できるjQueryプラグイン「Diapo」 3D効果を使って迫力あるスライドショーを作れる「Slicebox」 CSS3を使った超カッコい

png.jsはJavaScriptを使ってPNGを解析し、その結果をCanvasタグにレンダリングするライブラリ。 png.jsはHTML5/JavaScript製のオープンソース・ソフトウェア。Web上で扱われる画像のフォーマットと言えば、GIF/JPEG/PNGだ（WebPもあるか）。個人的な主観としてGIFはアニメーションやアイコン、JPEGは写真やサイズの大きな画像、その中間がPNGに向いていると感じている。 レコード画像を描く 写真を取り扱うサイトでは、そのメタデータを解析して撮影した機種や撮影場所、露出といったデータをEXIFから得ている。同様のPNGを解析するJavaScriptライブラリがpng.jsだ。 png.jsはPNGをJavaScriptで解析し、その結果をCanvasタグを使って画像として表示する。つまり表示されるのはPNG画像であり、単純にWebブラウザでim

noobSlide - mootools サクサク動く画像ギャラリー作成JSライブラリ「noobSlide」。 複数の画像を気持ちよく動かせるギャラリーライブラリが公開されました。 スロットマシーンのように超気持ちよく動作します。 高速な画像閲覧を必要とするＵＩに活用できますね。 関連エントリ スライドショー付きLightBox風イメージアルバムのサンプル ＵＩがクールでサクサク使えるMacウェブギャラリー風画像ギャラリー「qGallery」

html2canvas - screenshots with JavaScript JavaScriptでスクリーンショットが取れるライブラリ「html2canvas」 サーバサイドでブラウザを動かしてスクリーンショットを取るというより、利用者のブラウザ上でスクリーンショットをJavaScriptとcanvasを使って生成しちゃおうというものらしいです。 canvas非搭載ブラウザはflashcanvasやExplorerCanvas等の代替が必要とのこと。 html2canvasでレンダリングされたサンプルも見ることが出来ます。 frameやobjectのサポートはしていない点に注意。 スクリーンショットを取る仕組みをサーバに仕込むとタイムラグがあったりサーバ側は大変だったりで色々問題点を抱えていますが、クライアント側でやれば画像を受け取るだけでいいので便利です。 クライアントごとの表示

vintageJSはアップロードした写真をビンテージ風に加工するJavaScriptライブラリ。 vintageJSはjQuery/JavaScript製のオープンソース・ソフトウェア。写真は全てをあるままに写し出せば良いだけではない。トイカメラに代表されるように、エフェクトがかかってもまた楽しさがある。 赤を強めに カメラ自体にそういう機能があっても良いが、なかったとしても画像編集ソフトウェアで加工することもできる。特殊な画像編集をWebベースで行ってくれるのがvintageJSだ。 vintageJSはCanvasタグを使って画像加工を行う。名前の通りビンテージ風に加工してくれるのが特徴だ。荒くしたり色調を変化させたりして何となく古めかしくしてくれる。味わい深く、印象的な写真に仕上がるはずだ。加工した写真はダウンロードできる。 だいぶビンテージっぽくなった フィルターは多数設定がある。

How to make a 3D gallery using javascript ? Script Tutorials 立体感がいい感じの３Dギャラリー作成JSチュートリアル。 奥行きのある空間内を画像がダイナミックに動くギャラリーを作るチュートリアルです。 パッケージのダウンロードとデモが体感できます。 覚えておくとこうした演出がほしい場合にすぐ実装できそうですね。 最新のブラウザでみれば動きもわりとなめらかでストレスになりません。 関連エントリ CSS3をフル活用した立体的な画像ギャラリー作成デモ CSS3な背景パターンのギャラリーサイト「CSS3 Patterns Gallery」 HTML5を使ったサイトをまとめたギャラリーサイト色々 超カッコいいApple風スライドショーギャラリー作成チュートリアル