インストーラのようなウィザードをWEBで実現できる「jQuery Smart Wizard 4... 次の記事 ≫：WebGLを使った超リッチな背景イメージ描画「WebGL Scroll Spiral」
背景画像をダイナミックに動かしつつParallax効果を作れる「fullPage.js」:phpspot開発日誌
インストーラのようなウィザードをWEBで実現できる「jQuery Smart Wizard 4... 次の記事 ≫：WebGLを使った超リッチな背景イメージ描画「WebGL Scroll Spiral」
KUTE.js | JavaScript Animation Engine
The magic behind Spicr, the result of hard work, the bridge between old and new, the dream and inspiration. Forward Looking The modern JavaScript powering the core functionality, the modular architecture, the solid and complete components are all geared towards the future of web development. Knowing the Past While KUTE.js was re-developed to support mainly modern browsers, it also leaves the door
Sticker.js
A Javascript library that allows you to create a Sticker Effect No dependencies (jQuery not required) and MIT License Inspired by Sanghee Cho's Heroes Project Download on Github Example Move your mouse cursor on below circles IMAGE COLOR Usage Call the init() method with target elements (.className or #ID). It creates the necessary HTML elements in the target and add the sticker effect using CSS 3
SLOBSERVER - L'actualité de Second Life
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
サイト内にMediumのテキスト編集ツールを組み込める「Dante」:phpspot開発日誌
michelson/Dante GitHub サイト内にMediumのテキスト編集ツールを組み込める「Dante」 テキスト選択時にのみツールバーが現れて文字修飾が可能。スマホでも比較的快適に使えます。 スマホファーストな流れの中で、従来型のPCに特化したWYSIWYGはスマホでは使いづらく、こうしたものにシフトしていく必要がありそう 関連エントリ Mediumが作ったデータビジュアライズツール「Charted」 Mediumのアバターズーム風エフェクトがかけられるJSライブラリ「Zoomerang.js」 Mediumスタイルのコメントシステムが実装できる「Side Comments」 Medium風のシンプルなLightBoxが実装できるjQueryプラグイン「Fluidbox」 MediumみたいなカッコいいWYSIWYGな編集ができる「jQuery Notebook」
Matter.js
Rigid bodies Compound bodies Composite bodies Concave and convex hulls Physical properties (mass, area, density etc.) Restitution (elastic and inelastic collisions) Collisions (broad-phase, mid-phase and narrow-phase) Stable stacking and resting Conservation of momentum Friction and resistance Events Constraints Gravity Sleeping and static bodies See all features
WebRTCとWeb Audio APIを使って音声録音と音声再生をする方法 | azunyan.blog
マイクから音声を取得（音声録音）して、音声再生する復唱アプリ「Kiri!Talk」をWebRTCとWeb Audio APIを使って開発しました。 WebRTCは、ブラウザ間でボイスチャット、ビデオチャット、ファイル共有ができ、Web Audio APIは、音声データを色々加工することができます。 JavaScriptのみで簡単にこんな処理ができるなんてすごい時代になったと思いつつ、勉強がてらアプリを作ったという経緯です。 まだ一部ブラウザしか対応していませんが、後々はスマホ等携帯端末のブラウザにも対応して、ブラウザのみで何でもできる時代が来るのではと期待しています。 今回は、作ったアプリで音声録音と音声再生を行ったので、その処理方法を説明します。 ただ、勉強がてら作ったので「まぁ動いたからいいや」というレベルで、ちょっと不明点ややっつけのままコードを書いた箇所があります。 ので、
Echo.js, simple JavaScript image lazy loading - Ultimate Courses
I’m currently working on a project for Intel’s HTML5 Hub in which I require some image lazy-loading for an HTML5 showcase piece that’s high in image content. After a quick Google search for an existing lazy-load solution there was yet another mass of outdated scripts or jQuery plugins that were too time consuming to search through or modify for the project - so I ended up writing my own. Echo.js i
PACE — Automatic page load progress bars
What is Pace? Include pace.js and a CSS theme of your choice, and you get a beautiful progress indicator for your page load and ajax navigation. No need to hook into any of your code, progress is detected automatically. Download If you’re a developer, download Pace directly here: Pace.js Themes Enter a color:
テキストの差分をグラフィカルにブラウザ上で描画できるJSライブラリ「Mergely」:phpspot開発日誌
Mergely - Online diff, merge documents テキストの差分をグラフィカルにブラウザ上で描画できるJSライブラリ「Mergely」 ブラウザ上でテキストを変更する際などに、どこを変更したのかが、リアルタイムかつグラフィカルに分かるようなUIを実装することが出来ます テキストのリアルタイムな差分を示すっていうのは大変そうですが、ライブラリを使うだけなら簡単そうですね。 サイトのテキスト編集ツールに統合したりすることで編集ツールを便利にすることが出来そうですね。 関連エントリ フルページスクロールするサイトを作るのに使える「fullPage.js」 カスタマイズが容易なカレンダー生成jQueryプラグイン「CLNDR.js」 高速なCSSアニメーションをJSで制御できる「animo.js」 WEBページをJSで自動操作できるようにできる「SlimerJS」 iO
faviconにアニメーション付きのバッジをつけられる「favico.js」:phpspot開発日誌
favico.js - Make a use of your favicon faviconにアニメーション付きのバッジをつけられる「favico.js」 faviconに通知等の件数を付与し、単に付与するだけではなく、アニメーションをつけられるJS。 タブがバックグラウンドにある時に、分かりやすいですね。 このライブラリを利用して簡単に実現できるので通知等があるサイトの場合は実装しておくとよいかもですね 関連エントリ faviconを円グラフにしてアニメーションできる「Piecon」
[JS]lightboxの進化形、レスポンシブ対応で画像を拡大表示するスクリプト -SuperBox
lightboxよりJavaScriptと画像ロードの依存を少なくした、レスポンシブ対応で画像を拡大表示するjQueryのプラグインを紹介します。 デモページ：幅780pxで表示 SuperBoxの使い方 Step 1: 外部ファイル 「jquery.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。 <link href="css/style.css" rel="stylesheet"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="js/superbox.js"></script> Step 2: HTML まずは、基本構造です。 HTML5のdata属性で拡大する画像を指定し、classに「superbox-im
Chardin.js
Chardin.js - Simple and beautiful overlay instructions for your apps.
文字数、段落数、単語数を簡単に数えられるJSライブラリ「Countable.js」:phpspot開発日誌
Countable.js?live word-counting in JavaScript 文字数、段落数、単語数を簡単に数えられるJSライブラリ「Countable.js」 文字数を数えるライブラリは沢山ありますが、段落や単語数までカウントしてくれるライブラリははじめてかも。 文字数、段落のカウントは日本語にも対応しています（単語数は非対応） 文書を書いてもらって送ってもらうような場合の入力補助ライブラリとして使えそうです 関連エントリ 美しくアニメーションさせられる線・棒グラフ描画JSライブラリ「xCharts」 jQuery風に簡単にCanvasを扱えるラッパーライブラリ「Canvas Query」 Bootstrapに追加で使えるjQueryベースのUIライブラリ「w2ui」 JavaScriptオフ、CSSをのみで動くツールチップライブラリ「hint.css」 シンプル多機能なW
JSでのCanvas操作を簡単かつ高機能にできる「Fabric.js」:phpspot開発日誌
Fabric.js Javascript Canvas Library JSでのCanvas操作を簡単かつ高機能にできる「Fabric.js」 canvasのネイティブAPIは若干分かりづらいという方も多そうですが、このライブラリを使えばオブジェクト指向で楽々Canvasプログラミングが出来そうです 単に便利にコーディングできるようになるだけでなく、オブジェクトをマウスで拡大や回転できるなどといった色々な機能も盛り込まれていて便利そうです ネイティブAPIだと、四角形を描画するのに、次のようなコードを書きます。 これが、Fabric.jsを使うと次のように、とても分かりやすくなります。fillRectの引数の順ってどうだっけ？と毎回リファレンスを牽く必要もなくなりますね 他にもドキュメントを参照すれば、CanvasをネイティブAPIで書く面倒さを理解できるはず デモページも結構充実しており
ネットワークのオフラインを検知して処理を実行できる「Heyoffline.js」:phpspot開発日誌
Heyoffline.js ネットワークのオフラインを検知して処理を実行できる「Heyoffline.js」 フレームワークレスで動いて、onOfflineとかonOnlineとかのイベントハンドラを設定して、オフライン、オンライン時に処理を実行できるみたい。 スマートフォンなんかで、何かを入力してしまっていて、送信ボタンを押したらサーバがオフラインですっていうのは避けたいところなのでこうした仕組みで送信ボタンのアクティブ状態を変更するのも１つの手ですね 家や会社のパソコンは常時接続でオフラインの心配はなくなった、とおもいきやスマートフォンの電波が悪い状態や地下鉄、といったことを考えるとこういう仕組みは必要かもですね 関連エントリ 様々なグラフを描画できるJavaScriptライブラリ「NVD3.js」 ブラウザ上でRubyプログラムをJavaScriptに変換して実行できる「Opal」
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React Text Gradient
GitHub - jwagner/smartcrop.js: Content aware image cropping
GitHub - sitexw/FuckAdBlock: Detects ad blockers (AdBlock, ...)
インスタに投稿した画像をサイト上に表示できるJS「Instafetch」:phpspot開発日誌