遅延読み込み、無限スクロールなど、要素と境界の交差を非同期で検出する1Kbの超軽量スクリプト -Bounds.js | コリス

2019/07/04 65 users 検出 軽量スクリプト 依存 パフォーマンス コリス

画像の遅延読み込みや無限スクロールを実装する際、ページ上に境界を定義し、その境界に要素が入ったかどうか判定して実行します。要素と境界の交差を非同期に検出し、パフォーマンスを改善する1Kbの軽量スクリプトを紹介します。 要素が境界に1px交差した、全部が入ったなどを正確に検出。他のJavaScriptへの依存はなく... 続きを読む

便利なのが登場！スマホにもスクロール時に滑らかなアニメーションを適用できる超軽量スクリプト -lax.js | コリス

2019/03/20 96 users コリス React vanilla スクリプト アニメーション

デスクトップでもスマホでもスクロールした際に、非常に滑らかで美しいアニメーションを簡単に実装できるシンプルで2Kbの超軽量JavaScriptを紹介します。 他のスクリプトへの依存は無く、ReactやVue.jsもサポートされています。 lax.js -GitHub lax.jsの特徴 lax.jsのデモ lax.jsの使い方 lax.jsの特徴 lax.jsはVanilla ... 続きを読む

スマホ対応の優れもの！クリック・タップの直前にページを先読み、高速表示する超軽量スクリプト -instant.page | コリス

2019/02/12 56 users コリス hover touchstart 優れもの 直前

ユーザーがリンクをクリックする際のhoverとタップする際のtouchstartに合わせて、クリック・タップする直前にページのHTMLをプリロードし、高速に表示するわずか1kBの超軽量スクリプトを紹介します。 ページに外部スクリプトを1つ加えるだけの簡単実装です。 instant.page instant.page -GitHub instant.pageの特徴 ins... 続きを読む

Appleのようなスクロールに連動したエフェクトもこれなら簡単に実装できる1KBの超軽量スクリプト -ScrollOut | コリス

2018/09/27 343 users コリス ビューポート エフェクト スクロール CSS

スクロールするとコンテンツをふわりと表示させたり、追従するように表示させたり、ビューポートに表示されてない画像をLazyLoadさせたり、そういえば今回のApple Watchでも面白いスクロールエフェクトが採用されていますね。 スクロールによる変化を検出し、それに合わせてCSSのさまざまなエフェクトを簡単に与えること... 続きを読む

ハンバーガーメニューの実装もこれなら簡単！パネルを左右上下からスライドさせる超軽量スクリプト -Pushbar.js | コリス

2018/07/23 57 users コリス ドロワー スクリプト 実装 ハンバーガーメニュー

Webページやスマホアプリで、ドロワーのパネルを左・右・上・下からスライドさせるだけの超軽量3kBのスクリプトを紹介します。 実装もカスタマイズも超簡単で、デスクトップ・タブレット・スマホを完全にサポートしています。また...記事の続きを読む 続きを読む

[JS]実行が超高速で、簡単にDOMを操作できるJavaScriptの超軽量ライブラリ -DOMmy.js | コリス

2018/06/28 28 users コリス DOM スタンドアロン プロパティ CSS

ページ上の一つの要素や複数の要素を操作したり、要素にCSSアニメーションを適用したり、CSSの属性やプロパティの操作、要素のストレージ操作など、DOMを簡単に操作できる4kBの超軽量スクリプトを紹介します。 スタンドアロンで動作し、他のスクリプトに依存は一切ありません。 DOMmy.js DOMmy.jsの特徴 DOMmy.jsのデモ ... 続きを読む

どんどん簡単になっていく！最近見かけるアニメーションを伴ったさまざまなUIが実装できるスクリプト -LayerJS | コリス

2018/05/18 250 users モーダル コリス アコーディオン パララックスエフェクト ほか

アイコンをクリック・タップすると横からスライドして表示されるナビゲーション、サムネイルをタップするとズームして次のコンテンツを表示、今までとは異なるうるさくないパララックスエフェクト、ほかにもスライダーやアコーディオンやモーダルなど。 最近のWebページやスマホアプリでよく見かけるアニメーションを伴ったさまざまなUIが簡単に実装できる超軽量スクリプトを紹介します。 他のスクリプトやスタイルシートに... 続きを読む

[JS]一昔前と比べて、かなり簡単に！ページの機能を紹介するツアーを実装できる超軽量スクリプト -Driver | コリス

2018/03/14 51 users driver jQuery コリス スクリプト 実装

ページ上の任意の要素を目立つようにハイライトさせたり、ページの機能を紹介するツアーを実装できるスクリプトを紹介します。 一昔前までのは実装が少し面倒だったり、jQueryなど他のスクリプトに依存していましたが、ここで紹介するのは実装が非常に簡単で、超軽量の4kb！ しかも依存は一切無し！ 既存ページにもすぐに利用できると思います。 Driver -GitHub Driverの特徴 Driverのデ... 続きを読む

[JS]要素がビューポートや指定した範囲に表示されたか判定する超軽量スクリプト -Emergence.js | コリス

2017/11/09 66 users ビューポート コリス スクリプト アニメーション 超軽量

ページをスクロールして、指定した要素がビューポートに表示されたかを判定し、アニメーションなどを適用できる超軽量のスクリプトを紹介します。 ビューポートだけでなく、範囲を指定することもできるので、かなり面白いと思います。 ...記事の続きを読む 続きを読む

今までにない快適動作！サイドバーを⬆⬇スクロールに合わせてぴたっとくっつけるスクリプト -Sticky Sidebar | コリス

2017/10/16 99 users コリス ビューポート jQuery スクロール スクリプト

サイドバーをスクロールに合わせて、ぴたっとくっつける快適に動作する超軽量スクリプトを紹介します。 コンテンツが長い・短い場合はもちろん、サイドバーが長くてビューポートをはみ出す場合にも期待通り完璧に対応します。スクリプトは単体で動作し、jQueryのプラグインとして動作させることも可能です。 スクロール時にすべてのサイズを計算するのではなく、必要なサイズだけを再計算。 スクロール時のラグやジャンク... 続きを読む

Web制作者は要チェック！モーダルダイアログをアクセシブルに実装する超軽量スクリプト -Micromodal.js | コリス

2017/10/10 66 users アクセシブル モーダルダイアログ モーダル コリス ライブラリ

ちょうどいいモーダルってなかなか見つからないんだよな、と探している人は要チェックです。シンプルで操作性もよく、アクセシブルに実装する超軽量の単体で動作するJavaScriptのライブラリを紹介します。 WAI-ARIAガイドライン に準拠したモーダルダイアログを実装。 1.9kbの超軽量のJavaScriptライブラリ。 aria属性でモーダルの開閉を切り替える。 オーバーレイをクリックすると、モ... 続きを読む

[JS]これなら簡単！シンプルなHTMLで、Masonryレイアウトを実装できる超軽量スクリプト -Macy.js | コリス

2017/08/18 81 users コリス jQuery Masonryレイアウト CSS 単体

画像やカード型コンテンツをレンガ状に敷き詰めて配置する、レスポンシブ対応のMasonryレイアウトを簡単に実装できる超軽量(4kb）スクリプトを紹介します。 jQueryやCSSなど、他のファイルは一切不要で、単体で動作します。 Macy.js Macy.js -GitHub Macy.jsの特徴 Macy.jsのデモ Macy.jsの使い方 Macy.jsの特徴 4kbの超軽量のライブラリ、他の... 続きを読む

[JS]レスポンシブ対応！テキストを親コンテナに応じて、ぴったりに配置するスクリプト -Fitty | コリス

2017/08/01 47 users Webフォント コリス サイズ スクリプト 日本語

テキストを親コンテナの幅に応じて、ぴったりに配置されるようにサイズ変更する超軽量スクリプトを紹介します。 レスポンシブ対応で、日本語にもWebフォントにも対応しています。 Fitty Fitty -GitHub Fitt ...記事の続きを読む 続きを読む

jQueryの「$」やセレクタなどをサポート、jQueryの代替として利用できる超軽量スクリプト -Selector | コリス

2017/04/18 153 users selector jQuery GitHub セレクタ コリス

jQueryは確かに便利ですが、すべての機能が必要かと言われれば、そうではない人が多いと思います。 「$」やセレクタなど、jQueryの機能をサポートしたjQueryの代替として利用できる超軽量スクリプトを紹介します。 Selector -GitHub 最新のjQueryのファイルサイズは、下記の通り。 jquery-3.2.1.js 270 KB jquery-3.2.1.min.js 90 K... 続きを読む

[JS]ありそうでなかった！スクロールエフェクトのベースになるさまざまな値を取得するシンプルな超軽量スクリプト -roll.js | コリス

2015/11/19 163 users エフェクト スクロール スクリプト しん ポジション

縦長ページのスクロールを利用したエフェクトに必要なさまざまな値、スクロール量、ポジション、ページネーションなどを正確に取得することに特化された超軽量（3kb gzip）のスクリプトを紹介します。 作者様曰く、これ系のシン...記事の続きを読む 続きを読む

[JS]ボタンがパネルに、パネルがモーダルウインドウにアニメーションで変形する超軽量スクリプト -cta.js | コリス

2015/04/21 86 users コリス モーダルウインドウ トリガー スクリプト アクション

最近のWebページで人気があるのは、ビジュアルの連続性。 パネルをクリックすると、それが拡大してモーダルウインドウになり、ボタンをクリックすると、それが変形してパネルになるなど、ユーザーのアクションをトリガーに要素が別の要素にアニメーションで表示される超軽量（1.2KB）スクリプトを紹介します。 モーダルウインドウとサイドバーのデモ コマを落としているので分かりにくいですが、ボタンをクリックすると... 続きを読む

[JS]ページの背景に、美しい幾何学状のアニメーションを簡単に実装できる超軽量スクリプト -particles.js | コリス

2014/11/14 121 users コリス Demo canvas Step Body

最近見かけるようになった背景にCanvasで描いた粒子でできたような幾何学状のアニメーションを簡単に実装できる超軽量スクリプトを紹介します。 ↓は静止キャプチャですが、優美なアニメーションで動きます。 Demo: Elegant particles.jsの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <body> ... コンテンツ ... <script s... 続きを読む

[JS]動画をブラウザいっぱいや指定サイズに背景として配置できる超軽量スクリプト -CoverVid | コリス

2014/11/10 110 users WebM コリス jquery.js Body Step

.mp4, .webm などの動画をブラウザいっぱいやセクションの背景として配置できるjQueryの超軽量（800bytes）プラグインを紹介します。 デモページ 単に要素内の背景として表示しているため、デモのようにスクロールエフェクトと組み合わせることも簡単です。 CoverVidの使い方 Step 1: 外部ファイル 当スクリプトとjquery.jsを外部ファイルとして記述します。 <body... 続きを読む

[JS]Lightboxの進化形！クリックでもタップでも快適動作の画像を拡大表示させる超軽量スクリプト -Intense Images | コリス

2014/07/08 218 users lightbox デスクト コリス スクリプト 単体

デスクトップのクリック操作、スマフォ・タブレットのタップ操作でも快適に、画像を拡大表示させる超軽量（7.8KB）のスクリプトを紹介します。 jQueryなど他のスクリプトは不要で、単体で動作します。 Intense Images Intense Images -GitHub Intense Imagesのデモ Intense Imagesの使い方 Intense Imagesのデモ デモはデスクト... 続きを読む

[JS]高さの異なるパネルをレンガ状に配置する機能最小限・実用性重視の超軽量スクリプト -waterfall | コリス

2013/06/25 180 users GitHub Waterfall Zepto コリス デモ

div要素などで配置した高さの異なるパネルをレンガ状に一定の隙間で配置するjQuery兼Zeptoのプラグインを紹介します。 左のサイドバーは適用なし、右だけレンガ状にできます。 waterfall waterfall -GitHub そういえば最近、デモにzeptoの方を使ってるプラグインが増えてきましたね。 waterfallのデモ waterfallの使い方 waterfallのデモ スクリ... 続きを読む

[JS]スタイルシート初心者にも優しい！要素を天地左右中央に配置できる簡単超軽量スクリプト -Midway.js | コリス

2013/06/03 209 users コリス 矩形 スクリプト 天地左右 デモ

デスクトップやスマフォ・タブレットのレスポンシブ対応で、画像やテキストなどを天地左右の中央に簡単に配置できる超軽量（1KB）のスクリプトを紹介します。 作業は、HTMLに2つ追加するだけです。 Midway.js Midway.jsのデモ Midway.jsの使い方 Midway.jsのデモ 天地左右中央配置は表示サイズを変更しても、変わらずに天地左右中央配置になります。 デモは、ブルーの矩形の中... 続きを読む

[JS]jQueryも外部CSSも不要！レスポンシブ対応サイトを作成する超軽量のスクリプト -skel.js | コリス

2013/05/22 491 users jQuery コリス スタンドアローン RESET グリッド

スタンドアローンで動作する19KBの超軽量スクリプト。 さまざまなレイアウトに対応できるグリッド。 表示サイズごとのブレイクポイントの設定も簡単。 resetやbox-modelなどの有用なCSSのショートカットを用意。 プラグイン機能も備えているので、拡張にも対応。 skel.jsのデモ デモはシンプルな構成のページが表示が用意されています。 まずはデスクトップサイズとして、幅1200pxで表示... 続きを読む

[JS]ページのデザインに影響を与えないパーフェクトなスクロールバーの超軽量スクリプト -Perfect Scrollbar | コリス

2013/01/29 306 users スクロールバー jQuery GitHub コリス プラグイン

大きいコンテンツをクリップして配置する際に添えるスクロールバーを実装する3KBと超軽量のjQueryのプラグインを紹介します。 Perfect Scrollbar Perfect Scrollbar -GitHub 何をもってパーフェクトなのか Perfect Scrollbarのデモ Perfect Scrollbarの使い方 何をもってパーフェクトなのか このスクロールバーにパーフェクトとつけ... 続きを読む

[JS]実装はたった一行でOK！ページの選択した範囲を強調する超軽量スクリプト -Fokus | コリス

2012/09/24 33 users コリス canvas エクステンション 一行 スクリプト

選択した範囲を強調するために、アニメーションでページの残りを半透明なレイヤーで暗くするスクリプトを紹介します。 Chromeのエクステンションも用意されているので、自サイトだけでなく他サイトでも利用できます。 Fokus Fokus -GitHub Fokusのデモ Fokusの使い方 Fokusのデモ デモはCanvasを使用しているため、IEを除くモダンブラウザでご覧ください。 ※IE9もダメ... 続きを読む

ウェブページ上にツイートを表示するシンプルで軽量なJavaScript『Chirp.js』 - K'conf

2012/08/22 211 users K'conf ウェブページ上 ダウンロー Twitter 単体

Chirp.jsはウェブページ上にTwitterのタイムラインを表示するためのJavaScript。jQueryなどのライブラリに依存しない単体の超軽量スクリプトで、カスタマイズ性が高く設置も超簡単という、この手のスクリプトとしては非常に優秀なシロモノです。 先ずはスクリプトをダウンロードしましょう。自分で自由に値段を付けて『Buy it!』をクリック。もちろん『0』を入力すればフリーでダウンロー... 続きを読む