[CSS3] CSS Scroll Effects – なんだか凝った感じのスクロールエフェクト
なにこれかっこいい。凝った感じのスクロールエフェクトが紹介されてます。ページ内に複数あるエリアの中でスクロールさせると、下からアニメーションしながらコンテンツが出てきます。ソースコード落としてみましたが、CSS3とJSを使ってやってるようです。リスト表示のスクロール装飾にイイっすねこれ。ダウンロードはGitHubから。
Tag Archives: Javascript
[Javascript] Sequence.js – Parallaxスクロールが使えるコンテンツスライダー
Parallaxスクロール（多重スクロール。30代の人向けに言えばファンタジーゾーンです）に対応したコンテンツスライダー。スクロール芸のページなんかで最近よく見ますね。またAppleのiPhoneのページで見る事のできる回転するトランジションも使えるようです。なかなか多芸なスライダーです。JSライブラリにはjQueryが使われているようですが、トランジションの多くはCSS3で書かれているようで、jQueryの知識は必要ないYO！と謳われてます。その内何かで使ってみよかなー。
[Responsive Layout] 20 Useful jQuery Plugins for Responsive Web Design – レスポンシブレイアウトに役立つjQueryプラグイン
レスポンシブレイアウトのサイト制作時に役立つjQueryプラグインのまとめ記事。例えばデバイスのウィンドウサイズにテキストをフィットさせるもの、イメージスライダー、Webプレゼンツール、イメージギャラリー、画像のフルスクリーン表示補助ツール、動画の横幅フィットツールなどが紹介されてます。ページ最下部から2ページ目に行けます。サイトのレスポンシブ対応を行う際に便利なまとめ記事。
[Javascript] 60 jQuery Plugins You Should Try Today – 今すぐ試すべき60のjQueryプラグイン
今日試すべき、ってあたりがなんかアレではありますが、まぁ海外のブログってだいたいこういうノリですよね。というわけでjQueryプラグインが60個紹介されてます。ジャンルは絞られてません。定番のスライドショーや画像スライダーはもちろん、テキスト関連ツールやグラフ描画、ToolTip、動きのあるナビゲーション、フォーム関連ツール、カレンダー描画など色々あります。目的を持ってプラグインを探すには適してませんが、ダラダラと読むにはイイ感じの記事。サイト内でちょっと変わった事したい時なんかにひとつ。
[Javascript] Simple Modal – シンプルなModal表示JS
シンプルなModal表示JS。シンプルとはいえLightboxよりも多機能で、画像以外にもHTMLやVideo Embedなど様々なフォーマットに対応してます。これ系のLightbox亜種は色々ありますが、トランジションなども含めて綺麗な作りだったので紹介。個人的に残念なのはJSライブラリにmootoolsを使っている点。jQueryの方が色々使いやすい場面多いんスよねー。DLするにはアイコンをドラッグしましょう。あとこのサイト、リロードすると色が変わります。なんだかえらくかっこヨくてシビれました。
[Javascript] jQuery Smooth Scrolling Plugin – jQueryを使った多機能なスクローラー
jQueryを使った多機能なページスクローラー。プラグインの機能については、サイト内上部にあるオン・オフボタンをいじくるとだいたい分かりますが、主な機能はページ上部の固定ナビゲーション、ページ左右（から選べる）固定ナビゲーション、アンカー飛ばしのための順送りボタンの3つです。固定ナビゲーションは、マニュアルスクロールの場合にも現在の位置を追従してハイライトしてくれるの点がナイス。長いページのコンテンツや、シングルHTMLサイトなどでイイっすねこれ。
[Game] JS GameBoy Color Game Center – JSとHTML5で作られたゲームボーイカラーのシミュレーター
JSとHTML5で書かれたゲームボーイカラーのシミュレーター。ようするにブラウザベースのエミュです。JSベースでこれを作ったという点もなかなかホットなんですが、それよりも用意されてるROMの数にビックリしました。プルダウンからロードするゲームのカートリッジを選択できるんですが、ゼルダやメトロイド、ロックマン（欧米圏ではMega Man）、スーパーマリオ、ポケモン、ドンキーコングなどのメジャータイトルが山盛りです。これ著作権的にグレーどころかぶっちぎりで真っ黒なんじゃ・・・ｗ ちなみにSafariでは動きませんでした。Firefoxでならちゃんと走ってくれます。著作権云々はとりあえず置いといて、技術的にはなかなかホットだなぁと。
[Presentation] impress.js – クールなWebベースのプレゼン用JS
JSを使ったクールなプレゼンテーション用フレームワーク。キーボードのスペースバー or 十字キー左右で進んだり戻ったりできます。パっと見わりと普通なんだけど、スライドを進めて行くと色々と凝ったエフェクトになってる点に気付きます。iPhone 4Sのメインビジュアルで使われてた回転するエフェクトにも似てますな。また最初のページでは全ページが一覧されており、任意の場所クリックで該当スライドにジャンプする事もできるようです。jQueryなどは使われておらず、またHTML5で記述されてる点もポイント。こういうのでプレゼンする人ってかっけーなぁって最近思います。