スマホも対応！スクリーンいっぱいに表示させるスライダーを実装するスクリプト -FullScreen Slider | コリス

2019/04/22 45 users セクション コリス マウス タップ スワイプ操作

ページ内のセクションをスクリーンいっぱいに表示し、マウスのクリック・ホイール操作、スマホのタップ・スワイプ操作に対応した快適なスライダーを紹介します。 FullScreen Slider -GitHub FullScreen Sliderのデモ FullScreen Sliderの使い方 FullScreen Sliderのデモ デモでは、FullScreen Sliderの快適なスライダー... 続きを読む

ソースコードを分析し、コードの構造や階層・依存関係を可視化する便利な無料ツール -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のデモ デモでは... 続きを読む

[JS]ページにちょっとしたイースターエッグを仕込むことができるスクリプト -Overscroll | コリス

2015/02/09 20 users Overscroll コリス イースターエッグ スクリプト

デスクトップやスマホで、ページの領域を超えてスクロールするとバウンドするような感じになりますよね。その時にちょっとしたイースターエッグをアニメーションで表示する単体で動作する軽量スクリプトを紹介します。 Overscroll Overscroll -GitHub Overscrollのデモ Overscrollの使い方 Overscrollのデモ デモはオーバースクロールのゾーンがある、OS Xの... 続きを読む

[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]テキストを次々にモーフィングのアニメーションで表示するスクリプト -Morphext | コリス

2014/05/27 46 users モーフィング jQuery コリス スクリプト アニメーション

複数のテキストを次々にモーフィングのアニメーションで表示するjQueryのプラグインを紹介します。 スクリプトとは関係ないですが、ページのアニメーションもかっこいい！ Morphext Morphext -GitHub Morphextのデモ Morphextの使い方 Morphextのデモ デモではテキスト内のインラインで、複数のテキストがモーフィングで次々に変更されて表示します。 デモ Mor... 続きを読む

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

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

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

[JS]ページのツアーガイドをjQuery無しで実装するスクリプト -Shepherd | コリス

2014/05/19 48 users アリ モダンブラウザ コリス IE9 jQuery無し

ページの使い方は、見ただけで分かるようにデザインするのが一番ですが、100%伝えるのは難しいものです。そういう時に役立つツアーガイドを簡単に実装できるスクリプトを紹介します。 ツアーガイドとしてだけでなく、お遊び的に使うのもアリです！ Shepherd Shepherd -GitHub Shepherdのデモ Shepherdの使い方 Shepherdのデモ デモはIE9+を含む、モダンブラウザで... 続きを読む

[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のデモ デモは... 続きを読む

[JS]脚注をデスクトップ・タブレット・スマフォそれぞれで最適に表示するスクリプト -sidenotes | コリス

2013/11/19 21 users コリス ブッダ 脚注 jQuery スクリプト

デスクトップ時はすぐ横に、タブレットではすぐ下に、スマフォではフッタにまとめて脚注を表示するjQueryのプラグインを紹介します。 sidenotes sidenotes- GitHub sidenotesのデモ sidenotesの使い方 sidenotesのデモ デモでは脚注が、デスクトップ、タブレット、スマフォなど表示サイズに合わせて最適に表示されます。 デモページ：幅1,200pxで表示 ... 続きを読む

[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のデモ デモはスクリプトのページに大きく掲... 続きを読む

[JS]紹介せずにはいられなかったｗ、料理画像を出来たてほやほやのおいしそうに見せるスクリプト -Audero Smoke Effect | コリス

2013/07/21 19 users コリス jQuery スクリプト アニメーション プラグイン

ページ上の画像をはじめ、あらゆる要素からアニメーションでほわわ〜んとしたあの煙をだすjQueryのプラグインを紹介します。 Audero Smoke Effect -GitHub Audero Smoke Effectのデモ Audero Smoke Effectの使い方 Audero Smoke Effectのデモ デモでは、あの煙が4種類あります。 IE6+をはじめ、ほとんどのブラウザに対応し... 続きを読む