[CSS]パネルをCSS3アニメーションでスライドや回転や拡大させたりするチュートリアル | コリス

2013/04/10 112 users img要素 デフォルト 共通 実装 HTML

画像とテキストを配置した2枚のパネルを切り替える時に、CSS3アニメーションでふわりと入れ替えたり、しゃっとスライドしたり、くるっと回転したり、拡大させたりするチュートリアルを紹介します。 CSS animated profile cards 実装とデモ アニメーションは4種類あり、まずは共通のHTML/CSSから。 HTML 各パネルはリスト要素で実装し、デフォルトの画像のパネルはimg要素、切... 続きを読む

[CSS]JavaScriptを使わずに、Pinterest風レイアウトにするスタイルシートのテクニック | コリス

2012/08/22 160 users コリス wrapper columns CSS テクニック

昨日はJavaScriptを使ってPinterest風レイアウトを実現するスクリプトを紹介しましたが、今日はJavaScript無しでスタイルシートで実現するテクニックを紹介します。 デモページ：幅900pxで表示 実装 HTML HTMLは非常にシンプルで、各パネルをdiv要素で実装し、それらをdiv要素で二重に内包します。 <div id="wrapper"> <div id="columns... 続きを読む

[JS]美しいエフェクトを備えた水平タイプのアコーディオンのスクリプト -zAccordion | コリス

2011/06/13 113 users コリス ドロップシャドウ アコーディオン jQuery 実装

滑らかなスライドのアニメーション、繊細なドロップシャドウ、フェードで表示されるインフォボックスなど、美しいエフェクトを備えたアコーディオンのjQueryのプラグインを紹介します。 zAccordion — An Inverted Accordion スライドの重ね順を反転させたちょっと面白いデモ。 zAccordionの実装 HTML アコーディオンの各パネルはリスト要素で実装します。 続きを読む

[JS]超軽量・超高性能のコンテンツスライダーのスクリプト -Sudo Slider | コリス

2010/07/25 232 users コリス アクセシブル Ajax スクリプト スライダー

クロスブラウザ対応、各パネルのブックマークやスクリプトのオフ時も配慮されたアクセシブルで超軽量・超高性能のコンテンツスライダーのスクリプトを紹介します。 Sudo Slider jQuery Plugin デモページ Sudo Sliderの主な特長 リスト要素で簡単にスライダーを実装。 AJAXで画像やHTMLをロード。 スクリプトのオフ時でもコンテンツが可能。 マルチプルなスライダーにも対応。... 続きを読む