『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年3月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材/配色やWeb制作といった最新トレンドも公開中。
昨今のWEBでは先進的な技術を使いユーザーを魅了するサイトが多いように感じます。 先日、リッチな動きとより良いユーザー・エクスペリエンスをあなたのサイトにプラスする方法と言うSmart Transitionの記事を書きましたが、その内容に近いユーザー・エクスペリエンスを向上させる方法です。 今日はWEBサイトで文字に動きを付ける方法をご紹介したいと思います。 WEBサイトで文字にリッチな動きを付けてみよう 目次 テキストデータにエフェクトを付ける方法 SVGで書き順をアニメーションする方法 おまけ:FlashファイルからSVGを作れるSwiffy テキストデータにエフェクトを付ける方法 まずは先人たちの作例を見てみましょう! Quoitworks Quoitworksさんのサイト、ページに入るとページタイトルがアニメーションします、カッコイイですね。 このようなエフェクトを実装するに
css3でアニメーションを使用するサイトが近頃増えてきました。背景としては、css3アニメーションのプロパティにほぼ対応しているスマホ端末の普及や、animationプロパティ未対応のIE9(IE6~IE8を含む)のシェアが低下してきていることが挙げられると思います。 つまり、css3アニメーションの対応ブラウザは「増加中」ということに他ならず、実装するサイトは更に増えていくのではないでしょうか。 今回は、そんなcss3アニメーションの実装時に参考できる22サイトを集めてみました! 1:丸型オブジェクトにピッタリのアニメーションギャラリー 丸型オブジェクトに対して、様々なホバーエフェクトを実装しています。 何気なくマウスオーバーした時にこんな動きがあれば、注意を引きつけられそうですね! http://tympanus.net/codrops/2013/05/30/simple-icon-h
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く