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

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

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

お問い合わせ、支払い、サインアップなど、フォームを実装するためのHTMLとCSSのテンプレート -Boilerform | コリス

2018/02/01 55 users コリス CSS テンプレート HTML テンプレート集

フォームを実装するのが苦手、という人は少なくないと思います。 お問い合わせフォーム、支払いフォーム、サインアップフォームなど、さまざまなプロジェクトで利用されるフォームを実装するのに役立つHTMLとCSSで制作されたテンプレート集を紹介します。 Boilerform Boilerform -GitHub Boilerformのデモ Boilerformの使い方 Boilerformのデモ デモでは... 続きを読む

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

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

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

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

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

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

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

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

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

[JS]ぷるぷるとかわいいアニメーションでモーダルボックスを表示させるスクリプト -Stackbox | コリス

2014/07/04 54 users jQuery コリス モーダルボックス メインページ ぺら

ぷるぷるとかわいいアニメーションでモーダルボックスを表示させるjQueryのプラグインを紹介します。 ぷるぷるだけでなく、ぶらーんとさせたり、しゃかしゃかさせたり、ぺらっとさせたり、さまざまなものが揃っていて楽しいアニメーションが満載です。 Stackbox Stackbox -GitHub Stackboxのデモ Stackboxの使い方 Stackboxのデモ デモはメインページだけでなく、デ... 続きを読む

[JS]映画のエンドロールみたいな演出を加えるスクリプト -End Credits | コリス

2014/06/25 70 users コリス jQuery ウェブページ スクリプト エンドロール

普通のウェブページに、映画の終わりに流れるスタッフロールみたいな演出を加えるjQueryのプラグインを紹介します。 End Credits -GitHub End Creditsのデモ End Creditsの使い方 End Creditsのデモ デモではそのエンドロールをゆっくりお楽しみください。 デモページ 「Open Credits」をクリックすると、始まります。 まずは、タイトルとキャスト... 続きを読む

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

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

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

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

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

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

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

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

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

[JS]ページ全体、ページ上のさまざまな要素にオーバーレイをかっこよく表示するスクリプト -plainOverlay | コリス

2014/04/22 70 users jQuery コリス スクリプト アニメーション 実装

ページ全体、ページ上のさまざまな要素にオーバーレイをアニメーションでかっこよく表示するjQueryのプラグインを紹介します。 実装は非常にシンプルで、オーバーレイのカラーや不透明度、アニメーションなどのカスタマイズも簡単です。 plainOverlay plainOverlay -GitHub plainOverlayのデモ plainOverlayの使い方 plainOverlayのデモ デモで... 続きを読む

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

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

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

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

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

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

[JS]スマフォに最適！フォームのラベルをアニメーションでぽんっと表示するスクリプト -Label Better | コリス

2013/11/25 70 users コリス プレースホルダー jQuery スクリプト ラベル

フォームにフォーカスすると、プレースホルダーに配置したラベルがアニメーションでぽんっと上に移動するjQueryのプラグインを紹介します。 デスクトップ用のページで使用してもかっこいいですが、スマフォ用のページにも省スペースを兼ねて使用してもいいですね。 Label Better -GitHub Label Betterのデモ Label Betterの使い方 Label Betterのデモ デモは... 続きを読む

[CSS]コンテンツを水平・垂直にぐぐぐっと傾けてナビゲーションを表示するスタイルシート | コリス

2013/11/06 68 users コリス CSS アニメーシ ナビゲーション ヘッダ

最近ちらほら見かける、コンテンツをアニメーションでぐぐぐっと傾けて、ナビゲーションを配置したサイドバーやヘッダを表示するスタイルシートを紹介します。 Animated CSS3 Perspective Menu デモ 実装 デモ デモは水平タイプ・垂直タイプの2種類あります。 まずは、水平タイプでサイドバーを表示するデモから。 デモページ：水平タイプ 左の四本線をクリック・タップすると、アニメーシ... 続きを読む

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

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

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

[JS]複数のCSSアニメーションを簡単に組み合わせて利用できるスクリプト -animo.js | コリス

2013/09/08 74 users コリス jQuery keyframes スクリプト 複数

CSSアニメーションを組み合わせて利用する際、keyframesを使うよりももっと簡単に利用できるjQueryのプラグインを紹介します。 animo.js animo.js -GitHub animo.jsのデモ animo.jsの使い方 animo.jsのデモ デモはCSS3アニメーション対応ブラウザでご覧ください。 デモ デモはシンプルなアニメーションから、いくつかのアニメーションを組み合わせ... 続きを読む

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

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

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

[JS]ビフォーアフターの2枚の画像を分かりやすく比較できるようにするスクリプト -TwentyTwenty | コリス

2013/08/04 67 users jQuery コリス ビフォーアフター スクリプト プラグイン

2つの画像を重ねて、中央のバーをスライドしてビフォーアフターを切り替えて表示することで、簡単に比較できるようにするjQueryのプラグインを紹介します。 ↓はただのキャプチャ画像なので動作しません。 TwentyTwenty TwentyTwenty -GitHub TwentyTwentyのデモ TwentyTwentyの使い方 TwentyTwentyのデモ デモはスクリプトのページに大きく掲... 続きを読む

[CSS]ヘッダをホバーするとナビゲーションがスライド表示されるスタイルシート（スクリプト無し） | コリス

2013/07/10 53 users コリス スクリプト アニメーション ヘッダ 実装

スクリプトを使わずに、ヘッダをホバーすると非表示だったナビゲーションがアニメーションで表示させるスタイルシートのテクニックを紹介します。 Create a Hidden Sliding Navigation Bar Using CSS3 Transitions デモ 実装 デモ デモは、CSS3アニメーション対応ブラウザでご覧ください。 デモページのアニメーション 通常時は細めのヘッダとコンテンツ... 続きを読む

[JS]4種類のエフェクトを備えたタブを簡単に実装できるスクリプト -Tabulous.js | コリス

2013/07/05 53 users コリス jQuery エフェクト スクリプト 切替

シンプルなHTMLで、切替に4種類のエフェクトを備えたタブコンテンツを簡単に実装できるjQueryのプラグインを紹介します。 Tabulous.js Tabulous.js -GitHub Tabulous.jsのデモ Tabulous.jsの使い方 Tabulous.jsのデモ デモはCSS3対応ブラウザでご覧ください。 最近は、デモページもかっこいいデザインなのが増えましたね。 デモ デモでは... 続きを読む

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

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

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

CSS3のふわりとしたアニメーションが気持ちいい画像ギャラリーを実装するチュートリアル | コリス

2013/06/11 85 users コリス jQuery チュートリアル Opera Safari

CSS3アニメーションとjQueryを使って、アニメーションの動きが気持ちいい水平型のギャラリー・ポートフォリオを実装するチュートリアルを紹介します。 Horizontal Portfolio Layout with CSS3 Animations and jQuery デモ 実装 デモ デモはChrome, Safari, Firefox, Operaなどのモダンブラウザ、IEは9+でご覧くださ... 続きを読む

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

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

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

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

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

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