進化が止まらない！CSS3アニメーションを簡単に利用できるスクリプトやスタイルシートのまとめ
スクロールをトリガーに要素をアニメーションで表示したり、ページを表示した時にちょっとしたエフェクトを加えたり、ボタンのホバー時に気持ちいいアニメーションを加えたり、CSS3のアニメーションを簡単に加えることができるリソースを紹介します。 Story Box Story Box -GitHub スクロールをトリガーに54種類のアニメーションを簡単に実装できるjQueryのプラグイン。アニメーションは非常に軽快で、デモ：ユニークの派手なアニメーションでも快適です。 ScrollMagic ScrollMagic -GitHub Appleのプロダクトページのように次々に要素を表示したり、簡単にパララックスを加えたり、特定の要素をスクロール時にピンで留めて表示したりなど、スクロール系のエフェクトは全部できてしまう感じです。 スマフォなどレスポンシブ対応はもちろん、水平スクロール、無限スクロール、
人気上昇中のJavaScriptライブラリを調べてみた［ジャンル別に比較］
連載 INDEX 次回 → こちらのページで【2015年版】も発表！ ■ 2014年が始まり、心機一転で「今年こそはWeb開発を頑張ろう」と思っている人も少なくないだろう。そんな方々に向けて本稿では、2013年中に人気が急上昇してきており、「2014年では必須の知識」となりそうなJavaScriptライブラリ（Library）をランキング形式で発表する。 なお、本稿のランキング決定では、検索キーワードの流行を調査可能な「Googleトレンド」（「すべての国」「過去 12 か月間」「すべてのカテゴリ」「ウェブ検索」という条件で絞り込み）を使って、ライブラリの人気をジャンルごとに比較した（※ライブラリ名が一般的な英単語の場合、Web検索時に、その英単語にもヒットしてしまう。このノイズがGoogleトレンドでの結果として入り込んでいる可能性が高いことをご了承いただきたい。各ジャンルは、筆者が独自
びよ〜んと弾むのが気持ちいい！タブレット・スマフォで使いたいナビゲーション -Bounce Menu
タップすると、びよ〜んと弾んでナビゲーションが表示されるタブレット・スマフォ向けに実装してみたいナビゲーションを紹介します。 Bounce Menu 左下をタップで動作します。 実装はこんな感じです。 HTML <div class="device"> <div class="screen"> <div class="menu"> <ul> <li class="lock"><a href="">Lock</a></li> <li class="share"><a href="">Share</a></li> <li class="download"><a href="">Download</a></li> </ul> </div> <div class="toggle"> <div class="x"></div> <div class="y"></div> </div> <div cl
CSS で作る Tumblr モバイルアプリ風メニュー
1年くらい前に 「CSS で作るスマートフォン向け片手操作メニュー」 って記事書いたんですが、同じようなのをまたやってみたので紹介。 Tumbler の Android アプリ （Tumblr for Android） の新規投稿の UI がカッコよかったんで、これを CSS と超簡単な JavaScript （jQuery 使用） で再現してみました。実際のサンプルは下記に。 CSS で作る Tumblr モバイルアプリ風メニュー サンプル 現在最新版の Firefox、Safari、Chrome では動くと思います。あと手持ちの iOS 6 Safari では動作確認しました。他のスマートフォンとか知らない。IE？ 一応、IE10 は問題なく動作します。IE9 だと動作はするけどアニメーションとかしないです。 元ネタを下記に貼っておきますね （画像は 「Tumblr Staff」 から
HTML5 × CSS3 × jQueryを真面目に勉強 – #17 Bootstrap をカスタマイズしてオリジナルテーマを作ってみた | DevelopersIO
トレンディ且つナウい Web ページを構築するための CSS フレームワーク（※枠組み）です。フレームワークというとなんだか大袈裟な響きですが、実態は単なる CSS と JavaScript という２つのテキストファイルだけで特別な使い方等もありません。利用者はこれらを HTML ファイルに読み込ませたのち、Bootstrap 側で既に定義済みのクラスを各 HTML 要素に指定するだけで、自分は一行も CSS を書くことなく高品質な Web ページが作れてしまったりします。 Twitter Bootstrap うろ覚えですが、2011年の夏頃に最初のメジャーバージョンがリリースされました *1。当時 Twitter のエンジニアで現在は Github にお勤め中の Mark Otto 氏によって開発され、2013年4月時点ではバージョン2.3.1が最新版となっています。またバージョン3.0
HTML5 × CSS3 × jQueryを真面目に勉強 – #11 Path風サークルメニューを作ってみた | DevelopersIO
そんな訳で、写真共有SNSの一つであるPathにある、あのサークルメニューを再現してみたので、ここにその手順をまとめておくとします。 Pathはネイティブアプリなので、JavaないしObjective-Cにて実装されていますが、こちとらはそんなハイソなテクニックは使わずに、JavaScriptとCSS3だけで行けるところまで行ってみます。 はじめに とりあえずサークルメニューの要件を大まかに書きだしてみました。 トグルボタンをクリックしてメニューアイテムの表示/非表示を切り替えたい 各メニューは円周上に均等に配置された状態で表示させたい 表示/非表示はアニメーションで切り替わるようにしたい メニュー数の増減には柔軟に対応できるようにしたい その他、各メニューの間隔や角度、表示時の距離などはオプショで指定できるようにしたい ひとまずこんなもんで良いでしょう。次にこれらの要件をどのように実装す
2012年総まとめ：ウェブ制作に役立つエントリーBest 20
2012年、当サイトでブックマークが多かったエントリーBest 20の紹介です。 今年はレスポンシブ、CSS3アニメーション、洗練されたデザインのUIが目立ったように思います。 3つともスマフォ絡みですね。 逆に、HTML5、jQueryは去年ほどではない気がしました、特にjQueryは来年のjQuery2に期待ですかね。 コリス 当サイトの購読は、RSS Feedをご利用すると便利です。 コリスのRSS Feed FeedBurner経由の方は、変更をお願いします！ [ad#ad-2] 2012年、ブックマークが多かったエントリー 面接はスキル！転職時の面接でよく聞かれる23の質問とその対処方法 2012年版、漢字も揃っている日本語のフリーフォントのまとめ ウェブデザインのセンスを学ぼう、2012年上半期洗練されたディテールのUIデザインのまとめ ウェブデザインのセンスを磨く！ 2012
たった１行で完成？凄まじくレスポンシブデザインなサイトの作り方 | DECONCEPTER
簡単に作れる！みんな大好き可変グリッド 先日話題になっていた「なんだこれ！！「NHKスタジオパーク」のレスポンシブ・ウェブデザインが凄まじくレスポンシブ！！」で紹介されていたNHKスタジオパークのレスポンシブデザイン。 こちらのサイト、プラグインを使ってとてもシンプルに作られています。キレイ。このシンプルさを伝えたくてうずうずしてきました。せっかくうずうずしたのでどんな作り方をしているのかサンプルを交えて紹介します。 まずはこちらのデモを御覧ください。 凄まじくレスポンシブデザインなサイトデモ 使われているのはjQuery Masonryというプラグインだ！ @planetofgoriさんのブログで紹介されているように、jQuery Masonryというプラグインが使われています。このプラグインたった数行でNHKのサイトのような可変グリッドレイアウトが作れてしまいます。可変グリッドのレイア
スマートフォン向けフレームワーク注目の「jQuery Mobile」でスマホサイトを作ってみよう【基本編】 | HTML5でサイトをつくろう
jQuery Mobileってなに？ jQuery Mobileは、javascriptのフレームワークです。スマートフォン向けの直観的で使いやすいUIを瞬時に作成できます。 JavaScriptをWebデザイナーでも扱える身近な存在に変えた「jQuery」。そのjQueryと同じ開発元からリリースされていることもあって、スマートフォン向けフレームワークとして注目のjQuery Mobile、文法はjQueryとまったく同じですのでためしにサンプルを作ってみました。 jQuery Mobileは、解像度の違いなど、デバイスの特性の違いも吸収してくれるというのが最大の強みになっていて、ほとんど全ての機種に対応しています。そのため制作者は悩み所だったデバイスの違いを気にすることなく、スマートフォンサイトを作成できてしまいます！iOSやAndroidなどのWebKitベースのスマートフォンだけで
あなたの作業を音速にするかもしれないWEB屋の作業スピードを上げるチートシート大量紹介 | バンクーバーのうぇぶ屋
このブログがフロントに関する記事が多いもんだから、たまにデザイナーと呼ばれることがあるんですが、僕は業務としてはデザインよか制作ディレクションの方がどちらかと言えばメインなんですよね。 そんなディレクターとしての役割の一つに、周りにいる優れたデザイナーやプログラマー、デベロッパーの業務効率を考えることが挙げられます。 何を取るわけでもなく中途半端な僕ですが、ディレクターとして周りの各プロフェッショナルの役に少しでも立てればと、そして制作する上での効率を向上させるべく色々情報収集をする中で、よくチートシートの存在を目にします。（チートシートってどれだけ普及してるのかわかりませんが、つまりカンニングペーパーのことらしいです。） WEB屋にとってのチートシートって、どれだけ優れた技術力やデザイン力を持っていても、何かしら新しい発見がある物ですよね。以前書かせてもらった時間の価値は人によって違う！
jQuery Mobile が必須スキルになる！と思うのでこれから勉強する際に参考になる記事まとめ | バシャログ。
Adobe の Creative Suite 5.5 が発表になりましたね。 Dreamweaver の進化っぷりが凄まじいです。マジで。 HTML5+CSS3への対応が目に付きますが、個人的にはjQuery MobileとPhoneGapフレームワークの導入に注目します。 アプリ開発はこれまで、Objective-Cやjavaが主流でしたがDreamweaverでアプリへの書き出しまで出来てしまうなんて…。今後、モバイルアプリケーションの統合開発環境のデファクトスタンダードになる予感が。 ってことで、まずはjQuery Mobileを理解せねば！ jQery Mobile についてはまだ書籍はあまりなく洋書しかありませんでしたので、参考になる記事を取り上げてみます。 http://jquerymobile.com/ 本家サイト jQuery Mobile Gallery http://w
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Sequence.js - The responsive CSS animation framework
ウェブ制作者に必ず役立つ！iOS, HTML5, CSS, jQuery, WordPress, .htaccessなどのチートシートのまとめ
html5-memo.com
Redirecting