[B! *jQuery][*CSS3] yamadarのブックマーク

yamadar id:yamadar

jQueryとCSS3に関するyamadarのブックマーク (15)

進化が止まらない！CSS3アニメーションを簡単に利用できるスクリプトやスタイルシートのまとめ
スクロールをトリガーに要素をアニメーションで表示したり、ページを表示した時にちょっとしたエフェクトを加えたり、ボタンのホバー時に気持ちいいアニメーションを加えたり、CSS3のアニメーションを簡単に加えることができるリソースを紹介します。 Story Box Story Box -GitHub スクロールをトリガーに54種類のアニメーションを簡単に実装できるjQueryのプラグイン。アニメーションは非常に軽快で、デモ：ユニークの派手なアニメーションでも快適です。 ScrollMagic ScrollMagic -GitHub Appleのプロダクトページのように次々に要素を表示したり、簡単にパララックスを加えたり、特定の要素をスクロール時にピンで留めて表示したりなど、スクロール系のエフェクトは全部できてしまう感じです。スマフォなどレスポンシブ対応はもちろん、水平スクロール、無限スクロール、
yamadar 2015/02/06
*javascript

*CSS3

*jQuery

アニメーション
リンク
人気上昇中のJavaScriptライブラリを調べてみた［ジャンル別に比較］
連載 INDEX 次回 → こちらのページで︻2015年版︼も発表！ ■ 2014年が始まり、心機一転で﹁今年こそはWeb開発を頑張ろう﹂と思っている人も少なくないだろう。そんな方々に向けて本稿では、2013年中に人気が急上昇してきており、﹁2014年では必須の知識﹂となりそうなJavaScriptライブラリ︵Library︶をランキング形式で発表する。なお、本稿のランキング決定では、検索キーワードの流行を調査可能な﹁Googleトレンド﹂︵﹁すべての国﹂﹁過去12か月間﹂﹁すべてのカテゴリ﹂﹁ウェブ検索﹂という条件で絞り込み︶を使って、ライブラリの人気をジャンルごとに比較した︵※ライブラリ名が一般的な英単語の場合、Web検索時に、その英単語にもヒットしてしまう。このノイズがGoogleトレンドでの結果として入り込んでいる可能性が高いことをご了承いただきたい。各ジャンルは、筆者が独自
yamadar 2014/01/11
休日を利用してやってみようかな。

*javascript

フレームワーク

ライブラリ

**すばらしい

まとめ

**あとでやる

*CSS3

*jQuery

プログラミング

勉強
リンク
Sequence.js - The responsive CSS animation framework
For creating sliders, presentations, banners, and other step-based applications
yamadar 2013/11/27
レスポンシブ対応のシーケンスJS。JSで色々とアニメーション出来る。

デザイン

*CSS3

*javascript

*jQuery
リンク
びよ〜んと弾むのが気持ちいい！タブレット・スマフォで使いたいナビゲーション -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
yamadar 2013/09/28
動き部分はCSS3にまかせてあるので、軽快に動作しそう。

*CSS3

*jQuery

*javascript

UI

デザイン
リンク
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﹂から
yamadar 2013/04/21
*CSS3

*jQuery

デザイン
リンク
HTML5 × CSS3 × jQueryを真面目に勉強 – #17 Bootstrap をカスタマイズしてオリジナルテーマを作ってみた | DevelopersIO
トレンディ且つナウい Web ページを構築するための CSS フレームワーク︵※枠組み︶です。フレームワークというとなんだか大袈裟な響きですが、実態は単なる CSS と JavaScript という2つのテキストファイルだけで特別な使い方等もありません。利用者はこれらを HTML ファイルに読み込ませたのち、Bootstrap 側で既に定義済みのクラスを各 HTML 要素に指定するだけで、自分は一行も CSS を書くことなく高品質な Web ページが作れてしまったりします。 Twitter Bootstrap うろ覚えですが、2011年の夏頃に最初のメジャーバージョンがリリースされました *1。当時 Twitter のエンジニアで現在は Github にお勤め中の Mark Otto 氏によって開発され、2013年4月時点ではバージョン2.3.1が最新版となっています。またバージョン3.0
yamadar 2013/04/08
*CSS

*CSS3

フレームワーク

*jQuery

デザイン
リンク
HTML5 × CSS3 × jQueryを真面目に勉強 – #11 Path風サークルメニューを作ってみた | DevelopersIO
そんな訳で、写真共有SNSの一つであるPathにある、あのサークルメニューを再現してみたので、ここにその手順をまとめておくとします。 Pathはネイティブアプリなので、JavaないしObjective-Cにて実装されていますが、こちとらはそんなハイソなテクニックは使わずに、JavaScriptとCSS3だけで行けるところまで行ってみます。はじめにとりあえずサークルメニューの要件を大まかに書きだしてみました。トグルボタンをクリックしてメニューアイテムの表示/非表示を切り替えたい各メニューは円周上に均等に配置された状態で表示させたい表示/非表示はアニメーションで切り替わるようにしたいメニュー数の増減には柔軟に対応できるようにしたいその他、各メニューの間隔や角度、表示時の距離などはオプショで指定できるようにしたいひとまずこんなもんで良いでしょう。次にこれらの要件をどのように実装す
yamadar 2013/01/08
*CSS3

*jQuery

**これはすごい

UI
リンク
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
yamadar 2012/12/30
*CSS

*CSS3

*javascript

*jQuery

*HTML5
リンク
たった１行で完成？凄まじくレスポンシブデザインなサイトの作り方 | DECONCEPTER
簡単に作れる！みんな大好き可変グリッド先日話題になっていた﹁なんだこれ！！﹁NHKスタジオパーク﹂のレスポンシブ・ウェブデザインが凄まじくレスポンシブ！！﹂で紹介されていたNHKスタジオパークのレスポンシブデザイン。こちらのサイト、プラグインを使ってとてもシンプルに作られています。キレイ。このシンプルさを伝えたくてうずうずしてきました。せっかくうずうずしたのでどんな作り方をしているのかサンプルを交えて紹介します。まずはこちらのデモを御覧ください。凄まじくレスポンシブデザインなサイトデモ使われているのはjQuery Masonryというプラグインだ！ @planetofgoriさんのブログで紹介されているように、jQuery Masonryというプラグインが使われています。このプラグインたった数行でNHKのサイトのような可変グリッドレイアウトが作れてしまいます。可変グリッドのレイア
yamadar 2012/10/19
これは凄い。やってみよう。

*javascript

デザイン

*CSS3

*jQuery

**あとでやる
リンク
ウェブ制作者に必ず役立つ！iOS, HTML5, CSS, jQuery, WordPress, .htaccessなどのチートシートのまとめ
ウェブ制作、主にフロントエンドの開発者に役立つチートシートを紹介します。順番は、iOS, HTML5, CSS, jQuery, WordPress, .htaccess, Git です。 HTML5での美しいコードの書き方、Sass、Zen Coding、jQueryのパフォーマンス、Gitの使い方などもありますよ。
yamadar 2012/10/15
まとめ

チートシート

*javascript

*HTML5

*CSS3

*jQuery
リンク
html5-memo.com
yamadar 2012/04/19
*HTML5

*CSS3

*jQuery

android

mobile

iPhone
リンク
スマートフォン向けフレームワーク注目の「jQuery Mobile」でスマホサイトを作ってみよう【基本編】 | HTML5でサイトをつくろう
jQuery Mobileってなに？ jQuery Mobileは、javascriptのフレームワークです。スマートフォン向けの直観的で使いやすいUIを瞬時に作成できます。 JavaScriptをWebデザイナーでも扱える身近な存在に変えた﹁jQuery﹂。そのjQueryと同じ開発元からリリースされていることもあって、スマートフォン向けフレームワークとして注目のjQuery Mobile、文法はjQueryとまったく同じですのでためしにサンプルを作ってみました。 jQuery Mobileは、解像度の違いなど、デバイスの特性の違いも吸収してくれるというのが最大の強みになっていて、ほとんど全ての機種に対応しています。そのため制作者は悩み所だったデバイスの違いを気にすることなく、スマートフォンサイトを作成できてしまいます！iOSやAndroidなどのWebKitベースのスマートフォンだけで
yamadar 2011/12/08
**あとで読む

*CSS3

*HTML5

*jQuery
リンク
あなたの作業を音速にするかもしれないWEB屋の作業スピードを上げるチートシート大量紹介 | バンクーバーのうぇぶ屋
このブログがフロントに関する記事が多いもんだから、たまにデザイナーと呼ばれることがあるんですが、僕は業務としてはデザインよか制作ディレクションの方がどちらかと言えばメインなんですよね。そんなディレクターとしての役割の一つに、周りにいる優れたデザイナーやプログラマー、デベロッパーの業務効率を考えることが挙げられます。何を取るわけでもなく中途半端な僕ですが、ディレクターとして周りの各プロフェッショナルの役に少しでも立てればと、そして制作する上での効率を向上させるべく色々情報収集をする中で、よくチートシートの存在を目にします。︵チートシートってどれだけ普及してるのかわかりませんが、つまりカンニングペーパーのことらしいです。︶ WEB屋にとってのチートシートって、どれだけ優れた技術力やデザイン力を持っていても、何かしら新しい発見がある物ですよね。以前書かせてもらった時間の価値は人によって違う！
yamadar 2011/11/27
チートシート

まとめ

*jQuery

*javascript

*CSS3

デザイン
リンク
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
yamadar 2011/04/15
これは、、、買うべきか

*javascript

*HTML5

*CSS3

*jQuery

@Adobe
リンク
Redirecting
Redirecting... Click here if you are not redirected.
yamadar 2011/04/07
ｊQueryよりCSS3の書き方に注目。

*CSS3

*jQuery
リンク
1