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

2019/07/04 65 users 検出 依存 パフォーマンス コリス 1px

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

フォームのinput要素に電話番号・日付・時間・金額など、数字のフォーマットを定義できるスクリプト -Cleave.js | コリス

2019/02/27 72 users コリス Clea Reactコンポーネント input要素

クレジットカード番号・電話番号・日付・時間・金額などを入力するフォームのinput要素に、数字を区切ったり、記号文字を加えたり、入力する数字のフォーマットを簡単に定義できる軽量スクリプトを紹介します。 単体のスクリプトとしてだけでなく、Reactコンポーネント、AngularJSディレクティブでも利用できます。 Clea... 続きを読む

[JS]面白いスクリプトが登場！スマホのDeviceMotionイベントをサポートし、傾きを感知できる -Shiny | コリス

2019/01/21 50 users スクリプト グラデーション MITライセンス 単体 反射

スマホの傾きを感知し、それに合わせてグラデーションを光の反射のようにシミュレートさせる軽量スクリプトを紹介します。 スクリプトは単体で動作し、MITライセンスで利用できます。 Shiny Shiny -GitHub Sh...記事の続きを読む 続きを読む

[JS]タッチ操作にも対応した快適なスライダー・カルーセルを実装する軽量スクリプト -Glide.js | コリス

2018/04/16 51 users コリス jQuery カルーセル スライダー Glide.js

jQueryなどのスクリプトやアニメーションのCSSに依存せずに、レスポンシブ対応の快適なスライダー・カルーセルを実装する軽量のスクリプトを紹介します。 スライダーは最後を表示した際に1枚目に巻き戻し、カルーセルは最後を表示した際に巻き戻さずにそのまま1枚目を表示します。 Glide.js Glide.js -GitHub Glide.jsの特徴 Glide.jsのデモ Glide.jsの使い方 ... 続きを読む

[JS]デスクトップとスマホの両方に対応！さまざまなパララックススクロールを実装できるスクリプト -basicScroll | コリス

2018/02/21 72 users コリス CSSアニメーション 単体 パララックススクロール

Webページやスマホアプリで、ユーザーがスクロールした位置に応じてCSSアニメーションを簡単に適用できるパララックススクロールを実装する軽量スクリプトを紹介します。 単体で動作するので、非常に便利だと思います。 basicScroll basicScroll -GitHub basicScrollの特徴 basicScrollのデモ basicScrollの使い方 basicScrollの特徴 b... 続きを読む

カウントダウンやタイマーなど、時間コンテンツなら何でも任せろのシンプルな軽量スクリプト -EasyTimer.js | コリス

2018/02/05 56 users コリス ストップウォッチ タイマー スクリプト 単体

時間を表示させるカウントダウン、タイマー、ストップウォッチなどのコンテンツなら何でも任せろのシンプルな軽量スクリプトを紹介します。 単体のスクリプトとして利用でき、時間を使ったWebページを実装する際に重宝すると思います。 EasyTimer.js EasyTimer.js -GitHub EasyTimer.jsの特徴 EasyTimer.jsのデモ EasyTimer.jsの使い方 EasyT... 続きを読む

これからは今まで以上に、jQueryが必要なくなるかもしれない | コリス

2017/07/14 531 users jQuery コリス jQuery無し ライセンス 半年

3, 4年前あたりから、jQuery無しでこう記述するとか、jQueryの一部の機能を代替する軽量スクリプトなどが出始めました。 2017年も半年が過ぎ、その状況はさらに変わり始めています。 (Now More Than Ever) You Might Not Need jQuery 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 現在... 続きを読む

[JS]スマホにも対応！ページをスクロールした際、要素をアニメーションで表示する軽量スクリプト -t-scroll | コリス

2017/06/05 62 users コリス jQuery スクリプト アニメーション 単体

スマホやタブレットに対応、もちろんデスクトップにも対応、ページをスクロールした際に、要素にさまざまなアニメーションを簡単に適用できる単体で動作する軽量(4KB)のスクリプトを紹介します。 jQueryなど、他のスクリプトやスタイルシートは一切不要です。 カスタマイズ性 45種類の豊富なオプションが用意されており、初心者にも簡単、上級者には強力。 jQueryは無し ECMAScript6で実装され... 続きを読む

[JS]スマホやタブレットにも完全対応！垂直・水平方向にパララックス スクロールさせる軽量スクリプト -paroller.js | コリス

2017/05/24 60 users パララックス コリス 水平方向 タブレット スマホ

ページいっぱいの背景、コンテナいっぱいの背景、要素の背景などを垂直水平方向にパララックスさせるスクリプトを紹介します。 モバイルにも完全対応しており、全体をパララックスさせたり、カード型コンポーネントをずらしながら表示さ ...記事の続きを読む 続きを読む

[JS]使い勝手がいい、文字を一つずつタイプライターのようにアニメーションで表示する軽量スクリプト -iTyped.js | コリス

2017/01/25 67 users コリス jQuery ライブラリ スクリプト アニメーション

jQueryなど他のスクリプトは不要、しかも2.3kBの超軽量、文字をタイプライターのようにアニメーションで表示するJavaScriptのライブラリを紹介します。 iTyped.js -GitHub iTyped.jsの ...記事の続きを読む 続きを読む

[JS]アニメーションを使った快適操作がすごい！レスポンシブ対応のフリップコンテンツを実装する軽量スクリプト -jQuery Flipster | コリス

2016/01/15 162 users スクリプト 軽量 5KB コリス CSS3アニメーション

レスポンシブ対応、タッチデバイス対応、CSS3アニメーションを使った快適操作が気持ちいいさまざまなフリップコンテンツが実装できる軽量（5kb）のスクリプトを紹介します。 パタパタ、クルクル、ペラペラ、本当に気持ちよく動きます。 jQuery Flipster -GitHub jQuery Flipsterのデモ jQuery Flipsterの使い方 jQuery Flipsterのデモ 対応ブラ... 続きを読む

jQueryは無し、シンプルに必要な機能だけを実装する軽量スクリプトのまとめ | コリス

2015/09/15 331 users jQuery コリス 機能 まとめ

MiniGrid -GitHub デモページ、アニメーションのデモ レスポンシブ対応のカード型レイアウトを実装できるシンプルで超軽量なスクリプト。アニメーションでレイアウトが変更する系はこのスクリプトが圧倒的に簡単で軽量です。アニメーション無しでも利用できます。 cta.js -GitHub デモページ パネルをクリックすると、それが拡大してモーダルウインドウになり、ボタンをクリックすると、それが... 続きを読む

[JS]画像を拡大表示するLightboxの進化形、デバイスごとに異なる設定も可能な高性能な軽量スクリプト -Chocolat | コリス

2015/07/30 69 users chocolat lightbox コリス スライダー デモ

デスクトップ、タブレット、スマホのそれぞれに合わせた方法で、指定したエリアやウインドウいっぱいに画像を拡大表示したり、そのまま複数の画像を表示するスライダーにすることもできる、軽量で高性能な画像を拡大表示するスクリプトを紹介します。 スクリプトだけでなく、ページ全体やデモなども非常に面白いデザインです。 Chocolatの特徴 個人ユーザーからプロのWeb制作者まで 専門的な知識がなくても簡単に実... 続きを読む

[JS]幅広いブラウザをサポート！表示サイズに最適な画像・背景画像を表示するレスポンシブ対応の軽量スクリプト -Rimg | コリス

2015/02/13 76 users コリス DOM SVG ベクター PNG

ページが読み込まれた時にDOMを調査してimg要素を自動で探し、設定したブレイクポイントに応じて最適な画像ファイルを表示するスクリプトを紹介します。 SVGとPNGが混在しているページでも無問題、SVGはベクターなのでそのまま拡大、PNGはそのサイズ用の画像ファイルを表示する賢い仕様になっています。 Rimg -GitHub Rimgの特徴 Rimgのデモ Rimgの使い方 Rimgの特徴 100... 続きを読む

[JS]簡単で楽ちん！さまざまなタブコンテンツをシンプルなHTMLで実装できる軽量スクリプト -PWS Tabs | コリス

2015/01/26 64 users head コリス jquery.js Step タブ

デモページ: Tabs Position: Vertical Left タブを配置する場所もオプションで簡単に変更できます。 PWS Tabsの使い方 Step 1: 外部ファイル 当スクリプト・スタイルシートとjquery.jsを外部ファイルとして記述します。 <head> ... <script src="//code.jquery.com/jquery-1.11.2.min.js"></sc... 続きを読む

jQueryで1ページごとにスクロールして画面遷移させるUIを実装する方法 | BlackFlag

2014/05/27 212 users jQuery BlackFlag skrollr 画面遷 方法

以前、iPhone5sのプロダクトページがリリースした頃に 『簡単にパララックス実装可能な軽量スクリプト「skrollr」＆コンテンツごとにページスクロールするjQueryプラグイン「fullPage.js」「One Page Scroll」』と題して 1ページをフルスクリーン表示にして、画面全体をスクロールさせることで 1ページ分（1コンテンツ分）を画面遷移させるUIを実装できるjQueryプラ... 続きを読む

[JS]実装も簡単、必須入力の有無やメールアドレスのチェックなどフォームのバリデーションをおこなう軽量スクリプト -Validetta | コリス

2013/10/29 260 users jQuery コリス バリデーション スクリプト 即時

サーバー側でしかできないチェックはサーバー側に任せ、フォームに入力したデータの簡単なチェックはスクリプトで対応したいという人にぴったりなjQueryのプラグインを紹介します。 必須項目の入力漏れやメールアドレスの簡単なチェックなど、スクリプトなので即時にエラーメッセージが表示されます。 Validetta Validetta -GitHub Validettaのデモ Validettaの使い方 V... 続きを読む

[JS]jQuery無し、アニメーションを使ったスライダーを簡単に実装できる軽量スクリプト -slidr.js | コリス

2013/10/27 178 users コリス スライダー jQuery無し アニメーション

コントローラーとパンくず slidr.jsの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして</body>の上あたりに記述します。 ... <script type="text/javascript" src="/path/to/slidr.min.js"></script> </body> Step 2: HTML 各パネルはinline, inline-block, bl... 続きを読む

簡単にパララックス実装可能な軽量スクリプト「skrollr」＆コンテンツごとにページスクロールするjQueryプラグイン「fullPage.js」「One Page Scroll」 | BlackFlag

2013/10/08 179 users BlackFlag skrollr jQueryプラグイン

最近でもよく見かけるWebページ内をスクロールしてコンテンツを効果的に魅せる技法として パララックス（少々今さら感も感じますが・・・）効果に加えて最近では コンテンツ全体をフルスクリーン表示にして、 スクロールすることで1コンテンツ分が自動でスクロールされ 次画面へ遷移するさせる技法がよく見られます。 そんなＷｅｂページ内でスクロール効果を使った動作を実装する際に役立ちそうな JSスクリプト＆jQ... 続きを読む

[JS]タッチデバイス対応、古いブラウザもカバーするシンプルで快適なスライダーの軽量スクリプト -Glide.js | コリス

2013/09/06 88 users コリス jQuery スライダー Glide.js スワイプ

シンプル・軽量で、レスポンシブ対応、タッチデバイス対応、スワイプもキーボード操作にも対応したカスタマイズにも優れたOOCSSベースでマークアップされたスライダーを実装するjQueryのプラグインを紹介します。 Glide.js Glide.js -GitHub Glide.jsのデモ Glide.jsの使い方 Glide.jsのデモ デモはスマフォ・タブレットをはじめ、最新のモダンブラウザでご覧く... 続きを読む

[JS]div要素やリスト要素を折りたたんで配置するWAI-ARIA遵守のスクリプト -jQuery Collapse | コリス

2012/01/16 112 users コリス Chrom div要素 スクリプト jQuery

実装は超簡単、カスタマイズ性にも優れ、IE6にも対応、クリックで開閉する折りたたみコンテンツを設置するjQueryのプラグインを紹介します。 jQuery Collapseの特徴 jQuery Collapseのデモ jQuery Collapseの使い方 jQuery Collapseの特徴 軽量 約600バイトの軽量スクリプト。 クロスブラウザ対応 IE6+, Firefox3+, chrom... 続きを読む

[JS]ドラッグで移動も可能なモーダルウインドウを作成する軽量スクリプト -Simple Modal | コリス

2011/12/05 127 users コリス モーダルウインドウ Simple Modal 移動

アラート、コンファームだけでなく、AJAXコンテンツ、画像、動画など表示するモーダルウインドウを実装するスクリプトを紹介します。 Simple Modalの特徴 Simple Modalのデモ Simple Modalの実装 Simple Modalのダウンロード Simple Modalの特徴 モーダルウインドウを簡単に生成します。 生成したモーダルウインドウは、ドラッグ操作で移動可能です。 コ... 続きを読む

[JS]フォームのフィールドにテキストを表示する軽量スクリプト -autoclear | コリス

2011/02/28 88 users コリス jQuery color フィールド テキスト

フォームのテキストフィールドに、入力補助になるテキストを表示し、ユーザーの入力時にそのテキストを消去するjQueryのプラグインを紹介します。テキストフィールドに表示されるテキストには、class名を付与し、スタイルシートでカラーなどを設定することもできます。 デモは、「color:gray;」が指定されています。autoclearの実装HTML表示されるテキストは、title属性内のデータを利用... 続きを読む

GIGAZINE - オーバーレイ効果を作り出す軽量スクリプト「iBox」

2006/06/25 171 users GIGAZINE ログインフォーム デモ 応用 既存

クリックすると既存のページにオーバーレイ効果を施して表示されるボックスです。よくあるAJAX効果をより簡単に適用できるのがウリです。画像やログインフォームなどに応用可能。 どういう効果なのかは下記のデモを見れば分かります。アクセスしてとりあえず画像をクリックしてみましょう。 iBox Test Page http://www.ibegin.com/ibox/ibox-test.html ダウンロー... 続きを読む