Webアプリ/表示周りのバックアップ(No.61)

スマホ用のWebアプリ開発で試してみたい表現を集めたページです。

リンク

ElementTransitions.js ... ☆☆☆jQuery上で動作するトランジションライブラリ
Magic is a CSS3 framework with many animations. Is simple to use and many animations are cross-browser compatible. ☆☆☆
HTML5とCSS3を使ってスマートフォン向けサイトを構築－ iPhone版Yahoo!JAPANトップの開発事例紹介 | CodeZine ☆☆☆
アニメーションが気持ちいい！複数のパネルをiOS風のエフェクトで切り替える -Kontext | コリス ... サクサク動きカッコイイ☆☆☆
ページに美しいシャドウを加え、奥行きを与えるスタイルシート -Depth | コリス
CSS3を使って、より美しいスタイルを適用するチュートリアル | コリス
木の葉が木枯らしに舞うように軽やかなアニメーションでコンテンツを次々に表示するスクリプト -Windy | コリス
自分仕様のかなりかっこいいローディング用アニメーションを生成できる -Sonic Creator | コリス
残像アニメーションが気持ちいいシェア用のボタンを実装するスタイルシート | コリス
レスポンシブ対応のシンプルながら高性能なすごいナビゲーション！ -Resposive Nav | コリス
[CSS]デスクトップ・スマフォ・タブレット向けの美しいUIエレメントを簡単に実装できるスタイルシート -TopCoat | コリス
パネルをCSS3アニメーションでスライドや回転や拡大させたりするチュートリアル | コリス
日本語にもマッチする、見出しの文字をかっこよくするスタイルシートのまとめ | コリス
2013年、素敵なアイデア満載のスタイルシートのテクニックのまとめ | コリス
かっこいいアイデアが盛り込まれた横からスライドするナビゲーション | コリス
スクリプト初心者でも簡単！レスポンシブ対応のナビゲーションやコンテンツを横から表示するスクリプト -Slidebars | コリス
文字を魅力的に動かせる!!テキストエフェクトの定番textillate.jsの使い方 | 株式会社LIG
Sponser Flip Wall ... 分割したフリップを1つづつめくれます。PHPと連携して内容を更新するチュートリアル付き。
アプリデザインの参考になるギャラリーサイト＋クオリティを格上げできるセンスのいい素材配布サイトの紹介
スマホで水平垂直方向へのスワイプ、スライドが可能なjQueryプラグイン「jQuery slideToucher plugin」 ... 水平方向に年表を表示したかったのに使えそう。スワイプで動き、区切りたい所でスッと停止できる。
text-shadowのCSS Animationを使用したLOADING
スマホサイトでよく見る感じのサイドからにゅっと出てくるメニューをjQueryプラグイン「Sidr」で作る
これからのWeb制作に使える、面白いUIを実装できるjQuery・CSS集まとめ17個
CSSだけで簡単に吹き出しを作成する方法4つ！ | Asial BLOG
PhoneGapでの画面遷移　jqMini.jsが便利
jquery-tutor というプラグインを作りました | Crocos Engineering Blog
Objective-C (iOS): サンプルの実行方法 | http://snippets.feb19.jp ... iPadで見たときレイアウトやフォントなどとても見やすかったので参考としたい。
これは凄い！iOS6用のスタイルシートベースの画像編集ソフトウェア「CSS PhotoEditor」 | MOON GIFT ... ブラウザベースですがタブなどの動作がスムーズです。iOS 5では画像のエフェクトはかかりません。
画像リストをパターンをつけてフェードイン/アウトできるjQueryプラグイン「diagonalFade」
CSS3アニメーションを利用したサンプル | to-R ... 横スクロールするテキスト、フェードするメニュー、拡大する写真など
実際のサイト上で動作するチュートリアルが簡単に作れるIntro.jsが便利すぎる件 | sasata299's blog ... ヘルプを実装するときに使えそう
"Over 1000 D3.js Examples and Demos" 1000以上のD3.jsサンプル＆デモリスト
CSS3で実装するボタンのチュートリアルのまとめ
次のレベルまでWEBサイトを引き上げてくれるCSS、javascriptテクニック集 | DesignDevelop
HTML Templates
スマートフォンのためのJavaScriptフレームワークベスト10 | WEBの小ネタ ... JQUERY.PEP.JS のデモがドラッグがスムーズで気持ちいい。
Tapotype ... スマホの画面遷移集
Swiper ... ☆スムーズなスライダー。縦にもスライド可能。
cheatsheet.js ... JSONオブジェクトをチートシートにしてくれるライブラリ。
creatorish ... jqMini, WebSQL.js, smooth-scroll, support-util, transformer ... Webアプリを作るのに便利そうなライブラリ群。軽量でアニメも充実
パネルが次々にスライドして重なるエフェクトを実装するチュートリアル | コリス
iPadの横向きと縦向きでレイアウトを変更するスタイルシート | コリス
Create a Path-like Menu Button with WheelMenu.js
指定された大きさを満たすようにいい感じに画像を表示「imagefill.js」
さまざまなHTMLの要素をくるっと回転させるスクリプト | コリス
簡単にパララックス実装可能な軽量スクリプト「skrollr」＆コンテンツごとにページスクロールするjQueryプラグイン「fullPage.js」「One Page Scroll」 | BlackFlag ... iPad3で見てみましたが、最後のOne Page Scrollがスムーズで気持ちいい動きです。
サイトをスクロールした時のエフェクトをプラスできる無料プラグイン25
多階層のスマホサイトメニューを実装できる「Multi-Level Push Menu」| phpspot開発日誌
Flipping Circle Slideshow
HTML5アプリ作ろうぜ！（9）：CSS3で簡単！スマホ向けWebページのスクロールを激派手にできるstroll.jsとは (1/2) | ＠IT
Tilted Content Slideshow ... バーをクリックすると背景画像がスライドするデモです。他に色々なデモが見られます。☆
iOS7のアプリを作るときに使えるHTMLフレームワーク『Framework7』 | IDEA*IDEA
モバイルアプリ制作に使いたい、ナビゲーションメニュースタイル5個まとめ | PhotoshopVIP
App.js
[JS]実装は簡単でスマフォにも対応、縦長ページをスクロールする時にちょうどいい位置にスナップさせるスクリプト -Scrollify | コリス
Android "L" Button | CodePen
vivus.js - svg animation
Get Webplate ... フラットデザインのボタンなど
Isotope·格好良いアニメーション付きのフィルタ/並び替えライブラリ MOONGIFT
Creating Animations and Interactions with Physical Models
CSS3 Animation Cheat Sheet | Justin Aguilar
JavaScriptとCSSは不要！SVGの気持ちいいアニメーションで作られた超軽量のかわいいローディング -SVG Loaders | コリス
WOW.js ... タイトルや画像などに対してスクロールインなどのアニメーションを簡単に付けられます。パララックスサイト作成時に便利です。