Effeckt.css
From Below From Above Slide In (top) Slide In (right) Slide In (bottom) Slide In (left) Newspaper Side Fall Sticky Up 3D Flip (horizontal) 3D Flip (vertical) 3D Sign Fade In 3D Slit 3D Rotate Bottom 3D Rotate In Left Blur Let Me In Make Way! Deep Content Slip From Top From Top, Tilt Fall From Top to Bottom From Bottom to Top From Left to Right From Right to Left From Above to Below From Below to A
2015年、Web制作者が押さえておきたいCSSの各種リセット、アニメーション、フレームワーク、アイコンのまとめ
制作時に欠かせないリセット用のCSS、ページのグリッドやレイアウト・コンポーネントが用意されたフレームワーク、クリック・タップやホバーやスクロールを楽しませるアニメーション、モバイルにもフレンドリーなCSSでつくられたアイコンなど、ゼロから用意するのはかなり大変なCSSの便利なフレームワークを紹介します。 リセット用のCSSはこの3種類 レスポンシブ対応の定番フレームワーク Material Designに対応したフレームワーク さまざまなアニメーションが簡単に実装できるCSS かわいいアニメーションを使ったローダー 使いやすいアイコンフォント・Pure CSSのアイコン リセット用のCSSはこの3種類 HTMLの各要素のブラウザごとに異なる差異をなくし、意図した通りに実装できるようスタイルをリセットするスタイルシート。 Reset CSS 2.0 HTMLの各要素のmarginやpadd
真似したい!使いたい!オシャレなCSSテキストエフェクト31個 | 楽天ティップスRakutenTips
CSS 3 Transform Experiment CSS3トランスフォームを使ったpure CSSトリック。モダンブラウザ＆IE9＋みたいなので使うサイトは選ぶかなっと。 Animated Text Fill javascriptを使わずcssアニメーションでストライプを表現したテキストエフェクト Text Animation 見出しに追加して置きたいアニメーション Elastic Stroke CSS + SVG SVGを使ったカラフルなテキストアニメーション Fun With CSS Text-Shadow イベント時などに使いたいテキストシャドーを使ったインパクトあるポップなテキストエフェクト Box-bubble Cutout in CSS 写真にフィルターを掛けた背景に合わせた日付入りボックス Fly in, fly out JS &CSSで実装するアニメーション Maske
アニメーションのエフェクトを巧く取りいれたウェブサイトのまとめ
アニメーションのエフェクトをダイナミックに、またはさりげなく取りいれたウェブサイトを紹介します。 Joshua Sortino hanging up the moon Jessica Caldwell
進化が止まらない！CSS3アニメーションを簡単に利用できるスクリプトやスタイルシートのまとめ
スクロールをトリガーに要素をアニメーションで表示したり、ページを表示した時にちょっとしたエフェクトを加えたり、ボタンのホバー時に気持ちいいアニメーションを加えたり、CSS3のアニメーションを簡単に加えることができるリソースを紹介します。 Story Box Story Box -GitHub スクロールをトリガーに54種類のアニメーションを簡単に実装できるjQueryのプラグイン。アニメーションは非常に軽快で、デモ：ユニークの派手なアニメーションでも快適です。 ScrollMagic ScrollMagic -GitHub Appleのプロダクトページのように次々に要素を表示したり、簡単にパララックスを加えたり、特定の要素をスクロール時にピンで留めて表示したりなど、スクロール系のエフェクトは全部できてしまう感じです。 スマフォなどレスポンシブ対応はもちろん、水平スクロール、無限スクロール、
Ui General Blog
Are you searching Free Guest Posting Submission Site? Before you submit, check out this list of guidelines to make sure your post is up to par. By following these simple tips, you can increase your chances of having your guest post accepted - and make a great impression on the blog's regular readers.> No one's life is as perfect as it seems on social media. So next time you're feeling down, rememb
今風になった！Web制作で使える最近のjQueryプラグインまとめ
作成：2014/10/14 更新：2014/11/01 Web制作 > 比較的最近のプラグインで、今風の動きをするものなど、制作前に知っておくと助かるjQueryプラグインをまとめました。国内のサイトであまり取り入れてないようなものや、定番のものまで。ページにちょっとした工夫を凝らしたいときや、少しめずらしい仕掛けでキャンペーンサイトを作りたいときに。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 動き １．ジオメトリック 背景 ２．フルスクリーンでスライドさせる ３．ドロアー風ライトボックス ４．動画を再生するタイプ３つ スクロール ５．スクロールでクロスフェード ６．スクロールで奥行きを表現 ７．スクロールで分割 画像 ８．APNG ９．Google 画像検索風ライトボックス １０．トイカメラ風のフィルター ポップアップ １１．おしゃれなアラート １２．
感性を鍛えよう！動きが気持ちいいUIアニメーションまとめ
こんにちは。MUUUUU.ORGの中の人こと、 Quoitworks（クオートワークス）のムラマツ（マツムラではありません）です。 ブラウザの進化により昨今のwebサイトでは色々なアニメーションが実装できるようになってきました。そこで今回は動きに対する感性を磨き、「もっと気持ち良い感じに」というクライアントの要望をスマートにかなえる事ができるように、 セクシーだと思ったUIアニメーションを、エイヤエイヤとまとめてみました。（すみません！サイト負荷が高くサーバーがダウンしてしまうので、一部リンクのみになってます） line25.com https://dribbble.com/shots/1448379-Lookbook-nu-app https://medium.com/ui-ux-articles/3d1b0a9b810e http://thedesigninspiration.com/
IE9+ならスクリプト無しで、タブやカルーセルなどさまざまなコンポーネントがスタイルシートで実装できる -Pure CSS Components
最近のウェブページでよく見かけるカルーセル、アコーディオン、ドロップダウン、モーダルウインドウ、タブコンテンツなど、さまざまなコンポーネントをHTML5+CSS3で実装するライブラリを紹介します。 HTML5の「aria-hidden属性」とラジオボタン・チェックボックスをうまく使い、スクリプト無しで実装されています。 Pure CSS Components Pure CSS Components -GitHub ダウンロードできるCSSファイルには、通常のスタイルシートのほかにLESS版も含まれています。 Pure CSSで実装するカルーセル Pure CSSで実装するアコーディオン Pure CSSで実装するドロップダウン Pure CSSで実装するモーダルウインドウ Pure CSSで実装するタブコンテンツ 各コンテンツはHTML5対応ブラウザ、IEは9+でご覧ください。 Pure
capptivate.co is coming soon
is a totally awesome idea still being worked on. Check back later.
見ないと損する便利なデザイナー向けWebサービス13選 | SONICMOOV LAB
こんにちは。 緑のにおいが気持ち良い季節になってきましたね。3月4月は花粉で涙をボロボロ流しながら生活していたのですが、やっと思う存分散歩ができそうです。 さっそくですが、デザイナー・クリエイターのみなさんは、自分の作品やスキルをアピールするために普段どのようなツールを使っているでしょうか？ 現在さまざまなWebサービスが出ており、うまく利用できれば活動や交流の幅が広がるはず！ そう思って今回はクリエイター向けのサービスをいくつかまとめました。 目次 UIアニメーションのヒントに ちょっとしたアニメーションを作るときに参考にしています。動きを眺めるだけでも面白く、インスピレーションがわきます。 CAPPTIVATE.co iPhoneアプリのUIアニメーションをカテゴリ別に紹介しています。マウスオンでアニメーションが確認でき、アプリのデザインやUIアニメーションなど、アプリ開発に大変役立ち
[CSS]画像にキャプションをさまざまなCSS3アニメーションで表示するスタイルシート、コピペで簡単に利用できます -iHover
デモページ：スクエア iHoverの使い方 Step 1: 外部ファイル 当スタイルシートを外部ファイルとして記述します。 ※スクリプトは不要です。 <head> ... <link href="styles/ihover.css" rel="stylesheet"> </head> Step 2: HTML 基本的にはノーマル時に表示するサークル（スクエア）とホバー時のものをdivで内包します。細かい点が各デモごとに異なるので、それぞれのデモページを参考にしてください。 Effect 1だと、こんな感じです。 <div class="row"> <div class="col-sm-6"> <!-- normal --> <div class="ih-item circle effect1"><a href="#"> <div class="spinner"></div> <div cl
ウェブ制作者はチェックしておきたい、面白いアイデアを使った最近のウェブサイトのまとめ
デザインの細かいところまでこだわりが！ こんな発想はどこから生まれるの？ そんな次のプロジェクトのヒントになるような面白いアイデア満載のウェブサイトを紹介します。 時間のある時にじっくり楽しんでください！
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
AniCollection - The easiest way to find, use and share CSS3 animations.
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
Redirecting to Animate.css
SVGを使ってウェブページにかっこいいエフェクトを与えるチュートリアルのまとめ
Loading...
motions.me
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
