地味に便利！ダミー画像をSVGで生成するスクリプト、ローカルでもオンライン環境でも利用できる -holder.js | コリス

2020/04/08 12 users コリス SVG Holder.js スクリプト ダミー画像

ダミー画像を作成するのは面倒ですよね。ローカル環境でもオンライン環境でもダミー画像を簡単に生成できる軽量スクリプトを紹介します。 画像を用意する必要はありません。 簡単なコードで、SVGのダミー画像を利用できます。サイズ・カラーは自由にカスタマイズでき、文字入力やダミー画像用のクロス線にも対応していま... 続きを読む

Webページやスマホアプリにパノラマ画像のコンテンツを簡単に実装できる軽量スクリプト -Panolens.js | コリス

2020/03/17 13 users パノラマ動画 コリス ブラウザ上 360度 スマホアプリ

360度のパノラマ画像をブラウザ上で表示できる、軽量スクリプトを紹介します。 パノラマ画像を見るだけでなく、パノラマ動画、リンクコンテンツ、物語コンテンツなど、インタラクティブなさまざまなコンテンツを実装できます。 Panolens.js Panolens.js -GitHub Panolens.jsの特徴 Panolens.jsのデモ Panolens.jsの使い... 続きを読む

遅延読み込み、無限スクロールなど、要素と境界の交差を非同期で検出する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]Webアプリやページのツアーガイドを簡単に加えることができる軽量スクリプト -Shepherd | コリス

2018/07/09 40 users コリス カスタマイズ バージョン 既存ページ ツアーガイド

Webアプリやページにツアーガイドを簡単に加えることができる軽量スクリプトを紹介します。以前に紹介した時から、v.2に大きくバージョンアップされました。 既存ページに加えるのも簡単で、柔軟なカスタマイズにも対応しています。 Shepherd Shepherd -GitHub Shepherdのデモ Shepherdの使い方 Shepherdのデモ デモでは... 続きを読む

スクロール時にパララックス効果を加えられる軽量スクリプト「ScrollReveal」 | TechMemo

2018/05/15 8 users jQuery TechMemo ScrollReveal

ScrollRevealは、要素が可視範囲に入った時に、アニメーションさせながら要素を表示させることができるスクリプトです。jQueryや他のCSSに依存せず、ScrollReveal単体で動作します。また、サイズも軽量でわずか8.8KBしかありません。 動きについては、以下デモサイトでご確認いただけます。 デモページを見る 今回は、このScrollRevealを使ってパララックス効果を加える方法... 続きを読む

[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]ツールチップの実装に迷った時に！依存なしで、さまざまなツールチップを実装できる軽量スクリプト -Tippy.js | コリス

2018/03/01 39 users デモ アニメーション 形状 タッチ操作 コリス

シンプルなツールチップをはじめ、表示方向の変更、形状の変更、アニメーションの変更、ホバー・フォーカス・クリック・タッチ操作に対応したツールチップを簡単に実装できる軽量スクリプトを紹介します。 Tippy.js Tippy.js -GitHub Tippy.jsのデモ Tippy.jsの使い方 Tippy.jsのデモ Tippy.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]ページにちょっとしたイースターエッグを仕込むことができるスクリプト -Overscroll | コリス

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

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

[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... 続きを読む