タグ 超軽量スクリプト
新着順 10 users 50 users 100 users 500 users 1000 users[JS]jQueryも外部CSSも不要！レスポンシブ対応サイトを作成する超軽量のスクリプト -skel.js | コリス
2013/05/22
491 users
jQuery
コリス
スタンドアローン
RESET
グリッド
スタンドアローンで動作する19KBの超軽量スクリプト。 さまざまなレイアウトに対応できるグリッド。 表示サイズごとのブレイクポイントの設定も簡単。 resetやbox-modelなどの有用なCSSのショートカットを用意。 プラグイン機能も備えているので、拡張にも対応。 skel.jsのデモ デモはシンプルな構成のページが表示が用意されています。 まずはデスクトップサイズとして、幅1200pxで表示... 続きを読む
[JS]スクロールを楽しくするパララックスを簡単に実装できる超軽量スクリプト -skrollr | コリス
2012/05/06
366 users
パララックス
skrollr
コリス
head
href
skrollrのデモ：ウェブページ skrollrの使い方 skrollrはHTML5+CSS3で実装します。 基本書式 skrollrを使用する際の基本書式は下記のようになります。 「skrollr.css」はskrollrを使用する際のCSSの基本セットが記述されています。 <!DOCTYPE html> <html> <head> <title>タイトル</title> <link href... 続きを読む
Appleのようなスクロールに連動したエフェクトもこれなら簡単に実装できる1KBの超軽量スクリプト -ScrollOut | コリス
2018/09/27
343 users
コリス
ビューポート
エフェクト
スクロール
CSS
スクロールするとコンテンツをふわりと表示させたり、追従するように表示させたり、ビューポートに表示されてない画像をLazyLoadさせたり、そういえば今回のApple Watchでも面白いスクロールエフェクトが採用されていますね。 スクロールによる変化を検出し、それに合わせてCSSのさまざまなエフェクトを簡単に与えること... 続きを読む
[JS]JS/CSSの管理、ユーザー環境の検出など便利な機能がつまった超軽量スクリプト -Head JS | コリス
2010/12/01
309 users
コリス
Usage
CSS
検出
head
複数のJSファイルの管理、CSSのサポートが異なるブラウザへの対応、ブラウザとバージョンの自動検出、スクリーンサイズの自動検出など、headで制御したい便利な機能がつまった超軽量（2.3KB）スクリプトを紹介します。 下記に、Head JSでできることを簡単に説明します。 詳しい使い方は下記ページで解説されています。 Usage: Head JS 外部JSファイルの読み込み JavaScriptの... 続きを読む
[JS]ページのデザインに影響を与えないパーフェクトなスクロールバーの超軽量スクリプト -Perfect Scrollbar | コリス
2013/01/29
306 users
スクロールバー
jQuery
GitHub
コリス
プラグイン
大きいコンテンツをクリップして配置する際に添えるスクロールバーを実装する3KBと超軽量のjQueryのプラグインを紹介します。 Perfect Scrollbar Perfect Scrollbar -GitHub 何をもってパーフェクトなのか Perfect Scrollbarのデモ Perfect Scrollbarの使い方 何をもってパーフェクトなのか このスクロールバーにパーフェクトとつけ... 続きを読む
[JS]多彩なアニメーションが実装できる2.3KBの超軽量スクリプト -jsMorph | コリス
2011/10/27
285 users
コリス
script
text
type
script src
jsMorphの実装 外部ファイル 当スクリプトを外部ファイルとして指定します。 <script src="js/jsMorph_min.js" type="text/javascript"></script> JavaScript jsMorphの基本書式です。 var myMorph = jsMorph( Object obj, // HTML element, Array of elemen... 続きを読む
どんどん簡単になっていく！最近見かけるアニメーションを伴ったさまざまなUIが実装できるスクリプト -LayerJS | コリス
2018/05/18
250 users
モーダル
コリス
アコーディオン
パララックスエフェクト
ほか
アイコンをクリック・タップすると横からスライドして表示されるナビゲーション、サムネイルをタップするとズームして次のコンテンツを表示、今までとは異なるうるさくないパララックスエフェクト、ほかにもスライダーやアコーディオンやモーダルなど。 最近のWebページやスマホアプリでよく見かけるアニメーションを伴ったさまざまなUIが簡単に実装できる超軽量スクリプトを紹介します。 他のスクリプトやスタイルシートに... 続きを読む
[JS]Lightboxの進化形！クリックでもタップでも快適動作の画像を拡大表示させる超軽量スクリプト -Intense Images | コリス
2014/07/08
218 users
lightbox
デスクト
コリス
スクリプト
単体
デスクトップのクリック操作、スマフォ・タブレットのタップ操作でも快適に、画像を拡大表示させる超軽量（7.8KB）のスクリプトを紹介します。 jQueryなど他のスクリプトは不要で、単体で動作します。 Intense Images Intense Images -GitHub Intense Imagesのデモ Intense Imagesの使い方 Intense Imagesのデモ デモはデスクト... 続きを読む
ウェブページ上にツイートを表示するシンプルで軽量なJavaScript『Chirp.js』 - K'conf
2012/08/22
211 users
K'conf
ウェブページ上
ダウンロー
Twitter
単体
Chirp.jsはウェブページ上にTwitterのタイムラインを表示するためのJavaScript。jQueryなどのライブラリに依存しない単体の超軽量スクリプトで、カスタマイズ性が高く設置も超簡単という、この手のスクリプトとしては非常に優秀なシロモノです。 先ずはスクリプトをダウンロードしましょう。自分で自由に値段を付けて『Buy it!』をクリック。もちろん『0』を入力すればフリーでダウンロー... 続きを読む
[JS]スタイルシート初心者にも優しい！要素を天地左右中央に配置できる簡単超軽量スクリプト -Midway.js | コリス
2013/06/03
209 users
コリス
矩形
スクリプト
天地左右
デモ
デスクトップやスマフォ・タブレットのレスポンシブ対応で、画像やテキストなどを天地左右の中央に簡単に配置できる超軽量（1KB）のスクリプトを紹介します。 作業は、HTMLに2つ追加するだけです。 Midway.js Midway.jsのデモ Midway.jsの使い方 Midway.jsのデモ 天地左右中央配置は表示サイズを変更しても、変わらずに天地左右中央配置になります。 デモは、ブルーの矩形の中... 続きを読む
[JS]高さの異なるパネルをレンガ状に配置する機能最小限・実用性重視の超軽量スクリプト -waterfall | コリス
2013/06/25
180 users
GitHub
Waterfall
Zepto
コリス
デモ
div要素などで配置した高さの異なるパネルをレンガ状に一定の隙間で配置するjQuery兼Zeptoのプラグインを紹介します。 左のサイドバーは適用なし、右だけレンガ状にできます。 waterfall waterfall -GitHub そういえば最近、デモにzeptoの方を使ってるプラグインが増えてきましたね。 waterfallのデモ waterfallの使い方 waterfallのデモ スクリ... 続きを読む
[JS]ありそうでなかった！スクロールエフェクトのベースになるさまざまな値を取得するシンプルな超軽量スクリプト -roll.js | コリス
2015/11/19
163 users
エフェクト
スクロール
スクリプト
しん
ポジション
縦長ページのスクロールを利用したエフェクトに必要なさまざまな値、スクロール量、ポジション、ページネーションなどを正確に取得することに特化された超軽量（3kb gzip）のスクリプトを紹介します。 作者様曰く、これ系のシン...記事の続きを読む 続きを読む
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]ページの背景に、美しい幾何学状のアニメーションを簡単に実装できる超軽量スクリプト -particles.js | コリス
2014/11/14
121 users
コリス
Demo
canvas
Step
Body
最近見かけるようになった背景にCanvasで描いた粒子でできたような幾何学状のアニメーションを簡単に実装できる超軽量スクリプトを紹介します。 ↓は静止キャプチャですが、優美なアニメーションで動きます。 Demo: Elegant particles.jsの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <body> ... コンテンツ ... <script s... 続きを読む
[JS]IE6にも対応、簡単設置のカスタマイズも容易なアコーディオンのスクリプト -Easy Accordion | コリス
2010/09/14
118 users
コリス
アコーディオン
アクセシブル
スクリプト
jQuery
テキストや画像、div要素などが配置されたパネルをアニメーションでスライドさせるアコーディオンを実装するjQueryのプラグインを紹介します。 アクセシブルで初期表示に任意のパネルを選択できるなど、高性能な超軽量スクリプトなので、アコーディオンを導入する方は是非検討してみてはいかがでしょうか？ Easy Accordionの主な特長 IE6を含め、クロスブラウザ対応。 スムースなアニメーションを伴... 続きを読む
[JS]動画をブラウザいっぱいや指定サイズに背景として配置できる超軽量スクリプト -CoverVid | コリス
2014/11/10
110 users
WebM
コリス
jquery.js
Body
Step
.mp4, .webm などの動画をブラウザいっぱいやセクションの背景として配置できるjQueryの超軽量（800bytes）プラグインを紹介します。 デモページ 単に要素内の背景として表示しているため、デモのようにスクロールエフェクトと組み合わせることも簡単です。 CoverVidの使い方 Step 1: 外部ファイル 当スクリプトとjquery.jsを外部ファイルとして記述します。 <body... 続きを読む
今までにない快適動作！サイドバーを⬆⬇スクロールに合わせてぴたっとくっつけるスクリプト -Sticky Sidebar | コリス
2017/10/16
99 users
コリス
ビューポート
jQuery
スクロール
スクリプト
サイドバーをスクロールに合わせて、ぴたっとくっつける快適に動作する超軽量スクリプトを紹介します。 コンテンツが長い・短い場合はもちろん、サイドバーが長くてビューポートをはみ出す場合にも期待通り完璧に対応します。スクリプトは単体で動作し、jQueryのプラグインとして動作させることも可能です。 スクロール時にすべてのサイズを計算するのではなく、必要なサイズだけを再計算。 スクロール時のラグやジャンク... 続きを読む
便利なのが登場！スマホにもスクロール時に滑らかなアニメーションを適用できる超軽量スクリプト -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 ... 続きを読む
[JS]ボタンがパネルに、パネルがモーダルウインドウにアニメーションで変形する超軽量スクリプト -cta.js | コリス
2015/04/21
86 users
コリス
モーダルウインドウ
トリガー
スクリプト
アクション
最近のWebページで人気があるのは、ビジュアルの連続性。 パネルをクリックすると、それが拡大してモーダルウインドウになり、ボタンをクリックすると、それが変形してパネルになるなど、ユーザーのアクションをトリガーに要素が別の要素にアニメーションで表示される超軽量（1.2KB）スクリプトを紹介します。 モーダルウインドウとサイドバーのデモ コマを落としているので分かりにくいですが、ボタンをクリックすると... 続きを読む
[JS]タブの機能性のみを追求したフレキシブルな超軽量スクリプト -EasyTabs | コリス
2011/03/31
86 users
jQuery
コリス
フレンドリー
CSS
タブ
スムーズなアニメーションでタブを切り替え、各タブコンテンツの#リンクにも対応した、タブの機能性のみを追求したjQueryのプラグインを紹介します。EasyTabsの主な特徴タブの切り替え時にはスムーズなアニメーションが可能外観はCSSで簡単にカスタマイズ可能ブラウザのバックボタンとフォワードボタンに対応各タブは#リンクが有効でブックマークが可能（SEOにフレンドリー）タブは指定された時間で自動切り... 続きを読む
[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]要素がビューポートや指定した範囲に表示されたか判定する超軽量スクリプト -Emergence.js | コリス
2017/11/09
66 users
ビューポート
コリス
スクリプト
アニメーション
超軽量
ページをスクロールして、指定した要素がビューポートに表示されたかを判定し、アニメーションなどを適用できる超軽量のスクリプトを紹介します。 ビューポートだけでなく、範囲を指定することもできるので、かなり面白いと思います。 ...記事の続きを読む 続きを読む
Web制作者は要チェック！モーダルダイアログをアクセシブルに実装する超軽量スクリプト -Micromodal.js | コリス
2017/10/10
66 users
アクセシブル
モーダルダイアログ
モーダル
コリス
ライブラリ
ちょうどいいモーダルってなかなか見つからないんだよな、と探している人は要チェックです。シンプルで操作性もよく、アクセシブルに実装する超軽量の単体で動作するJavaScriptのライブラリを紹介します。 WAI-ARIAガイドライン に準拠したモーダルダイアログを実装。 1.9kbの超軽量のJavaScriptライブラリ。 aria属性でモーダルの開閉を切り替える。 オーバーレイをクリックすると、モ... 続きを読む
遅延読み込み、無限スクロールなど、要素と境界の交差を非同期で検出する1Kbの超軽量スクリプト -Bounds.js | コリス
2019/07/04
65 users
検出
軽量スクリプト
依存
パフォーマンス
コリス
画像の遅延読み込みや無限スクロールを実装する際、ページ上に境界を定義し、その境界に要素が入ったかどうか判定して実行します。要素と境界の交差を非同期に検出し、パフォーマンスを改善する1Kbの軽量スクリプトを紹介します。 要素が境界に1px交差した、全部が入ったなどを正確に検出。他のJavaScriptへの依存はなく... 続きを読む
[JS]任意のキーを組みあせて、イベントを設定できる超軽量スクリプト -jwerty | コリス
2011/10/11
59 users
コリス
コナミコマンド
jQuery
エレメント
キー
コナミコマンド（上上下下左右左右BA）など任意のキー操作を組みあせて、エレメントやイベントを設定できる超軽量(1.5kb)のスクリプトを紹介します。 jwertyはjQueryなど他のスクリプトに依存しないで動作するスクリプトで、minified版で1.5kbと超軽量です。 ※jQueryと一緒に設置することはできます。 jwertyの使い方 使い方は簡単で、外部ファイルとして当スクリプトを指定し... 続きを読む