スクリプトもスタイルシートも書かずに、多彩なアニメーションで画像がスライドするスライドショーを実装できるスクリプトを紹介します。 こういう実装方法がこれから増えてくるかもしれませんね。 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

BackgroundImageでスプライトアニメーションさせるjQueryプラグイン「AniDG」 2012年11月30日- jQuery Plugin for Cartoon-like Background Image Sprite Animation ? AniDG ? (alernative to animated Gif) HTML, HTML5, CSS, CSS3, JQuery, Flash, Photoshop, mobile, iphone & ipad web application BackgroundImageでスプライトアニメーションさせるjQueryプラグイン「AniDG」。 １枚の画像をJavaScript を使い、背景画像を順番に切り替えていくことでアニメーションさせられます background-image の書き換えなので、要素の中に何か入っていてもよい

equalize.js 高さや幅が不揃いのDOM要素を同じ高さ・幅にします。 height, width, outer-, inner- に対応

HTML 各デモのベースとなるHTMLです。 div要素のclassを変更して利用します。 <div class="pic"> <img src="image.jpg"> </div> 各デモで共通で使用するスタイルです。 * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } body { background: #333; } .pic { border: 10px solid #fff; float: left; height: 300px; width: 300px; margin: 20px; overflow: hidden; -webkit-box-shadow: 5px 5px 5px #111

jQuery Responsive Tile Galleryは、レスポンシブレイアウトに対応した画像ギャラリーです。 ブラウザサイズを変更すると、すっとアニメーションしながらレイアウトが変更されます。 jQuery Responsive Tile Gallery

画像や見出し・パラグラフなどを配置したパネルを木枯らしに舞う葉っぱのようなアニメーションで次々に表示するjQueryのプラグインを紹介します。 Demo 3: jQuery UI Sliderを使ったタイプ Windyの使い方 Step 1: 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.windy.js"></script> Step 2: HTML コンテンツはリスト要素で、各アイテムに画像や見出し・パラグラフを自由に配置できます。 <ul

簡単に、ローディング用のGIFアニメーション画像を作成できるオンラインサービスを紹介します。 用意されているデザインは7種類、サイズやカラー、アニメーションのスピードなどカスタマイズも簡単にできます。 上段：Line（カラーはピッカーから選択可能） 中段：Circle, Arrow, Snake 下段：Pulsate, Wifi, Rectangle ローディング用の画像を作成するのは簡単です。 サイトにアクセスします。

Yannis Chatzikonstantinou / Freetile.js アイテムをタイル状に並べる新しいjQueryプラグイン「Freetile」 LightBoxばりに流行ったこのレイアウトプラグインですが、新しいプラグインが出た模様。 プラグインは色々ありますがそれぞれ使い勝手が違ったりするので１つの選択肢として覚えておいてもよさそうですね 使い方は以下のように簡単で、オプションでアニメーションするかなどのシンプルなオプションが選べる模様です $('#container').freetile(); 関連エントリ 画像レイアウト関連で便利なjQueryプラグイン等まとめ

Cycle2 カスタマイズ自由自在の多機能スライドショー実装ライブラリ「Cycle2」 全ブラウザ対応、レスポンシブ、カスタマイズ自由、エフェクト多数、スライドのブックマーク等、他のスライドショーで出来るような事は殆ど対応しているそうです。 とりあえず、既存のライブラリを使ってみたけどどうも自分の作りたいものと違う、といった場合にこうしたカスタマイズ出来るもので好みに作れそうです キャプションをつけたり ページ送りをしたり 関連エントリ CSS3で画像を分割スライドする超クールなパネル実装例 一枚の画像を高速にスライドさせてアニメーション表示する「JZoopraxiscope」 紙芝居のようなアニメーションでスライドするスライダー実装jQueryプラグイン「Innovation Slide」

Animated Responsive Image Grid | Codrops 画像が個別にアニメーションしながら切り替わるイメージグリッド実装デモ 次のように画像が並んでおり、ランダムに数個が別の画像にアニメーションしながら切り替わる感じがオシャレです。 会社概要ページとかでメンバーを並べる、というような用途に使うと面白いかも。 サンプルダウンロードで利用することも可能。 関連エントリ 超シンプルで1.8KBと軽量な画像スライダー用jQueryプラグイン「Craftyslide」 画像のキャプションが美しいスライダー実装jQueryプラグイン「RefineSlide」 複数アニメーションを組み合わせられるスライダーを実装できるjQueryプラグイン「Sequence.js」

Grid Slide Plugin [ad#ad-2] Grid Slideのデモ Grid Slideの使い方 Grid Slideのデモ デモは2つあります。 まずは、div要素をスライドさせるシンプルなデモから。 デモページ：Demo 2 Grid Slideの使い方 外部ファイル 「jquery.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。 Demo 2のバウンドのエフェクトを使用する場合は「jQuery Easing Plugin」も記述します。 <link href="gridslide.css" type="text/css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascri

CSSスプライトを使って、映画のフィルムを再生するように画像をアニメ化するjQueryのプラグインを紹介します。 操作は下記キャプチャのようにボタンをはじめ、ドラッグにも対応しており、アニメーション再生のスムーズ機能も備えています。 デモで使用している画像の一部 この画像をCSSスプライトで表示し、アニメーションをコントロールします。 画像の作成には「ImageMagickを使用すると、フォルダ内の全ての画像からスプライト用の一枚の画像を生成できます。 実装の基本 アニメーションを配置するdiv要素、サイズなどを指定するスタイルシート、コントロールするスクリプトが基本構成です。 HTML <div class="tape"></div> CSS .tape { width: 420px; height: 315px; background: url(tape.png) 0px 0px no

lake.jsは、波打つ様子を表現できるjQueryプラグインです。 ちょっと不自然ですが、面白い感じです。 lake.js is a jQuery plugin that displays what is waving. A little unnatural, but interesting. lake.js

Adipoli jQuery Image Hover Effects 画像ホバー時に２０種類以上の多彩なエフェクトがかけられるjQueryプラグイン「Adipoli」 画像にカーソルを合わせるとアニメーションを画像に重ねて、インタラクティブな効果を持たせることができます ただ画像を並べるよりも面白いものが作れそうです $('#image1').adipoli(); 使い方もこんな感じで死ぬほど簡単です 勿論多彩なオプションでカスタマイズ可能です 関連エントリ フリーで使えるPHP製画像ギャラリースクリプト「PhotoShow」 フルスクリーンでぼかしがカッコいいHTML5ギャラリーを作るサンプル PCでもスマホでもスワイプで画像を送れるギャラリー実装jQueryプラグイン「Asketic Swipe Gallery」

画像の一部だけをアニメーションにする「シネマグラフ」を簡単に作成できる無料のiPhone, iPad, iPod Touch対応のアプリを紹介します。 使い方も簡単で、ちょー楽しいです。 Flixel [ad#ad-2] シネマグラフとは Flixelの使い方 シネマグラフを作成できる他のアプリ シネマグラフとは シネマグラフとは画像の一部だけがアニメーションで動くものです。 Twitter(@colisscom)の方で、たくさん紹介しています。 via: Jamie Beck e Kevin Burg – Cinemagraphs Flixelの使い方 アプリは、下記からダウンロードできます。 Flixel -iTunes App Store [ad#ad-2] Flixelのキャプチャと共に使い方をさらっとご紹介。 Flixelを起動し、真ん中のボタンをタップすると、動画撮影になります

Casual Slider [ad#ad-2] Casual Sliderの特徴 Casual Sliderのデモ Casual Sliderの使い方 Casual Sliderの特徴 Casual Sliderは実装が簡単で、シンプルながら充分な機能を備えたコンテンツスライダーです。 4KBと超軽量のスライダー タイマー機能付き あらゆるHTMLエレメントを配置可能 全てのメジャーブラウザをサポート カスタム ナビゲーション セットアップが簡単 アニメーションの種類は多数 デフォルトのテーマも用意 Casual Sliderのデモ デモもシンプルですが、Casual Sliderの使い勝手が分かると思います。 各パネルに半透明のキャプションも表示できます。 Casual Sliderの使い方 HTML 各パネルはリスト要素で実装します。 <div id="slider"> <div cl