スクロール時にちょっとしたアニメーションを加えたいときに使えるJSライブラリ「ScrollReveal」 | Rriver

2018/03/14 28 users Rriver ScrollReveal JSライブラリ 邪魔

シンプルなスクロールアニメーションを実装したいときに使えそうなライブラリを見つけたのでご紹介します。「 ScrollReveal 」というやつです。 無意味にたくさん動くアニメーションはUIやユーザの情報消費の邪魔をするので好きではないですが、単調なページをより魅力的に見せるための「気の利いた」アニメーションならいいですよね。 ScrollRevealのいいところ 3.3KB（minified /... 続きを読む

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

2018/02/16 55 users Normalize.css コリス 2KB サポート リリース

利用している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]使い勝手がいい、文字を一つずつタイプライターのようにアニメーションで表示する軽量スクリプト -iTyped.js | コリス

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

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

たった3KBのコードで3DCGモデルが歌って踊ってアングルも操作できる！ jQueryベースのライブラリでMMDデータを活用したWebGLコンテンツを作ろう （1/2）：CodeZine

2014/05/29 65 users CodeZine jQueryベース ライブラリ アングル

本連載では、jQuery＋three.jsを実現したWebGLライブラリ「jThree（ジェイスリー）」について、MMDプラグインを利用したコンテンツのコーディング例を紹介します。連載初回となる今回は、導入編として、jThreeが提供する機能の概要を説明するとともにコーディング手順を紹介します。さらにCanvasを自動生成し、マウスで動かせる立方体を描画してみて、シンプルな記述だけでコンテンツが作... 続きを読む

[JS]デモがめちゃ楽しい！jQuery不要でスクロールにあわせて要素をアニメーションで表示するスクリプト -WOW.js | コリス

2014/02/11 181 users コリス ビューポート jQuery不要 スクロール スクリプト

ページを表示した時やスクロールした時など、ページ上の要素がビューポートに表示された時に各要素にさまざまなアニメーションをセットする超軽量（3KB）スクリプトを紹介します。 上から左から右からスライドさせたり、タイミングをずらして順番に表示したり、さまざまな設定を簡単に実装できます。 WOW.js WOW.js -GitHub WOW.jsのデモ WOW.jsの使い方 WOW.jsのデモ デモでは上... 続きを読む

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

2013/01/29 306 users スクロールバー jQuery GitHub コリス プラグイン

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

今流行のArctic.jsと、enchant.jsの比較 | Geisha Tokyo Engineers' Blog

2012/01/26 61 users Arctic.js enchant.js 流行 enchan

圧縮後のファイルサイズはenchant.jsのほうが3kbほど少ないですね。 どちらもjs上に継承などを行う擬似クラスを作るためのClass要素があったり、スマートフォン/PC両方で使えるようにtouch系イベントとmouseDown/Move系イベントを判定したり、fps(フレーム数）を設定してフレーム毎のイベントを設定するなどしています。 後発だけあって、Arctic.jsのほうはenchan... 続きを読む

ページ内に自動でビジュアル付きのスムーズスクロールを実装する軽量なjQueryプラグインSimple Elements Mapper - かちびと. net

2011/11/24 30 users Simp ビジュ スムーズスクロール スクロール 衝動

珍しかったので衝動でメモ。ページ内 に自動でビジュアル付きのスクロール を実装してくれるjQueryプラグイン・ Simple Elements Mapperです。ビジュ アル化したい要素や色なども選択可能 でスクリプト自体も軽量です。 たまに見かけるスクロールですね。指定した要素をビジュアル化することで概ね何があるかを把握してもらえます。またライブラリ自体も3kbと軽量でシンプルです。 Simp... 続きを読む

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

2010/12/01 309 users コリス Usage CSS 検出 head

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

【レビュー】わずか3KB コードも1行でイカス! エフェクト - bytefx (1) bytefx (MYCOMジャーナル)

2006/09/28 159 users MYCOMジャーナル イカス エフェクト クロスブラウザ 1行

JavaScriptで開発され、クロスブラウザで動作するライトウェイトエフェクトライブラリに「bytefx」がある。Andrea Giammarchi氏によって開発されているライブラリで、動作があげられているWebブラウザはInternet Explorer、Safari、FireFox、Opera、Konquerorなど。 bytefxはMIT Style Licenseのもとで公開されているオ... 続きを読む