スマホ用のWebアプリ開発で試してみたい表現を集めたページです。
[[UX]]
*リンク
-[[ElementTransitions.js>http://dan-silver.github.io/ElementTransitions.js/]] ... ☆☆☆jQuery上で動作するトランジション ライブラリ
-[[Magic is a CSS3 framework with many animations. Is simple to use and many animations are cross-browser compatible.>http://www.minimamente.com/magic-css3-animations/]] ☆☆☆
-[[HTML5とCSS3を使ってスマートフォン向けサイトを構築 − iPhone版Yahoo!JAPANトップの開発事例紹介 | CodeZine>http://codezine.jp/article/detail/5619]] ☆☆☆
-[[アニメーションが気持ちいい！複数のパネルをiOS風のエフェクトで切り替える -Kontext | コリス>http://coliss.com/articles/build-websites/operation/javascript/js-kontext.html]] ... サクサク動きカッコイイ☆☆☆
-[[ページに美しいシャドウを加え、奥行きを与えるスタイルシート -Depth | コリス>http://coliss.com/articles/build-websites/operation/css/css-depth-used-box-shadow.html]]
-[[CSS3を使って、より美しいスタイルを適用するチュートリアル | コリス>http://coliss.com/articles/build-websites/operation/css/css-playing-css3.html]]
-[[木の葉が木枯らしに舞うように軽やかなアニメーションでコンテンツを次々に表示するスクリプト -Windy | コリス>http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-windy.html]]
-[[自分仕様のかなりかっこいいローディング用アニメーションを生成できる -Sonic Creator | コリス>http://coliss.com/articles/build-websites/operation/javascript/online-sonic-creator.html]]
-[[残像アニメーションが気持ちいいシェア用のボタンを実装するスタイルシート | コリス>http://coliss.com/articles/build-websites/operation/css/css-animation-by-nitos.html]]
-[[レスポンシブ対応のシンプルながら高性能なすごいナビゲーション！ -Resposive Nav | コリス>http://coliss.com/articles/build-websites/operation/javascript/js-responsive-nav.html]]
-[[[CSS]デスクトップ・スマフォ・タブレット向けの美しいUIエレメントを簡単に実装できるスタイルシート -TopCoat | コリス>http://coliss.com/articles/build-websites/operation/css/css-framework-for-responsivetopcoat.html]]
-[[パネルをCSS3アニメーションでスライドや回転や拡大させたりするチュートリアル | コリス>http://coliss.com/articles/build-websites/operation/css/css-tutorial-animated-profile-cards-by-marcofolio.html]]
-[[日本語にもマッチする、見出しの文字をかっこよくするスタイルシートのまとめ | コリス>http://coliss.com/articles/build-websites/operation/css/css-this-is-a-headline.html]]
-[[2013年、素敵なアイデア満載のスタイルシートのテクニックのまとめ | コリス>http://coliss.com/articles/build-websites/operation/css/css-most-awesome-techniques-of-2013.html]]
-[[かっこいいアイデアが盛り込まれた横からスライドするナビゲーション | コリス>http://coliss.com/articles/build-websites/operation/css/css-off-canvas-menu-with-animated-by-walkthrough.html]]
-[[スクリプト初心者でも簡単！レスポンシブ対応のナビゲーションやコンテンツを横から表示するスクリプト -Slidebars | コリス>http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-slidebars.html]]
-[[文字を魅力的に動かせる!!テキストエフェクトの定番textillate.jsの使い方 | 株式会社LIG>http://liginc.co.jp/web/js/jquery/16661]]
-[[Sponser Flip Wall>http://demo.tutorialzine.com/2010/03/sponsor-wall-flip-jquery-css/demo.php]] ... 分割したフリップを1つづつめくれます。PHPと連携して内容を更新するチュートリアル付き。
-[[アプリデザインの参考になるギャラリーサイト＋クオリティを格上げできるセンスのいい素材配布サイトの紹介>http://webimemo.com/iphone/5199]]
-[[スマホで水平垂直方向へのスワイプ、スライドが可能なjQueryプラグイン「jQuery slideToucher plugin」>http://www.skuare.net/2013/02/jqueryjquery_slidetoucher_plug.html]] ... 水平方向に年表を表示したかったのに使えそう。スワイプで動き、区切りたい所でスッと停止できる。
-[[text-shadowのCSS Animationを使用したLOADING>http://codepen.io/diegopardo/pen/dGlfC]]
-[[スマホサイトでよく見る感じのサイドからにゅっと出てくるメニューをjQueryプラグイン「Sidr」で作る>http://www.skuare.net/test/jsidr.html]]
-[[これからのWeb制作に使える、面白いUIを実装できるjQuery・CSS集まとめ17個>http://w3q.jp/t/3627]]
-[[CSSだけで簡単に吹き出しを作成する方法4つ！ | Asial BLOG>http://blog.asial.co.jp/1140]]
-[[PhoneGapでの画面遷移 jqMini.jsが便利>http://t.co/zIHnlng3kB]]
-[[jquery-tutor というプラグインを作りました | Crocos Engineering Blog>http://engineering.crocos.jp/post/45158021790/jquery-tutor]]
-[[Objective-C (iOS): サンプルの実行方法 | http://snippets.feb19.jp>http://snippets.feb19.jp/?p=255]] ... iPadで見たときレイアウトやフォントなどとても見やすかったので参考としたい。
-[[これは凄い！iOS6用のスタイルシートベースの画像編集ソフトウェア「CSS PhotoEditor」 | MOON GIFT>http://www.moongift.jp/2013/04/20130403-2/]] ... ブラウザベースですがタブなどの動作がスムーズです。iOS 5では画像のエフェクトはかかりません。
-[[画像リストをパターンをつけてフェードイン/アウトできるjQueryプラグイン「diagonalFade」>http://jonobr1.github.io/diagonalFade/]]
-[[CSS3アニメーションを利用したサンプル | to-R>http://blog.webcreativepark.net/2013/04/14-132920.html]] ... 横スクロールするテキスト、フェードするメニュー、拡大する写真など
-[[実際のサイト上で動作するチュートリアルが簡単に作れるIntro.jsが便利すぎる件 | sasata299's blog>http://blog.livedoor.jp/sasata299/archives/51891797.html]] ... ヘルプを実装するときに使えそう
-[["Over 1000 D3.js Examples and Demos" 1000以上のD3.jsサンプル＆デモリスト>http://techslides.com/over-1000-d3-js-examples-and-demos/]]
-[[CSS3で実装するボタンのチュートリアルのまとめ>http://smashinghub.com/tutorials-for-creating-buttons-in-css3.htm]]
-[[次のレベルまでWEBサイトを引き上げてくれるCSS、javascriptテクニック集 | DesignDevelop>http://design-develop.net/web-design/css-js.html]]
-[[HTML Templates>http://foundation.zurb.com/templates.php]]
-[[スマートフォンのためのJavaScriptフレームワーク ベスト10 | WEBの小ネタ>http://coneta.jp/11802.html]] ... JQUERY.PEP.JS のデモがドラッグがスムーズで気持ちいい。
-[[Tapotype>http://tapotype.com/]] ... スマホの画面遷移集
-[[Swiper>http://www.idangero.us/sliders/swiper/demos.php]] ... ☆スムーズなスライダー。縦にもスライド可能。
-[[cheatsheet.js>http://www.100shiki.com/archives/2013/06/cheatsheet_js.html]] ... JSONオブジェクトをチートシートにしてくれるライブラリ。
-[[creatorish>https://github.com/creatorish]] ... jqMini, WebSQL.js, smooth-scroll, support-util, transformer ... Webアプリを作るのに便利そうなライブラリ群。軽量でアニメも充実
-[[パネルが次々にスライドして重なるエフェクトを実装するチュートリアル | コリス>http://coliss.com/articles/build-websites/operation/javascript/jquery-tutorial-window-chooser-in-opera-mobile.html]]
-[[iPadの横向きと縦向きでレイアウトを変更するスタイルシート | コリス>http://coliss.com/articles/build-websites/operation/css/css-ipad-layout-with-landscape-portrait-modes-by-matthewjamestaylor.html]]
-[[Create a Path-like Menu Button with WheelMenu.js>http://www.onextrapixel.com/2013/08/21/create-a-path-like-menu-button-with-wheelmenu-js/]]
-[[指定された大きさを満たすようにいい感じに画像を表示「imagefill.js」>http://www.moongift.jp/2013/09/20130903-2/]]
-[[さまざまなHTMLの要素をくるっと回転させるスクリプト | コリス>http://coliss.com/articles/build-websites/operation/javascript/js-flipload.html]]
-[[簡単にパララックス実装可能な軽量スクリプト「skrollr」＆コンテンツごとにページスクロールするjQueryプラグイン「fullPage.js」「One Page Scroll」 | BlackFlag>http://black-flag.net/jquery/20131008-4831.html?utm_source=twitterfeed&utm_medium=twitter]] ... iPad3で見てみましたが、最後のOne Page Scrollがスムーズで気持ちいい動きです。
-[[サイトをスクロールした時のエフェクトをプラスできる無料プラグイン25>http://www.webdesignerdepot.com/2013/12/25-free-scrolling-plugins-for-awesome-experiences/]]
-[[多階層のスマホサイトメニューを実装できる「Multi-Level Push Menu」| phpspot開発日誌>http://phpspot.org/blog/archives/2013/12/multilevel_push.html]]
-[[Flipping Circle Slideshow>http://tympanus.net/Development/CircleFlipSlideshow/]]
-[[HTML5アプリ作ろうぜ！（9）：CSS3で簡単！ スマホ向けWebページのスクロールを激派手にできるstroll.jsとは (1/2) | ＠IT>http://www.atmarkit.co.jp/ait/articles/1402/27/news107.html]]
-[[Tilted Content Slideshow>http://tympanus.net/Tutorials/TiltedContentSlideshow/]] ... バーをクリックすると背景画像がスライドするデモです。他に色々なデモが見られます。☆
-[[iOS7のアプリを作るときに使えるHTMLフレームワーク『Framework7』 | IDEA*IDEA>http://www.ideaxidea.com/archives/2014/03/framework7.html]]
-[[モバイルアプリ制作に使いたい、ナビゲーションメニュースタイル5個まとめ | PhotoshopVIP>http://photoshopvip.net/archives/63413#.U2s-AKyBexc.twitter]]
-[[App.js>http://code.kik.com/app/2/index.html]]
-[[[JS]実装は簡単でスマフォにも対応、縦長ページをスクロールする時にちょうどいい位置にスナップさせるスクリプト -Scrollify | コリス>http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-scrollify.html]]
-[[Android "L" Button | CodePen>http://codepen.io/timkendall/pen/iHfJg]]
-[[vivus.js - svg animation>http://maxwellito.github.io/vivus/]]
-[[Get Webplate>http://getwebplate.com/]] ... フラットデザインのボタンなど
-[[Isotope·格好良いアニメーション付きのフィルタ/並び替えライブラリ MOONGIFT>http://www.moongift.jp/2014/11/isotope-%E6%A0%BC%E5%A5%BD%E8%89%AF%E3%81%84%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E4%BB%98%E3%81%8D%E3%81%AE%E3%83%95%E3%82%A3%E3%83%AB%E3%82%BF%E4%B8%A6%E3%81%B3%E6%9B%BF/]]
-[[Creating Animations and Interactions with Physical Models>http://iamralpht.github.io/physics/]]
-[[CSS3 Animation Cheat Sheet | Justin Aguilar>http://www.justinaguilar.com/animations/#]]
-[[JavaScriptとCSSは不要！SVGの気持ちいいアニメーションで作られた超軽量のかわいいローディング -SVG Loaders | コリス>http://coliss.com/articles/build-websites/operation/work/svg-loaders.html]]
-[[WOW.js>http://mynameismatthieu.com/WOW/]] ... タイトルや画像などに対してスクロールインなどのアニメーションを簡単に付けられます。パララックスサイト作成時に便利です。アニメ種類は[[Animate.css>http://daneden.github.io/animate.css/]]のページで選ぶと便利。
-[[[JS]ちょっとしたアイデアの積み重ねが素晴らしい！画像を拡大表示するシンプルなスクリプト -Zoom.js | コリス>http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-zoom.html]]
-[[[JS]アニメーションが気持ちいい！サイズ・カラー・形を変えられる紙をメタファにしたボタンを実装できるスクリプト -Quttons | コリス>http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-quttons.html]]
-[[業務システムで使えるグリッドライブラリ×8選 | hifive開発者ブログ>http://blog.htmlhifive.com/2015/06/15/grid-libraries-for-enterprise-system/]]
-[[jQueryとCSSのtransitionで可視範囲に入ってからアニメーションさせる方法 | Webpark>http://weboook.blog22.fc2.com/blog-entry-415.html]]
-[[CSS3の新体験！コピペできるテキストエフェクト用HTMLスニペット30個まとめ>http://photoshopvip.net/93415]]
