はてブログ

はてなブックマーク新着エントリーの過去ログサイトです。



タグ 2KB

新着順 人気順 5 users 10 users 50 users 100 users 500 users 1000 users
 
(1 - 15 / 15件)
 

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

2019/03/20 このエントリーをはてなブックマークに追加 96 users Instapaper Pocket Tweet Facebook Share Evernote Clip コリス 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 Instapaper Pocket Tweet Facebook Share Evernote Clip コリス スクロール スクロールアニメーション アニメーション

スクロールに連動して、ページ上の要素をアニメーションで表示するライブラリはいくつかあります。その中でもかなりの超軽量で、他スクリプトへの依存が一切ないスクロールアニメーションのライブラリを紹介します。 しかも実装は超簡単。手間がかかりそうと思っていた人は、ぜひお試しを。 Sal.js Sal.js -GitHub Sal.j... 続きを読む

normalize.css 8.0.0がリリース！古いブラウザはサポート対象外になり、大幅に軽量化 | コリス

2018/02/16 このエントリーをはてなブックマークに追加 55 users Instapaper Pocket Tweet Facebook Share Evernote Clip 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]シンプルで超軽量なのがいい！レスポンシブ対応のカード型レイアウトを簡単に実装できるスクリプト -minigrid | コリス

2015/08/03 このエントリーをはてなブックマークに追加 338 users Instapaper Pocket Tweet Facebook Share Evernote Clip jQuery コリス Body Step スクリプト

レスポンシブ対応のカード型レイアウトを簡単に実装できる、jQueryなどの他スクリプトに依存しないシンプルで超軽量（2KB）のスクリプトを紹介します。 デモのアニメーション minigridの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <body> ... コンテンツ ... <script src="http://henriquea.github.io/m... 続きを読む

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

2015/04/21 このエントリーをはてなブックマークに追加 86 users Instapaper Pocket Tweet Facebook Share Evernote Clip コリス モーダルウインドウ トリガー スクリプト アクション

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

[JS]これはスゴイ！人の声でウェブページをコントールできるようにするスクリプト -annyang! | コリス

2013/09/12 このエントリーをはてなブックマークに追加 61 users Instapaper Pocket Tweet Facebook Share Evernote Clip Flickr コリス インタラクション エレメント Hello

ユーザーの声をトリガーにしてウェブページのさまざまなインタラクションを実行できるスクリプトを紹介します。マイクなどで「Hello!」と話すとメッセージを表示したり、ネコの画像をFlickrから呼び出したり、エレメントをアニメーションで表示することもできます。 jQueryなど他のスクリプトは必要なく、しかも超軽量の2KB！ いろいろな可能性が広がるスクリプトですね。 annyang! annyan... 続きを読む

[JS]Google Analyticsを使ったABテストが簡単に実装できるスクリプト -easyAB | コリス

2013/07/18 このエントリーをはてなブックマークに追加 90 users Instapaper Pocket Tweet Facebook Share Evernote Clip jQuery Zepto コリス スクリプト ABテスト

ランディングページやバナーなどで、クリックされるテキストはどっちだろう？ カラーを変えるとクリック率があがる？ など、どちらがより効果的か検証することができるABテストを簡単に実装できるjQuery（Zeptoにも対応）の超軽量（2KB）プラグインを紹介します。 easyAB easyAB -GitHub easyABのデモ easyABの使い方 easyABのデモ ABテストをページ上で、実際に... 続きを読む

[JS]Responsiveデザイン用のスタイルシートファイルのロードを最適化するスクリプト -eCSSential | コリス

2012/06/11 このエントリーをはてなブックマークに追加 60 users Instapaper Pocket Tweet Facebook Share Evernote Clip コリス ローディング スクリプト 優先順位 ウェブサイト

Responsiveデザイン用に用意した複数のスタイルシートファイルのロードを最適化する超軽量（2KB）のスクリプトを紹介します。 スタイルシートファイルのロードの注意点 eCSSentialとは eCSSentialの使い方 スタイルシートファイルのロードの注意点 スタイルシートファイルのローディングの最適化、あるいは優先順位をつける方法は非常に難しいです。ウェブサイトがクリーンなロードをするた... 続きを読む

タップやピンチなど、タッチデバイス特有のイベントをサポートする2KBの軽量jQueryプラグイン・Hammer.js - かちびと.net

2012/03/26 このエントリーをはてなブックマークに追加 58 users Instapaper Pocket Tweet Facebook Share Evernote Clip ピンチ タップ タッチデバイス net ダブルタップ

タップ、ダブルタップ、ピンチや 長押しなど、タッチデバイス特有 のイベントをサポートしてくれる JSライブラリ・Hammer.jsのご紹介。 2KBと軽量なのでいつか使うと思っ て記事にしておきます。 jQuery依存みたいです。 ある世代にはなつかしいと思う方がモデルとして登場してます。 Hammer.js サポートしてるイベントはタップ、ダブルタップ、ピンチ、ドラッグ、長押しの5イベント。 動... 続きを読む

たった2KBで動作するスマホ用マルチタッチジェスチャーライブラリ「Hammer.js」:phpspot開発日誌

2012/03/26 このエントリーをはてなブックマークに追加 80 users Instapaper Pocket Tweet Facebook Share Evernote Clip Hammer.js phpspot開発日誌 ダブルタップ

Hammer.js たった2KBで動作するスマホ用マルチタッチジェスチャーライブラリ「Hammer.js」。 タップ、ダブルタップ、ホールド、ドラッグ、トランスフォームといった処理を一手に扱えるようになるライブラリです スマホだけでなく、かなりのブラウザにも対応 使い方は、まずHammerオブジェクトのインスタンスを初期化します。 あとはイベントハンドラを ontap といった形で記述していくだけ... 続きを読む

画像にマウスホバーするとズームする拡大鏡っぽいやつを簡単に実装できる2KBの軽量jQueryプラグイン・loupe - かちびと.net

2012/03/21 このエントリーをはてなブックマークに追加 86 users Instapaper Pocket Tweet Facebook Share Evernote Clip マウス net ルーベ ライブラリ 画像

結構良かったのでご紹介。ECサイトとか で見かける、マウス乗せると画像が拡大 するやつです。拡大鏡とか言えばいいん でしょうか？ニーズはそこそこありそう ですし、かなり軽量で導入も簡単なので 覚えておくと工数減らせるかもですね。 いわゆるルーペ的なものを作れるライブラリで、プラグイン名もまんま「ルーペ」です。2KBとかなり軽量で、圧縮すると1KBちょっと。導入するとクライアントさんもユーザーさんも... 続きを読む

背景いっぱいに画像を表示、スライドショー化にも対応した軽量なjQueryプラグイン・BACKSTRETCH - かちびと.net

2012/03/11 このエントリーをはてなブックマークに追加 172 users Instapaper Pocket Tweet Facebook Share Evernote Clip net 背景 スライドショー化 画像 okok

okok同じようなの沢山あるのですが、 軽量って言葉に弱い。背景一杯 に画像を表示、スライドショー 化も可能なjQueryプラグインで す。圧縮版なら2KBほどですの で導入しやすいですね。 背景一杯に表示出来るやつでスライドショーにも対応で軽量です。圧縮して2KBくらい。しないで5KBくらいです。 BACKSTRETCH 似たようなのは一杯あるので他にも探してみてください。個人的にはこれはカスタ... 続きを読む

コンテンツをユニークなアニメーションで入れ替える2KBの軽量jQueryプラグイン・MobilyNotes - かちびと.net

2011/03/04 このエントリーをはてなブックマークに追加 61 users Instapaper Pocket Tweet Facebook Share Evernote Clip アニメーション エフェクト net コンテンツ ベース

コンテンツをユニークなアニメーション で入れ替える軽量なjQueryプラグイン MobilyNotesのご紹介です。IE6や7 でも問題なく動作してくれます。省ス ペースにコンテンツをまとめられるので なかなか使い勝手もいいのでは。 ファイルサイズもたった2KBと大変軽量です。MobilyNotes紙で見ているかのように表現されたエフェクトがなかなかユニークです。画像やdiv要素ごとも可能です。ま... 続きを読む

Google MapsをjQueryから扱えるようにする、たった2KBのプラグイン『gMap』 - IDEA*IDEA ～ 百式管理人のライフハックブログ

2010/02/05 このエントリーをはてなブックマークに追加 453 users Instapaper Pocket Tweet Facebook Share Evernote Clip IDEA about エントリー プラグイン ダウンロード

以前にも似たようなものを紹介しましたが、こちらも使いやすそうなのでエントリー。jQueryからGoogle Mapsを扱えるようにしたものですね。 バルーンやらアイコンやらをカスタマイズできるのが良いですね。 ↑ マークアップもわかりやすいっす。 ダウンロード＆詳細は以下からどうぞ。 » gMap – Google Maps Plugin For jQuery | About 続きを読む

[JS]超軽量で設置も簡単な、透過PNGをIE6で表示するスクリプト -Unit PNG Fix | コリス

2008/07/09 このエントリーをはてなブックマークに追加 337 users Instapaper Pocket Tweet Facebook Share Evernote Clip fix コリス 透過PNG スクリプト 透過PNG画像

Unit Interactiveのエントリーから、透過PNG画像をIE6で表示する、超軽量(2KB)の設置も簡単なスクリプトを紹介します。 Unit PNG Fix 透過PNGの表示は普通の画像や背景画像に対応しており、HTMLファイルに外部スクリプトとして指定するだけ適応されます。 スクリプトの設置には1×1の透明GIF画像が必要で、ファイル名・パスはスクリプトの1行目を変更することで自由に設定... 続きを読む

 
(1 - 15 / 15件)