cssPanelMenu CodePen Facebookアプリ風パネルメニューのCSS実装デモ「cssPanelMenu」。 ページが左にスライドするあのメニューをCSSで実装したデモです。 JavaScriptレスでメニューが左にアニメーションしつつ現れるデモで、CSS自体もそこまで長くなくて分かりやすいです ナビゲーション部分のHTMLも次のような感じで分かりやすく記述可能。 CSSのみでやったというところがいいですね。 関連エントリ Facebookアプリみたいな最近流行りのUIでWEBアプリ実装が出来るフレームワーク「Sidetap」

Circle Hover Effects with CSS Transitions | Codrops 円形アニメーションで美しいエフェクトを作るCSSのTransitionsを使った実装例。 マウスオーバーで円形に美しいアニメーションをするデモが公開されています。将来的には当たり前のように使われているテクニックかもしれません。 デモが７個あるのですが、円形を使って様々にアニメーションして美しい上に、色々な応用例が考えられて楽しいです 関連エントリ 円形の冊子ページをめくる風機能をCSS3とjQueryで実現するチュートリアル テキストを円形に描画するチュートリアル jQueryとCSS3を使ったPath風の円形メニューサンプル アニメーションするクールな円形メニューが実装できるjQueryプラグイン「MobilyBlocks」

Growing Thumbnails Portfolio | Tutorialzine CSS3＆jQueryでサイトサムネイルをDock風にするチュートリアル。 サイトサムネイルにカーソルを合わせるとサムネイルが拡大されるようなパーツを作れます。 なんだ、これまでのDockスクリプトと同じじゃないかと思うかもしれませんが、サイトサムネイルの下にあるトレイっぽいものがCSSでデザインされており、これも同時に拡大されるところがテクってます。 Chromeで試したところ、びよーんと、動きもなめらか スクリプトのDLも可能なのでそのまま利用できます 関連エントリ CSSだけで実現したMac OS X風ドック「CSS Dock (V2)」 Mac OS X風のドックを上下左右どこでも設置できるjQueryプラグイン「Docklr」

jQueryなどの他のスクリプトに依存せず、スタンドアローンでパララックスのエフェクトを実装できる超軽量（2.2KB）のスクリプトを紹介します。 skrollr -GitHub [ad#ad-2] skrollrのデモ skrollrの使い方 skrollrのデモ パララックスは複数のエレメントを異なるスピードで動かすことで奥行きの錯覚を起こすもので、skrollrはスクロールの量に応じて、ページ上の各エレメントにさまざまなスタイルを定義することができます。 デモではその面白いパララックスのエフェクトが楽しめます。 デモは3つあり、まずはskrollrが楽しめるメインのデモから紹介します。

CSS3 Animated Loading Bar, by Lee Munroe CSS3でアニメーションする読込バー実装サンプル CSS 定義しておけばdivとspanでサクっとアニメーションする読み込みバーが作れるというものです HTMLマークアップは以下のように超シンプル。 <!-- Start of loading bar --> <div class="bar"> <span></span> </div> <!-- End of loading bar --> CSSで色を変えられるので便利です。 JavaScriptライブラリと組み合わせればより柔軟なものが作れそうですね 関連エントリ HTML5でプログレスバー付きファイルアップロードを実現する例 プログレスバーをバリバリに自分好みにできるjQueryプラグイン「Extended Progress Bar」

Make It Snow on Your Website With CSS Keyframe Animations | Design Shack CSSだけでページに雪を降らせるデモ。 スクリプトを一切使わずにCSSだけで雪を降らせています。 デモページ 昔はCSSでこんなことをするようになるとは思いもしませんでした。 未来のWEBはどうなっているんでしょうね。 関連エントリ CSSで様々なアニメーションが実現できる「Animate.css」 ピュアCSS3でタイピングアニメーションするデモ これは超カッコいい!CSS3を使ったアニメーションするボタン実装サンプル集 ピュアCSSでアニメーションするアコーディオン実装デモ

Image Gallery Wheel 記事 これは新しい、回転する円形のイメージギャラリー実装サンプル。 divを並べた簡単なマークアップなのに以下のような複雑なレイアウトを作れています（画像ではありません） svgを使ってマスク処理されていることで画像のマスキングは実現されているようで、更にradiusやrotateなどを使ってアニメーションも実装されています クリックでアニメーションしながら画像が切り替わります マークアップは超シンプル 色々と応用することでこういうことができるんですね。 関連エントリ CSS編集がブラウザ上でリアルタイムに行えホスティングもしてくれる「WebPutty」 ピュアCSSなソーシャルサイトのログインボタン CSSだけで実現したMac OS X風ドック「CSS Dock (V2)」 レスポンシブデザインのためのCSSフレームワーク１５

Tutorial demos さまざまな基本となるアニメーションのユニット集。 [ad#ad-2] jsMorphの実装 外部ファイル 当スクリプトを外部ファイルとして指定します。 <script src="js/jsMorph_min.js" type="text/javascript"></script> JavaScript jsMorphの基本書式です。 var myMorph = jsMorph( Object obj, // HTML element, Array of elements or elementCollection that are rendered Object prop, // css properties of end position [Object params], // parameters that influence the motion (dur

フェードイン、フェードアウト、バウンド、シェイク、回転などのアニメーションを簡単に使用できるクロスブラウザ対応のスタイルシートを紹介します。 ※JavaScriptは一切使用していません。 Animate.css - a bunch of plug-and-play CSS animations [ad#ad-2] Animate.cssの使い方 「animate.css」を外部ファイルとして指定し、アニメーションを加えたいエレメントにclassを付与するだけです。 外部ファイル <link rel="stylesheet" href="animate.css" /> エレメントにclassを付与 <p class="flash">Live long and prosper.</p> Animate.cssの実装 デモでは、classを付与するだけで、多彩なアニメーションが簡単に利用できま

CSSのborderをアニメーションさせて目立たせるjQueryプラグイン「animatedBorder」 2011年09月14日- jQuery.animatedBorder.js CSSのborderをアニメーションさせて目立たせるjQueryプラグイン「animatedBorder」 borderというと基本的に固定ですが、このjQueryプラグインを使ってアニメーションさせることが出来るみたいです。 仕組みとしては、背景が透明と白のgifアニメーションを交互に点灯させ、ボーダー自体は固定色という仕組みで動いています。 とあるブロックを目立たせたいなんていう場合に使えそうです。 仕込んだら実装は以下の１行で済みます。 $('div.alpha').animatedBorder(); borderの色やサイズの指定が可能です。 関連エントリ カスタマイズ可能なアニメーションスクロールが

アニメーションでスライドする通知パネルをブラウザの上部に配置するスタイルシートを紹介します。 実装では、CSS3アニメーション対応ブラウザと非対応ブラウザへの配慮もされています。 Pop From Top Notification [ad#ad-2] 下記は各ポイントを意訳したものです。 デモ デモページでは、CSS3アニメーションをサポートするブラウザと非サポートブラウザでの挙動の違いを確認できます。 デモページ ※上部のイエローのパネルです。 CSS3アニメーション サポート アニメーションでパネルがスライド表示され、アニメーションで隠れます。 CSS3アニメーション 非サポート スタティックにパネルが表示され、クローズボタンのクリックで隠れます。 実装：パネルをブラウザ上部に配置 まずは、パネルをブラウザの上部に配置します。 HTML パネルはdiv要素で実装します。 <div id

ページ内のさまざまな要素に、オーバーレイをアニメーションで簡単に適用できるjQueryのプラグインを紹介します。 Simple Overlay [ad#ad-2] 上記ページの右上にもデモが掲載されており、左の「Try It」ボタンをクリックすると下記のようにモニターの画像にオーバーレイが適用されます。 オーバーレイの解除はオーバーレイをクリックです。 デモのキャプチャ（拡大） Simple Overlayの主な特徴 さまざまなエフェクト jQueryを使用しているので、フェードのエフェクト、スライドのエフェクトなどさまざまなアニメーションでオーバーレイを適用できます。もちろん、エフェクト無しも可です。 CSSでのフック オーバーレイを適用する要素に、オーバーレイがアクティブである時にclass名を付与することができます。 コールバック オーバーレイ時にコールバックを設定することができます

Pure CSS3 accordion ? Red Team Design ピュアCSSでアニメーションするアコーディオン実装デモが公開されています。 なかなかいい感じにCSS3でスタイリングされてるのもポイント。iPhoneでも試してみましたが普通に動作しました。 デモページを見る スマートフォン向けにいいかもしれませんね。 関連エントリ グリッドアコーディオンで新しい情報表示の仕方 少ないスペースに一杯情報を埋め込めるクールなアコーディオン実装jQueryプラグイン「Easy Accordion」

Pure CSS Slide-out Interface ピュアCSSでスライドアウトインタフェースの実現。 ページの再度にちょこっとタブ風の画像を置いておいて、クリックするとアニメーションしながら表示されるあのUIがJSなしで実装されています。 具体的なサンプルCSSとマークアップが提供されています。 :hover と transition を使って実装されているようですが、こんなに簡単にできるのはいいですね。 IE7,8でもアニメーションはしませんが一応動くように作られています。 関連エントリ ピュアCSSなドロップダウンメニュー実装例 ピュアCSSでonclickイベントをシュミレーションするデモ JavaScript使ってないのに使ってる風のピュアCSSなテクニック集

スムーズなアニメーションでタブを切り替え、各タブコンテンツの#リンクにも対応した、タブの機能性のみを追求したjQueryのプラグインを紹介します。 JQuery EasyTabs Plugin デモページ：同じページに複数のタブを設置 [ad#ad-2] EasyTabsの主な特徴 タブの切り替え時にはスムーズなアニメーションが可能 外観はCSSで簡単にカスタマイズ可能 ブラウザのバックボタンとフォワードボタンに対応 各タブは#リンクが有効でブックマークが可能（SEOにフレンドリー） タブは指定された時間で自動切り替え可能 グローバル変数の使用はしていません ページ内に複数のタブコンテンツを設置可能 valid HTML Markup 超軽量（5KB） オープンソース（MIT and GPL licenses） タブのスタイリングはCSSでもJavaScriptでも可能 AJAXコンテンツ