はてブログ

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



タグ 超軽量スクリプト

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

Appleのようなスクロールに連動したエフェクトもこれなら簡単に実装できる1KBの超軽量スクリプト -ScrollOut | コリス

2018/09/27 このエントリーをはてなブックマークに追加 343 users Instapaper Pocket Tweet Facebook Share Evernote Clip コリス ビューポート エフェクト スクロール CSS

スクロールするとコンテンツをふわりと表示させたり、追従するように表示させたり、ビューポートに表示されてない画像をLazyLoadさせたり、そういえば今回のApple Watchでも面白いスクロールエフェクトが採用されていますね。 スクロールによる変化を検出し、それに合わせてCSSのさまざまなエフェクトを簡単に与えること... 続きを読む

どんどん簡単になっていく!最近見かけるアニメーションを伴ったさまざまなUIが実装できるスクリプト -LayerJS | コリス

2018/05/18 このエントリーをはてなブックマークに追加 250 users Instapaper Pocket Tweet Facebook Share Evernote Clip モーダル コリス アコーディオン パララックスエフェクト ほか

アイコンをクリック・タップすると横からスライドして表示されるナビゲーション、サムネイルをタップするとズームして次のコンテンツを表示、今までとは異なるうるさくないパララックスエフェクト、ほかにもスライダーやアコーディオンやモーダルなど。 最近のWebページやスマホアプリでよく見かけるアニメーションを伴ったさまざまなUIが簡単に実装できる超軽量スクリプトを紹介します。 他のスクリプトやスタイルシートに... 続きを読む

jQueryの「$」やセレクタなどをサポート、jQueryの代替として利用できる超軽量スクリプト -Selector | コリス

2017/04/18 このエントリーをはてなブックマークに追加 153 users Instapaper Pocket Tweet Facebook Share Evernote Clip 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]ありそうでなかった!スクロールエフェクトのベースになるさまざまな値を取得するシンプルな超軽量スクリプト -roll.js | コリス

2015/11/19 このエントリーをはてなブックマークに追加 163 users Instapaper Pocket Tweet Facebook Share Evernote Clip エフェクト スクロール スクリプト しん ポジション

縦長ページのスクロールを利用したエフェクトに必要なさまざまな値、スクロール量、ポジション、ページネーションなどを正確に取得することに特化された超軽量(3kb gzip)のスクリプトを紹介します。 作者様曰く、これ系のシン...記事の続きを読む 続きを読む

[JS]ページの背景に、美しい幾何学状のアニメーションを簡単に実装できる超軽量スクリプト -particles.js | コリス

2014/11/14 このエントリーをはてなブックマークに追加 121 users Instapaper Pocket Tweet Facebook Share Evernote Clip コリス Demo canvas Step Body

最近見かけるようになった背景にCanvasで描いた粒子でできたような幾何学状のアニメーションを簡単に実装できる超軽量スクリプトを紹介します。 ↓は静止キャプチャですが、優美なアニメーションで動きます。 Demo: Elegant particles.jsの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <body> ... コンテンツ ... <script s... 続きを読む

[JS]動画をブラウザいっぱいや指定サイズに背景として配置できる超軽量スクリプト -CoverVid | コリス

2014/11/10 このエントリーをはてなブックマークに追加 110 users Instapaper Pocket Tweet Facebook Share Evernote Clip WebM コリス jquery.js Body Step

.mp4, .webm などの動画をブラウザいっぱいやセクションの背景として配置できるjQueryの超軽量(800bytes)プラグインを紹介します。 デモページ 単に要素内の背景として表示しているため、デモのようにスクロールエフェクトと組み合わせることも簡単です。 CoverVidの使い方 Step 1: 外部ファイル 当スクリプトとjquery.jsを外部ファイルとして記述します。 <body... 続きを読む

[JS]Lightboxの進化形!クリックでもタップでも快適動作の画像を拡大表示させる超軽量スクリプト -Intense Images | コリス

2014/07/08 このエントリーをはてなブックマークに追加 218 users Instapaper Pocket Tweet Facebook Share Evernote Clip lightbox デスクト コリス スクリプト 単体

デスクトップのクリック操作、スマフォ・タブレットのタップ操作でも快適に、画像を拡大表示させる超軽量(7.8KB)のスクリプトを紹介します。 jQueryなど他のスクリプトは不要で、単体で動作します。 Intense Images Intense Images -GitHub Intense Imagesのデモ Intense Imagesの使い方 Intense Imagesのデモ デモはデスクト... 続きを読む

[JS]高さの異なるパネルをレンガ状に配置する機能最小限・実用性重視の超軽量スクリプト -waterfall | コリス

2013/06/25 このエントリーをはてなブックマークに追加 180 users Instapaper Pocket Tweet Facebook Share Evernote Clip GitHub Waterfall Zepto コリス デモ

div要素などで配置した高さの異なるパネルをレンガ状に一定の隙間で配置するjQuery兼Zeptoのプラグインを紹介します。 左のサイドバーは適用なし、右だけレンガ状にできます。 waterfall waterfall -GitHub そういえば最近、デモにzeptoの方を使ってるプラグインが増えてきましたね。 waterfallのデモ waterfallの使い方 waterfallのデモ スクリ... 続きを読む

[JS]スタイルシート初心者にも優しい!要素を天地左右中央に配置できる簡単超軽量スクリプト -Midway.js | コリス

2013/06/03 このエントリーをはてなブックマークに追加 209 users Instapaper Pocket Tweet Facebook Share Evernote Clip コリス 矩形 スクリプト 天地左右 デモ

デスクトップやスマフォ・タブレットのレスポンシブ対応で、画像やテキストなどを天地左右の中央に簡単に配置できる超軽量(1KB)のスクリプトを紹介します。 作業は、HTMLに2つ追加するだけです。 Midway.js Midway.jsのデモ Midway.jsの使い方 Midway.jsのデモ 天地左右中央配置は表示サイズを変更しても、変わらずに天地左右中央配置になります。 デモは、ブルーの矩形の中... 続きを読む

[JS]jQueryも外部CSSも不要!レスポンシブ対応サイトを作成する超軽量のスクリプト -skel.js | コリス

2013/05/22 このエントリーをはてなブックマークに追加 491 users Instapaper Pocket Tweet Facebook Share Evernote Clip jQuery コリス スタンドアローン RESET グリッド

スタンドアローンで動作する19KBの超軽量スクリプト。 さまざまなレイアウトに対応できるグリッド。 表示サイズごとのブレイクポイントの設定も簡単。 resetやbox-modelなどの有用なCSSのショートカットを用意。 プラグイン機能も備えているので、拡張にも対応。 skel.jsのデモ デモはシンプルな構成のページが表示が用意されています。 まずはデスクトップサイズとして、幅1200pxで表示... 続きを読む

[JS]ページのデザインに影響を与えないパーフェクトなスクロールバーの超軽量スクリプト -Perfect Scrollbar | コリス

2013/01/29 このエントリーをはてなブックマークに追加 306 users Instapaper Pocket Tweet Facebook Share Evernote Clip スクロールバー jQuery GitHub コリス プラグイン

大きいコンテンツをクリップして配置する際に添えるスクロールバーを実装する3KBと超軽量のjQueryのプラグインを紹介します。 Perfect Scrollbar Perfect Scrollbar -GitHub 何をもってパーフェクトなのか Perfect Scrollbarのデモ Perfect Scrollbarの使い方 何をもってパーフェクトなのか このスクロールバーにパーフェクトとつけ... 続きを読む

ウェブページ上にツイートを表示するシンプルで軽量なJavaScript『Chirp.js』 - K'conf

2012/08/22 このエントリーをはてなブックマークに追加 211 users Instapaper Pocket Tweet Facebook Share Evernote Clip K'conf ウェブページ上 ダウンロー Twitter 単体

Chirp.jsはウェブページ上にTwitterのタイムラインを表示するためのJavaScript。jQueryなどのライブラリに依存しない単体の超軽量スクリプトで、カスタマイズ性が高く設置も超簡単という、この手のスクリプトとしては非常に優秀なシロモノです。 先ずはスクリプトをダウンロードしましょう。自分で自由に値段を付けて『Buy it!』をクリック。もちろん『0』を入力すればフリーでダウンロー... 続きを読む

[JS]スクロールを楽しくするパララックスを簡単に実装できる超軽量スクリプト -skrollr | コリス

2012/05/06 このエントリーをはてなブックマークに追加 366 users Instapaper Pocket Tweet Facebook Share Evernote Clip パララックス skrollr コリス head href

skrollrのデモ:ウェブページ skrollrの使い方 skrollrはHTML5+CSS3で実装します。 基本書式 skrollrを使用する際の基本書式は下記のようになります。 「skrollr.css」はskrollrを使用する際のCSSの基本セットが記述されています。 <!DOCTYPE html> <html> <head> <title>タイトル</title> <link href... 続きを読む

[JS]多彩なアニメーションが実装できる2.3KBの超軽量スクリプト -jsMorph | コリス

2011/10/27 このエントリーをはてなブックマークに追加 285 users Instapaper Pocket Tweet Facebook Share Evernote Clip コリス 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... 続きを読む

[JS]JS/CSSの管理、ユーザー環境の検出など便利な機能がつまった超軽量スクリプト -Head JS | コリス

2010/12/01 このエントリーをはてなブックマークに追加 309 users Instapaper Pocket Tweet Facebook Share Evernote Clip コリス Usage CSS 検出 head

複数のJSファイルの管理、CSSのサポートが異なるブラウザへの対応、ブラウザとバージョンの自動検出、スクリーンサイズの自動検出など、headで制御したい便利な機能がつまった超軽量(2.3KB)スクリプトを紹介します。 下記に、Head JSでできることを簡単に説明します。 詳しい使い方は下記ページで解説されています。 Usage: Head JS 外部JSファイルの読み込み JavaScriptの... 続きを読む

[JS]IE6にも対応、簡単設置のカスタマイズも容易なアコーディオンのスクリプト -Easy Accordion | コリス

2010/09/14 このエントリーをはてなブックマークに追加 118 users Instapaper Pocket Tweet Facebook Share Evernote Clip コリス アコーディオン アクセシブル スクリプト jQuery

テキストや画像、div要素などが配置されたパネルをアニメーションでスライドさせるアコーディオンを実装するjQueryのプラグインを紹介します。 アクセシブルで初期表示に任意のパネルを選択できるなど、高性能な超軽量スクリプトなので、アコーディオンを導入する方は是非検討してみてはいかがでしょうか? Easy Accordionの主な特長 IE6を含め、クロスブラウザ対応。 スムースなアニメーションを伴... 続きを読む

 
(1 - 16 / 16件)