[CSS]box-shadowを使って、紙がふわりと浮かんだようなエフェクトをつけるスタイルシートのまとめ | コリス

2012/02/27 735 users コリス box-shadow Effec エフェクト CSS

デモ 実装 デモ デモはbox-shadowに対応した下記のブラウザでご覧ください。 対応ブラウザ Internet Explorer 9.0+ Firefox 3.5+ Chrome 1+ Safari 3+ Opera 10.5+ 実装 基本となるHTML 8つの各デモのHTMLの基本は同じで、class名が異なるだけです。 <div class="box effect"> <h3>Effec... 続きを読む

ソースコードを分析し、コードの構造や階層・依存関係を可視化する便利な無料ツール -Code Crumbs | コリス

2019/02/25 703 users コリス dependencies Issue 階層 言語

フローチャート ※依存関係・フローチャートはJavaScriptのみです。 対応言語は、下記の通り。 JavaScript TypeScript Python PHP Java C++ 望む言語が他にあればIssueにどうぞ、とのことです。 Code Crumbsのデモ デモでは、JavaScriptのコードでその動作を確認できます。 デモページ 依存関係はDependenciesをオンに、... 続きを読む

[JS]最近よく見かける縦長ページ用のさまざまなアニメーションが簡単に実装できるスクリプト -ScrollReveal | コリス

2014/05/26 307 users アニメー ScrollReveal コリス スクロール パワー

先日紹介した「Ani.js」の作者様から、更にパワーアップしたスクリプトをつくったよ、と連絡を受けたので紹介します。 jQueryは無しで、縦長ページ用のスクロールに連動したさまざまなアニメーションが簡単に実装できます。 ScrollReveal ScrollReveal GitHub ScrollRevealのデモ ScrollRevealの使い方 ScrollRevealのデモ デモをアニメー... 続きを読む

[CSS]さまざまなデザインのボタンを簡単に実装できるSass/Compassのボタンライブラリ -Buttons | コリス

2013/06/23 267 users Buttons Sass コリス Compass class

フラットをはじめ、定番の角丸、サークル、アイコン添えなど、さまざまなデザインのボタンを簡単に実装できるSass/Compassで作られたボタンライブラリを紹介します。 Buttons Buttons- GitHub Buttonsのデモ Buttonsの使い方 Buttonsのデモ デモでは、リンクのテキストやbutton要素、input要素にclassを付与するだけで、さまざまなデザインのボタン... 続きを読む

[CSS]パララックスのエフェクトをスクリプト無し、CSSで実装するチュートリアル | コリス

2014/08/20 235 users パララックス コリス チュートリアル エフェクト CSS

ページ上のコンテンツを複数のレイヤーで構成し、それぞれを異なるタイミングでスクロールさせるパララックスのエフェクトをスクリプト無し、CSSで実装するチュートリアルを紹介します。 デモはパララックスの構造を可視化できるので、より分かりやすいと思います。 Pure CSS parallax scrolling websites パララックスのデモ パララックスの実装 パララックスのデモ デモは非常にシ... 続きを読む

[CSS]コピペで簡単に使える、パネルの表と裏をくるっと水平・垂直にひっくり返すスタイルシート -CSS Flip Boards | コリス

2013/05/16 207 users アニメーション コリス テキスト 全部 水平

パネルをホバーすると、表と裏がくるっとアニメーションで変わるスタイルシートを紹介します。 くるっとなるのは水平だけでなく、垂直にも対応しています。 CSS Flip Boards CSS Flip Boardsのデモ CSS Flip Boardsの実装 CSS Flip Boardsのデモ デモは全部で、4種類のくるっがあります。 前半2つはテキストを配置したパネルで、上：垂直、下：水平にくるっ... 続きを読む

[JS]サイズが不明な画像を指定したエリアにフィットさせたり、配置を調整できるスクリプト -Image Scale | コリス

2013/08/19 193 users コリス jQuery スクリプト アスペクト比 どり

サイズが不明な画像を指定したエリアにアスペクト比を維持したまま、縮小させてフィットさせて配置したり、上下左右寄せに配置させることができるjQueryのプラグインを紹介します。 Image Scale -GitHub Image Scaleのデモ Image Scaleの使い方 Image Scaleのデモ デモでは大きな画像のアスペクト比を維持したまま、小さいエリアにフィットさせて表示したり、トリ... 続きを読む

[JS]デモがめちゃ楽しい！jQuery不要でスクロールにあわせて要素をアニメーションで表示するスクリプト -WOW.js | コリス

2014/02/11 181 users コリス ビューポート jQuery不要 スクロール スクリプト

ページを表示した時やスクロールした時など、ページ上の要素がビューポートに表示された時に各要素にさまざまなアニメーションをセットする超軽量（3KB）スクリプトを紹介します。 上から左から右からスライドさせたり、タイミングをずらして順番に表示したり、さまざまな設定を簡単に実装できます。 WOW.js WOW.js -GitHub WOW.jsのデモ WOW.jsの使い方 WOW.jsのデモ デモでは上... 続きを読む

[JS]ナビゲーションを最上部に固定し、各セクションにアニメーションでスクロール移動させるスクリプト -SMINT | コリス

2013/06/10 170 users jQuery コリス スクロール スクリプト ナビゲーション

スクロールしてもナビゲーションが最上部に配置され、各セクションにアニメーションのスクロールで移動するナビゲーションを実装するjQueryのプラグインを紹介します。 最近の1ページで構成されたウェブサイトでよく見かけますね。 SMINT SMINTのデモ SMINTの使い方 SMINTのデモ デモは別に用意されていますが、SMINTのページ自体にも適用されています。 デモは、下記よりどうぞ。 デモペ... 続きを読む

[JS]ぷるぷるっとかわいいアニメーションでレイアウトを変更するレスポンシブ用のスクリプト -DyLay | コリス

2013/04/14 168 users jQuery easing コリス jquery.js ソート

ダイナミックなかわいいアニメーションでパネルのレイアウトを変更する、レスポンシブ用のレイアウトを生成するjQueryのプラグインを紹介します。 DyLay! V2 DyLay -GitHub DyLayのデモ DyLayの使い方 DyLayのデモ デモはフィルタとソートでレイアウトを変更します。 デモページ DyLayの使い方 Step 1: 外部ファイル 「jquery.js」と「easing.... 続きを読む

[JS]HTMLは汚さずに、テキストにちょっと面白いさまざまなアニメーションを適用できるスクリプト -LetterFX | コリス

2014/07/17 162 users jQuery コリス スクリプト アニメーション 実装

テキストにちょっと面白いさまざまなアニメーションを適用できるjQueryのプラグインを紹介します。 実装は非常に簡単で、一部のアニメーションは日本語にも対応しています。 LetterFX LetterFX -GitHub LetterFXのデモ LetterFXの使い方 LetterFXのデモ デモは英語のテキストにさまざまなアニメーションを適用しています。 単語ごとに適用など、英語固有のものでな... 続きを読む

[CSS]レスポンシブ用に画像を縮小するだけではなく、クロップにも対応させるテクニック | コリス

2012/12/05 149 users レスポンシブ コリス クロップ 実装 CSS

デスクトップでは通常のサイズ、タブレットでは縮小サイズ、スマフォではクロップして画像を表示させるスタイルシートのテクニックを紹介します。 Focal Point: Intelligent Cropping of Responsive Images デモ 実装 デモ デモは表示サイズで、画像のサイズや表示領域が変化します。 デモページ：幅1,200pxで表示 レスポンシブの対応は2種類用意されており... 続きを読む

[JS]IE6/7/8でアクセスしたユーザーに新しいブラウザのインストールを促すスクリプト -IE Alert js | コリス

2012/06/17 148 users jquery.js コリス Opera Step Safari

IE Alert jsのデモ IE Alert jsの使い方 IE Alert jsのデモ デモはIE6/7/8でご覧ください。 IE9、Firefox, Chrome, Safari, Operaでは、下記のように通常通りに表示されるだけです。 IE Alert jsの使い方 使い方は簡単で、2ステップです。 Step 1: 外部ファイル 「jquery.js」と当スクリプト・スタイルシートを外... 続きを読む

IE8以上ならもうスクリプト無しでOKのモーダルウインドウを表示するスタイルシート -CSS Modal | コリス

2013/05/13 146 users コリス iOS モーダルウインドウ スクリプト無し 配置

テキストや画像などのリンクをクリックすると、画像をはじめあらゆるHTMLの要素が配置可能なモーダルウインドウを表示するスタイルシートを紹介します。 CSS Modal CSS Modal -GitHub CSS Modalのデモ CSS Modalの使い方 CSS Modalのデモ デモはIE9を含む、すべての最新のモダンブラウザでご覧ください。モバイル系は、iOS, Android2/3/4のM... 続きを読む

[CSS]スタイルシートでここまでできる！Responsiveデザイン対応のスライダー -Responsive CSS3 Slider | コリス

2012/04/03 139 users コリス スライダー Responsiveデザイン CSS 実装

JavaScript無し(*1)で、スタイルシートで実装するResponsiveデザイン対応のコンテンツスライダーを紹介します。 *1 スライダーの基本機能ではJavaScriptを使用していませんが、iOSに対応させるために使用。 デモ 実装 デモ デモはCSS3に対応した下記のブラウザでご覧ください。 ベスト Firefox もっとも期待通りに動作します。 フルサポート Chrome, Fir... 続きを読む

[JS]このホバーエフェクト楽しい！シールのようにぺらっとめくるスクリプト -Sticker.js | コリス

2014/02/17 125 users コリス jQuery ホバーエフェクト スクリプト ぺら

写真画像やアイコンなどを配置したベタ塗りのボタンなどをサークル状にし、ホバーするとシールのようにぺらっとめくれるようにするスクリプトを紹介します。 実装は非常に簡単で、jQueryなどの他のスクリプトは必要ありません。 Sticker.js Sticker.js -GitHub Sticker.jsのデモ Sticker.jsの使い方 Sticker.jsのデモ デモはChrome, Safari... 続きを読む

[JS]斜めのグリッドを使った美しいレイアウトを簡単に実装できるスクリプト -diamond.js | コリス

2013/10/15 121 users コリス jQuery Flickr グリッド スクリプト

スタイルシートやスクリプト初心者でも簡単！ 斜めのグリッドを使った美しいダイアモンド状のレイアウトを実装できるjQueryのプラグインを紹介します。 diamonds.js- GitHub diamonds.jsのデモ diamonds.jsの使い方 diamonds.jsのデモ デモではFlickrの画像をダイアモンド状にカットし、斜めのグリッドで配置しています。 デモページ デモはスクリプトの... 続きを読む

[JS]これ、いい！サイトのデザインを損なわずにフォームの進捗を美しく表示するスクリプト -Fort.js | コリス

2014/06/02 117 users コリス default スクリプト 進捗 jQuery不要

ユーザーがフォームに入力する際、その進捗をアニメーションで美しく表示するjQuery不要の単体で動作するスクリプトを紹介します。 進捗のデザインは邪魔にならないので、ほとんどのサイトで利用できると思います。 Fort.js -GitHub Fort.jsのデモ Fort.jsの使い方 Fort.jsのデモ デモでは、4種類のエフェクトが用意されています。 デモページ：Default フォームに一つ... 続きを読む

[CSS]動画を背景として表示させ、オーバーレイでコンテンツを配置するテクニック | コリス

2014/06/13 109 users video要素 コリス パネル モダンブラウザ ブラウザ

動画をブラウザいっぱいに背景として表示させ、その上にコンテンツをオーバーレイで配置するテクニックを紹介します。 Create Fullscreen HTML5 Page Background Video デモ 実装 デモ デモはvideo要素に対応したモダンブラウザでご覧ください、IEは9+で、IE8だと動画が画像に変更して表示されます。 デモページ コンテンツを配置した右のパネルは、動画が透けて... 続きを読む

[CSS]画像の上に半透明なパネルを簡単に配置できる便利なスタイルシート（フェードも可） -Label.css | コリス

2013/05/21 109 users コリス フェード 半透明 エフェクト CSS

画像の上に半透明なラベルを天地中央、左右に簡単に配置でき、しかもホバー時にフェードでラベルを表示するなどのエフェクトも備えたスタイルシートを紹介します。 Label.css Label.css- GitHub Label.cssのデモ Label.cssの使い方 Label.cssのデモ デモでは、画像のラベルを動的に試すことができます。 通常利用する時は、静的に。 デモ 左のパネルでラベルを表示... 続きを読む

[CSS]アイデアにセンスを感じる、アニメーションがかわいいナビゲーションを実装するチュートリアル | コリス

2013/02/18 103 users コリス 光源 スクリプト チュートリアル ナビゲーション

ナビゲーションの各アイテムをホバーすると、光源が移動するラーヴァランプ風エフェクトをスクリプトは使用せずに、スタイルシートで実装するチュートリアルを紹介します。 矢がハートに射貫かれてるのかわいいですね。 Css-only Lavalamp-like Fancy Menu Effect デモ 実装 利用規程 デモ デモは3種類あり、各アイテムをホバーすると、ラーヴァランプの気持ちいいアニメーション... 続きを読む

[JS]サイドバーを左右からスライドさせるごくシンプルなスクリプト -Simple Sidebar | コリス

2014/08/18 100 users コリス jQuery スクリプト バン デフォルト

サイドバーを左右どちらからでもアニメーションでスライドさせるシンプルなjQueryのプラグインを紹介します。 Simple Sidebar Simple Sidebar -GitHub Simple Sidebarのデモ Simple Sidebarの使い方 Simple Sidebarのデモ デモはいくつか用意されており、スクリプトのページ自体にも適用されています。 デモ：デフォルト 左上のハン... 続きを読む

[CSS]ol要素を美しくスタイルし、アニメーションをちょっとだけ加えるテクニック | コリス

2012/02/19 97 users コリス 矩形 ポパー アロー Safari

デモ 実装 対応ブラウザ デモ デモはIE9, Firefox, Chrome, Safariでご覧ください。 擬似要素のアニメーションは、Firefoxのみサポートしています。 デモページ：Demo 1 数字を矩形にスタイルし、ホバーで数字からアローが伸びます。 ※アニメーションはFirefoxのみです。 実装 HTML HTMLは非常にシンプルで、ol要素を入れ子にして実装するだけです。 <o... 続きを読む

[JS]表示サイズにあわせて最適なレイアウトを提供する高性能なスライドショーのスクリプト -Camera | コリス

2012/03/11 96 users コリス HTML CAMERA 美しいアニメーション 構造

Cameraのデモ Cameraの使い方 Cameraのデモ デモは上記のトップにあるものと、他に3種類のスライドショーがあります。 トップのものが一番シンプルで、Cameraの基本性能を楽しめます。 画像の切り替えには、美しいアニメーションが採用されています。 デモ：Fullscreen フルスクリーンタイプのスライドショー。 Cameraの使い方 Cameraで使用する基本的なHTMLの構造か... 続きを読む

これはちょっと使いたくなる、キーフレームを使ったCSS3アニメーションのナビゲーション | コリス

2012/01/18 89 users コリス NAV Container ナビゲーション Opera

デモ 実装 デモ デモはキーフレームのアニメーションを使用しているため、Chrome, Safari,Firefoxでご覧ください。 ※IE, Operaでは動作しません。 デモページ: アニメーション完了時 実装 HTML ナビゲーションはリスト要素で実装されており、第二レベルはリストの入れ子になっています。 <div id="container"> <ul id="nav"> <li><a h... 続きを読む