タグ 2KB
人気順 10 users 50 users 100 users 500 users 1000 usersHTMLはシンプル！ 画像をホバーしたときのさまざまなエフェクトを簡単に実装できるCSSの超軽量ライブラリ -Izmir
2023/08/09
14 users
class
ライブラリ
ボーダー
オーバーレイ
テキスト
画像をホバーしたときにテキストを重ねたり、ボーダーをアニメーションさせたり、拡大表示させたり、さまざまなエフェクトを簡単に実装できるCSSの超軽量（2Kb）ライブラリを紹介します。 HTMLにclassを与える簡単実装。エフェクトは組み合わせることも可能で、オーバーレイやテキストやボーダーなどを自由に組み合わせ... 続きを読む
Moment.jsライクに使える2KBほどの軽量な日付操作ライブラリ・「Day.js」 | かちびと.net
2020/10/05
5 users
Moment.js
Day.js
net
学習コスト
ところ
Day.js Day.jsはMoment.jsライクに使える2KBほどの軽量な日付操作ライブラリです。Moment.jsとほぼ同じ使い方で同じように操作する事が出来ます。 他ライブラリにも依存せず、Moment.jsを使っている方なら学習コストもほぼ不要でファイルサイズもかなり軽量になっています。 Moment.jsにあるような痒いところに手が届く... 続きを読む
便利なのが登場！スマホにもスクロール時に滑らかなアニメーションを適用できる超軽量スクリプト -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 ... 続きを読む
これを使うとスクロールに連動したアニメーションが簡単に！わずか2KBの超軽量JavaScriptライブラリ -Sal.js | コリス
2018/09/12
210 users
コリス
スクロール
スクロールアニメーション
アニメーション
スクロールに連動して、ページ上の要素をアニメーションで表示するライブラリはいくつかあります。その中でもかなりの超軽量で、他スクリプトへの依存が一切ないスクロールアニメーションのライブラリを紹介します。 しかも実装は超簡単。手間がかかりそうと思っていた人は、ぜひお試しを。 Sal.js Sal.js -GitHub Sal.j... 続きを読む
normalize.css 8.0.0がリリース！古いブラウザはサポート対象外になり、大幅に軽量化 | コリス
2018/02/16
55 users
Normalize.css
コリス
3kb
サポート
リリース
利用しているWeb制作者も多いと思います。 normalize.cssがアップデートし、8.0.0がリリースされました。 IE9以下をはじめとする古いブラウザのサポートがなくなったので、大幅に軽量化されています。v6.0.0は2.2KB、v7.0.0は2.3KBだったのが、v8.0.0で1.8KBです。 normalize.css -GitHub normalize.css 8.0.0の変更点 2... 続きを読む
[JS]ページ内アンカーでスクロール時のアニメーションの種類やスピードが調整できる超軽量ライブラリ -MoveTo | コリス
2017/03/23
49 users
緩和
スクリプト
実装
微調整
超軽量
ページ内アンカーに移動させる時に、アニメーションでスムーズにスクロールさせるスクリプトをいろいろありますが、実装が簡単で、微調整も簡単に設定できる超軽量（2kb）のスクリプトを紹介します。 等速のアニメーション、緩和のア ...記事の続きを読む 続きを読む
[JS]シンプルで超軽量なのがいい！レスポンシブ対応のカード型レイアウトを簡単に実装できるスクリプト -minigrid | コリス
2015/08/03
338 users
jQuery
コリス
Body
Step
スクリプト
レスポンシブ対応のカード型レイアウトを簡単に実装できる、jQueryなどの他スクリプトに依存しないシンプルで超軽量（2KB）のスクリプトを紹介します。 デモのアニメーション minigridの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <body> ... コンテンツ ... <script src="http://henriquea.github.io/m... 続きを読む
[JS]ボタンがパネルに、パネルがモーダルウインドウにアニメーションで変形する超軽量スクリプト -cta.js | コリス
2015/04/21
86 users
コリス
モーダルウインドウ
トリガー
スクリプト
アクション
最近のWebページで人気があるのは、ビジュアルの連続性。 パネルをクリックすると、それが拡大してモーダルウインドウになり、ボタンをクリックすると、それが変形してパネルになるなど、ユーザーのアクションをトリガーに要素が別の要素にアニメーションで表示される超軽量（1.2KB）スクリプトを紹介します。 モーダルウインドウとサイドバーのデモ コマを落としているので分かりにくいですが、ボタンをクリックすると... 続きを読む
超軽量でカスタマイズ性の高いオートコンプリート実装「Awesomplete」:phpspot開発日誌
2015/03/24
43 users
オートコンプリート
phpspot開発日誌
実装
超軽量
超軽量でカスタマイズ性の高いオートコンプリート実装「Awesomplete」 2015年03月24日- Awesomplete: Ultra lightweight, highly customizable, simple autocomplete, by Lea Verou 超軽量でカスタマイズ性の高いオートコンプリート実装「Awesomplete」 2KBで次のようにオートコンプリートが実装で... 続きを読む
[JS]これはスゴイ！人の声でウェブページをコントールできるようにするスクリプト -annyang! | コリス
2013/09/12
61 users
Flickr
コリス
インタラクション
エレメント
Hello
ユーザーの声をトリガーにしてウェブページのさまざまなインタラクションを実行できるスクリプトを紹介します。マイクなどで「Hello!」と話すとメッセージを表示したり、ネコの画像をFlickrから呼び出したり、エレメントをアニメーションで表示することもできます。 jQueryなど他のスクリプトは必要なく、しかも超軽量の2KB！ いろいろな可能性が広がるスクリプトですね。 annyang! annyan... 続きを読む
[JS]Google Analyticsを使ったABテストが簡単に実装できるスクリプト -easyAB | コリス
2013/07/18
90 users
jQuery
Zepto
コリス
スクリプト
ABテスト
ランディングページやバナーなどで、クリックされるテキストはどっちだろう？ カラーを変えるとクリック率があがる？ など、どちらがより効果的か検証することができるABテストを簡単に実装できるjQuery（Zeptoにも対応）の超軽量（2KB）プラグインを紹介します。 easyAB easyAB -GitHub easyABのデモ easyABの使い方 easyABのデモ ABテストをページ上で、実際に... 続きを読む
分かりやすいフリーのスマホ用ジェスチャーアイコン12種類:phpspot開発日誌
2013/02/05
15 users
phpspot開発日誌
Dribbble
絵柄
関連エントリ
Dribbble - Gestures by Julian Burford 分かりやすいフリーのスマホ用ジェスチャーアイコン12種類。 抽象化されすぎておらず、良い感じのイラストで分かりやすいジェスチャーアイコンになってます 操作方法を説明する際等の１つの素材として覚えておいてもよさそう 関連エントリ リアルな絵柄で分かりやすいジェスチャーアイコン集 たった2KBで動作するスマホ用マルチタッチジェ... 続きを読む
リアルな絵柄で分かりやすいジェスチャーアイコン集:phpspot開発日誌
2012/11/02
23 users
絵柄
phpspot開発日誌
ヘルプページ
関連エントリ
Touch Gesture Icons | Mobile Tuxedo リアルな絵柄で分かりやすいジェスチャーアイコン集 次のような、イラストっぽくないリアルな感じで分かりやすいジェスチャーアイコンが配布されています 商用・非商用にかかわらずロイヤリティフリーだそう アプリのヘルプページなんかに載せてもよさそうですね 関連エントリ たった2KBで動作するスマホ用マルチタッチジェスチャーライブラリ「... 続きを読む
画面サイズに応じて画像を差し替える軽量jQueryプラグイン・jQuery Picture - かちびと.net
2012/06/15
46 users
net
画面サイズ
ブレークポイント
画像
jQuery
スマフォやタブレットなどで閲覧した 際に表示する画像を差し替える軽量な jQueryのプラグイン・jQuery Picture のご紹介。レスポンシブWebデザイン でよく問題視される画像のサイズの件 に対応するライブラリです。 設定したブレークポイントに応じて画像を切り替えるライブラリです。2KBと軽量なのが良いですね。 jQuery Picture 以下サンプルです。手抜きですみません。 js... 続きを読む
[JS]Responsiveデザイン用のスタイルシートファイルのロードを最適化するスクリプト -eCSSential | コリス
2012/06/11
60 users
コリス
ローディング
スクリプト
優先順位
ウェブサイト
Responsiveデザイン用に用意した複数のスタイルシートファイルのロードを最適化する超軽量（2KB）のスクリプトを紹介します。 スタイルシートファイルのロードの注意点 eCSSentialとは eCSSentialの使い方 スタイルシートファイルのロードの注意点 スタイルシートファイルのローディングの最適化、あるいは優先順位をつける方法は非常に難しいです。ウェブサイトがクリーンなロードをするた... 続きを読む
タップやピンチなど、タッチデバイス特有のイベントをサポートする2KBの軽量jQueryプラグイン・Hammer.js - かちびと.net
2012/03/26
58 users
ピンチ
タップ
タッチデバイス
net
ダブルタップ
タップ、ダブルタップ、ピンチや 長押しなど、タッチデバイス特有 のイベントをサポートしてくれる JSライブラリ・Hammer.jsのご紹介。 2KBと軽量なのでいつか使うと思っ て記事にしておきます。 jQuery依存みたいです。 ある世代にはなつかしいと思う方がモデルとして登場してます。 Hammer.js サポートしてるイベントはタップ、ダブルタップ、ピンチ、ドラッグ、長押しの5イベント。 動... 続きを読む
たった2KBで動作するスマホ用マルチタッチジェスチャーライブラリ「Hammer.js」:phpspot開発日誌
2012/03/26
80 users
Hammer.js
phpspot開発日誌
ダブルタップ
Hammer.js たった2KBで動作するスマホ用マルチタッチジェスチャーライブラリ「Hammer.js」。 タップ、ダブルタップ、ホールド、ドラッグ、トランスフォームといった処理を一手に扱えるようになるライブラリです スマホだけでなく、かなりのブラウザにも対応 使い方は、まずHammerオブジェクトのインスタンスを初期化します。 あとはイベントハンドラを ontap といった形で記述していくだけ... 続きを読む
画像にマウスホバーするとズームする拡大鏡っぽいやつを簡単に実装できる2KBの軽量jQueryプラグイン・loupe - かちびと.net
2012/03/21
86 users
マウス
net
ルーベ
ライブラリ
画像
結構良かったのでご紹介。ECサイトとか で見かける、マウス乗せると画像が拡大 するやつです。拡大鏡とか言えばいいん でしょうか？ニーズはそこそこありそう ですし、かなり軽量で導入も簡単なので 覚えておくと工数減らせるかもですね。 いわゆるルーペ的なものを作れるライブラリで、プラグイン名もまんま「ルーペ」です。2KBとかなり軽量で、圧縮すると1KBちょっと。導入するとクライアントさんもユーザーさんも... 続きを読む
背景いっぱいに画像を表示、スライドショー化にも対応した軽量なjQueryプラグイン・BACKSTRETCH - かちびと.net
2012/03/11
172 users
net
背景
スライドショー化
画像
okok
okok同じようなの沢山あるのですが、 軽量って言葉に弱い。背景一杯 に画像を表示、スライドショー 化も可能なjQueryプラグインで す。圧縮版なら2KBほどですの で導入しやすいですね。 背景一杯に表示出来るやつでスライドショーにも対応で軽量です。圧縮して2KBくらい。しないで5KBくらいです。 BACKSTRETCH 似たようなのは一杯あるので他にも探してみてください。個人的にはこれはカスタ... 続きを読む
コンテンツをユニークなアニメーションで入れ替える2KBの軽量jQueryプラグイン・MobilyNotes - かちびと.net
2011/03/04
61 users
アニメーション
エフェクト
net
コンテンツ
ベース
コンテンツをユニークなアニメーション で入れ替える軽量なjQueryプラグイン MobilyNotesのご紹介です。IE6や7 でも問題なく動作してくれます。省ス ペースにコンテンツをまとめられるので なかなか使い勝手もいいのでは。 ファイルサイズもたった2KBと大変軽量です。MobilyNotes紙で見ているかのように表現されたエフェクトがなかなかユニークです。画像やdiv要素ごとも可能です。ま... 続きを読む
Google MapsをjQueryから扱えるようにする、たった2KBのプラグイン『gMap』 - IDEA*IDEA ～ 百式管理人のライフハックブログ
2010/02/05
453 users
IDEA
about
エントリー
プラグイン
ダウンロード
以前にも似たようなものを紹介しましたが、こちらも使いやすそうなのでエントリー。jQueryからGoogle Mapsを扱えるようにしたものですね。 バルーンやらアイコンやらをカスタマイズできるのが良いですね。 ↑ マークアップもわかりやすいっす。 ダウンロード＆詳細は以下からどうぞ。 » gMap – Google Maps Plugin For jQuery | About 続きを読む
[JS]超軽量で設置も簡単な、透過PNGをIE6で表示するスクリプト -Unit PNG Fix | コリス
2008/07/09
337 users
fix
コリス
透過PNG
スクリプト
透過PNG画像
Unit Interactiveのエントリーから、透過PNG画像をIE6で表示する、超軽量(2KB)の設置も簡単なスクリプトを紹介します。 Unit PNG Fix 透過PNGの表示は普通の画像や背景画像に対応しており、HTMLファイルに外部スクリプトとして指定するだけ適応されます。 スクリプトの設置には1×1の透明GIF画像が必要で、ファイル名・パスはスクリプトの1行目を変更することで自由に設定... 続きを読む