Library Detector - あのサイトはどのJavaScriptライブラリを使っているか MOONGIFT
Webシステムを開発していると他のサイトがどういった仕組みで動いているか気になったりしますよね。HTMLソースやURLからどんなプログラミング言語で、どんなフレームワークか知ったりするのは面白いです。 サーバサイドは実際のところは分からないのですが、フロントエンドは分かります。ということで入れてみたいのがLibrary Detectorです。 Library Detectorの使い方 Library DetectorはGoogle Chrome機能拡張としてリリースされています。 インストール後、任意のWebサイトを見ると使われているライブラリがチェックできるようになります。 Yahoo! JapanはYUI 2を使っているようです。 Yahoo! ニュースはjQueryです。 jQueryはさすがにjQueryを使っていますが、さらにModernizrも使っています。 Backbone.
multiscroll.js - パララックスとはまた違うスクロールエフェクト MOONGIFT
パララックスエフェクトに代表されるようにスクロールで新しい視覚効果を生み出す試みがされています。単純な上下のスクロールでは得られない大きなインパクトを訪問者に与えることができます。 その新しい手法として紹介したいのがmultiscroll.jsです。スクロールによって起こる新しいエフェクトを楽しんでください。 multiscroll.jsの使い方 何はともあれ動画を見るのが一番分かりやすいかと思います。 いかがでしょう。スクロールすると上下から画像がスクロールしてきて合体します。パララックスとはまた違うインパクトがありますよね。 最初の表示はこんな感じ。 スクロールするとコンテンツが上下から表示されてきます。 視覚効果は慣れてしまうと思ったインパクトを与えづらくなります。パララックスイフェクトも最近では印象が残りづらくなっているかも知れません。そこで新しい視覚効果を考えてみるのは面白いと思
Firefox 32 で Array.from が実装された - hogehoge @teramako
904723 - Implement ES6 Array.from 22.1.2.1 Array.from ( arrayLike [ , mapfn [ , thisArg ] ] ) Array-like な値をArrayに変換するメソッドです。 引数は arrayLike: Array-likeなオブジェクト mapfn:(Optional) Array.prototype.map に渡すような function thisArg:(Optional) 同上 Array-likeなオブジェクトとは以下の様なもの @@iteratorのイテレータを持つもの lengthプロパティを持つもの lengthプロパティを持つものより、@@iteratorの方が優先度が高いので注意 使用例 思いつくものをテキトウに HTMLCollection, NodeList に対して、forEach, m
[JS]ココに注目！してほしい箇所をアニメーションでくるっと囲むスクリプト -traceit
traceitの使い方 Step 1: 外部ファイル 当スクリプトとjquery.jsを外部ファイルとして記述します。 <body> ... <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="../js/raphael_traceit.min.js"></script> </body> Step 2: HTML HTMLはテキストでも画像でも通常通りの実装で構いませんが、要素を指定できるようidなどを与えておきます。 <div id="example">Let's trace this element.</div> Step 3: JavaScript トレースする要素を指定し、スクリプトを実行します。 //Initialize a tr
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
クレジットカード番号の入力を直感的にできる「Card.js」:phpspot開発日誌