縦長ページのスクロールを利用したエフェクトに必要なさまざまな値、スクロール量、ポジション、ページネーションなどを正確に取得することに特化された超軽量（3kb gzip）のスクリプトを紹介します。 作者様曰く、これ系のシンプルなライブラリがなかったから作った！とのことです。
![[JS]ありそうでなかった！スクロールエフェクトのベースになるさまざまな値を取得するシンプルな超軽量スクリプト -roll.js | コリス](https://cdn-ak-scissors.b.st-hatena.com/image/square/279eab00aef75ed8618eb3bb384b1ceba158e0b4/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201503%2F2015111901.png)
[JS]ありそうでなかった！スクロールエフェクトのベースになるさまざまな値を取得するシンプルな超軽量スクリプト -roll.js | コリス
縦長ページのスクロールを利用したエフェクトに必要なさまざまな値、スクロール量、ポジション、ページネーションなどを正確に取得することに特化された超軽量（3kb gzip）のスクリプトを紹介します。 作者様曰く、これ系のシンプルなライブラリがなかったから作った！とのことです。
Motion UI | Playground from ZURB
Motion UI is a Sass library for quickly creating CSS transitions and animations. We originally bundled this code with Foundation for Apps, but we've souped it up, made it its own library, and open sourced it ahead of the launch of Foundation for Sites 6. Getting Started Install Motion UI with Bower or npm. The package includes a CSS file with a bunch of premade transitions and animations, along wi
clipboard.js - Flashなしでも使えるクリップボード操作ライブラリ MOONGIFT
Web画面上に表示されている文字列をコピーするのは意外と面倒ですが、クリップボードの操作ができないために色々な工夫が考えられてきました。Flashを使ったものが多かったのですが、HTML5になってFlashは使われなくなってきています。 そこで代替として使ってみたいのがclipboard.jsです。Flashなしでクリップボードの操作ができるJavaScriptライブラリです。 clipboard.jsの使い方 clipboard.jsのデモです。テキストボックスの文字列をコピーします。 アイコンのクリックでコピーされました。 こちらはカットのデモ。 文字が消えてちゃんとカットされました。 こちらは表示されていない文字列をコピーします。data-clipboard-textでコピーする文字を指定しています。 clipboard.jsのタネは新しく出てきたexecCommandというAPIに
ToProgress.js
Usage 0. Import script <script src="path/to/ToProgress.min.js"></script> 1. Set options (The values below are default value) var options = { id: 'top-progress-bar', color: '#F44336', height: '2px', duration: 0.2 } 2. Get the progress bar instance var progressBar = new ToProgress(options); 3. Play it! progressBar.increase(20); API new ToProgress(options[,selector]) options id - the id of auto-creat
Popmotion: The animator's JavaScript toolbox
The animator’s JavaScript toolbox.PowerfulSupports keyframes, spring and inertia animations on numbers, colors, and complex strings.Low levelSimple, composable functions, portable to any JS environment. The library behind the library, it powers the animations in Framer Motion.StableWritten in TypeScript and enjoys over 95% test coverage.TinyThe animate function is less than 5kb, and every utility
Jets.js
How does it work? The main idea is not to affect attributes of each tag in the list while filtering. Instead apply dynamic CSS rule in only one <style> tag and browser will decide which item of list to show or hide. Since it's just CSS - Jets.js may be applied to any tag, whether it's a table or UL, OL, DIV… Search term may be set using text field, select or even programmatically. In fact, plugin
clipboard.js
Why Copying text to the clipboard shouldn't be hard. It shouldn't require dozens of steps to configure or hundreds of KBs to load. But most of all, it shouldn't depend on Flash or any bloated framework. That's why clipboard.js exists. Install You can get it on npm. npm install clipboard --save Or if you're not into package management, just download a ZIP file. Setup First, include the script locat
ライトウェイトな Spec.js としての UserAgent.js を追加。WebView の判別機能などを入れてあります。 - latest log
Spec.js の機能が増えてきたため、UserAgent 部分だけを分離した UserAgent.js を書きました。Edge への対応と WebView 判別部分などなど、多用する機能だけに絞って入れてあります。 var ua = new UserAgent(); var result = { OS: ua.OS, OS_VERSION: ua.OS_VERSION, BROWSER: ua.BROWSER, BROWSER_ENGINE: ua.BROWSER_ENGINE, BROWSER_VERSION: ua.BROWSER_VERSION, USER_AGENT: ua.USER_AGENT, WEB_VIEW: ua.WEB_VIEW, AOSP: ua.AOSP, }; console.dir(result); { "OS": "Mac", "OS_VERSION": "
タッチ操作に対応した画像ビューワーをJavaScriptで作るならD3.jsが便利
スマホやタブレットで写真を表示していると、ピンチでズームしたり、ドラッグで移動したりができて便利なので、あれを Web 上で実現してみたくなった。 最近のブラウザーでは touchstart や touchmove イベントでタッチ情報を取れたり、イベントの touches でマルチタッチを扱えたりするので、実現するための基盤はそろっている。 適当なライブラリーがあるかと思って探してみたが、意外と苦労してしまった。 Hammer.js が使えない タッチを扱うためのライブラリーとしては Hammer.js がメジャーらしい。スワイプ・ピンチ・ドラッグなど、各種イベントにも対応していて、これを使えば一発解決してくれそうだ。 ところが、画像ビューワーを作るには不向きだった。困ったのは次の 2 点。 ピンチやドラッグは個別には動くが、組み合わせたときに「表示位置」と「倍率」の関係を自前で計算する
ブラウザゲームのプロトタイピングに役立つJavaScriptライブラリ - ABAの日誌
ブラウザで動くゲームのプロトタイプを作るとき、もちろんPhaserとかの機能満載のゲームエンジンを使ってもいいのだが、こういったエンジンは多彩な機能に応じてAPIが豊富すぎて、使いこなせるようになるまでが若干面倒なことがある。そういった時、もっと軽量のJavaScriptライブラリを機能ごとに組み合わせた方がお手軽に作れるのではないか。そう思って、ゲームで使う機能ごとのライブラリを探してみた。 グラフィックス p5.jsが役立ちそう。p5.jsはビジュアルデザイン向けとして有名な言語ProcessingをJavaScript向けライブラリとして提供したもの。似たものとしてProcessing.jsもあるが、こちらは元のProcessing言語をブラウザ上で動かすことに主眼を置いており、ライブラリとして使う分にはp5.jsの方が使いやすい。 Get Started見れば分かるように、crea
Clusterize.js
<!--HTML--> <div class="clusterize"> <table> <thead> <tr> <th>Headers</th> </tr> </thead> </table> <div id="scrollArea" class="clusterize-scroll"> <table> <tbody id="contentArea" class="clusterize-content"> <tr class="clusterize-no-data"> <td>Loading data…</td> </tr> </tbody> </table> </div> </div> <!--HTML--> <div class="clusterize"> <table> <thead> <tr> <th>Headers</th> </tr> </thead> </table> <
React Templates
No runtime libraries. No magic. Simply precompile your way to clear React code. Easy syntax that's similar to HTML, supported by most IDEs. Clear separation of presentation and logic - almost zero HTML in component files. Declarative coding ensures that the HTML that you write and the HTML you inspect look nearly identical. Supports AMD, CommonJS, ES6, Typescript and globals.
GitHub - CyberAgent/bucks.js: Async chain utility for node and the browser. (amd support)
// // new Bucks object // var b = new Bucks(); // // Add and add several tasks. // b.add(function f1(err, res) { return 'a'; }).add(function f2(err, res, next) { // res => 'a' return next(null, 3); }).add(function f3(err, res, next) { // res => 3 return next(new Error('error after 3')); }).add(function f4(err, res, next) { // err => 'error after 3' return next(null, "recover 4"); }).add(function f
CountUp.js
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// CountUp.js is a dependency-free, lightweight JavaScript class that can be used to quickly create animations that display numerical data in a more interesting w
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - deltakosh/handjs: Hand.js is a polyfill for supporting pointer events on every browser
Osteoporosis.js/README.ja.md at master · ginpei/Osteoporosis.js
Game Interaktif Berbasis Gerak & Animasi – Website game interaktif yang menampilkan animasi dinamis dan gameplay responsif untuk pengalaman hiburan digital yang lebih hidup dan menarik.
The Beginner’s Guide to TimelineMax Web Design Tutorials | Envato Tuts+
GitHub - dimsemenov/PhotoSwipe: JavaScript image gallery for mobile and desktop, modular, framework independent
新着記事 | PhotoshopVIP
