Web制作者はブックマークしておくと便利！HTMLやCSSやOGPやTwitterカードなどのコードを生成できるオンラインサービスCSSの面倒なコード、アニメーションやグラデーションやシャドウなど、表示結果を見ながらコードを生成でき、HTML5のよく使うスニペットや新要素、MetaタグやOGPやTwitterカードなどのコードを簡単に生成できるオンラインサービスを紹介します。 こういったコード生成は探せば見つかるかもしれませんが、まとまってると便利ですね。
UIの新鮮なアイデアをチェック！デザインやインタラクションの工夫が素晴らしいナビゲーションのまとめ
最近のUIは、気持ちいいアニメーションが多く取り入れられています。アニメーションはある程度予測できながらも、いい意味で少し期待を裏切るくらいがちょうどいいなと思います。 アニメーションを使ったインタラクションやデザインが素晴らしいナビゲーションの実装例をまとめました。各デモは全て、HTML, CSS, JavaScriptなどをオンラインで編集することができます。
モダンでかっこいいページ遷移アニメーションサンプル:phpspot開発日誌
Animated Page Transition in Ajax | CodyHouse モダンでかっこいいページ遷移アニメーションサンプル。 ページを切り替える際にアニメーション付きでコンテンツを切り替えるデモです。 URLも変わるのですがそれを全く意識させないアニメーションが地味に凄いです。 関連エントリ CSS＆jQueryで作るパネル型の3Dナビゲーション作成サンプル フルスクリーンでタッチデバイスでも使いやすいナビゲーションメニュー実装 Parallaxで写真等を立体的に表現するデモ クールでモダンなコンタクトフォームのデモ＆サンプルスクリプト
LetterFX jQuery Plugin | TuxSudo Web Development
LetterFx jQuery Plugin A jQuery plugin to apply animated visual effects to text - letters, words & custom patterns. LetterFx works by temporarily injecting markup into the text of an $("element") and sequentially adding & removing transition-based CSS classes. Please use responsibly. demo: 1 2 3 4 5 6 7
スクロールで表示範囲に入った際のアニメーションをコードレスで簡単に記述できる「scrollReveal」:phpspot開発日誌
scrollReveal.js スクロールで表示範囲に入った際のアニメーションをコードレスで簡単に記述できる「scrollReveal」 デモページでは、スクロールしていくと要素がそれぞれにアニメーションするクールなデモが見れます 実装には次のように、data-scrollrevelにルールに沿った文字列を渡すだけで、複雑なJSコードは不要です。 関連エントリ スクロール後、ナビゲーションをページトップに固定するjQueryプラグイン「stickUp」 スクロールに連動するパララックスな星空背景を実装できるjQueryプラグイン「Starscroll」 ページを水平にパララックスしつつスクロールさせられるjQueryプラグイン「jInvertScroll」 スクロールしてもブロックを固定位置に表示させられるjQueryプラグイン「Sticky-Kit」 要素をスクロール中に自動で固定する「
チェックボックスやラジオボタンはチェック時にアニメーションした方が分かりやすい、と分かるデモ:phpspot開発日誌
チェックボックスやラジオボタンはチェック時にアニメーションした方が分かりやすい、と分かるデモ 2013年10月25日- Animated Checkboxes and Radio Buttons with SVG | Codrops チェックボックスやラジオボタンはチェック時にアニメーションした方が分かりやすい、と分かるデモ。 チェック、ラジオをチェックするときは瞬時にチェック状態に変わってしまうのが当たり前ですが、アニメーションした方がもっとオシャレで”ちゃんと”チェックした気になります。 デモ 分かりやすいのは実際に紙でチェックするときの感じに近いからでしょうか。 なんとなく、ひと味違う感をサイトに持たせたい方は参考にしてみてもよさそう 関連エントリ チェックボックス、ラジオボタンをクールにデザインできるjQueryプラグイン「iCheck.js」 好みのチェックボックスのデザインが簡
【Ninja】jQueryとCSS3アニメーションで作る何度もクリックしたくなる「ページトップ」ボタン / SQUEEZE - Web Design Studio -
前回の記事『Webデザインの参考にしたい遊び心あふれる「ページトップ」ボタン9個』にならって、jQueryとCSS3アニメーションを使って遊び心あふれる何度もクリックしたくなる「ページトップ」ボタン作成してみました。 Ninjaページトップボタンブックマークバーとスクロールアニメーションを活かしたページトップボタンにしてみました。サンプルページをご覧ください。 サンプルページ » 忍者登場はCSSスプライトアニメーションコマ送りでアニメーションさせるため、1枚のPNG画像に32px×32pxの絵を10個並べました。マウスオーバーした時に、X軸方向に-32pxずつ背景画像がずれることでアニメーションしているように見えます。 .ninja{ display:block; width:32px; height:32px; background:url(images/ninja.png) no-r
アニメーションでエンジンの仕組みを解説する「How A Car Engine Works」
よくできた道具や機械というのは仕組みを知らなくても役に立つものですが、いちどそのメカニズムを目の当たりにすると目を奪われて感動することもあります。そんな機械の一つである自動車の「エンジン」の仕組みを、アニメーションを含めたインフォグラフィックで紹介してくれているサイトがあり、眺めているだけでも面白い内容になっています。 How A Car Engine Works (animated infographic) http://jacoboneal.com/car-engine/ このサイトを作成したのは、クリエイター/デザイナーのジェイコブ・オニールさん。10代のころに目にしたインフォグラフィックの世界に魅せられてデザインを始めたそうです。 インフォグラフィックといえば、多くの情報を詰め込んだ静止画になっていることが多いですが、オニールさんが作ったものはアニメーションになっているのが特徴です
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Dynamics.js
CSSの実用的なテクニックから素晴らしいアイデアまで！スタイルシートの最新テクニックのまとめ
制作案件に使えば注目度アップ！CSS3を使った驚きのアニメーション表現