ゲームやWEB関係がメイン。まとまりのない雑記ブログ

WEB関係

【3分で完成】CSS3だけでSVGアニメーションロゴ作ってみた

投稿日:

あまりにも地味すぎて、気づいている人はいないかもしれないけど…このブログのロゴはSVGをアニメーションさせています。

ページを読み込んだ時、線を書くようなアニメーションでロゴが表示されます。

イラストレーターで文字を作ってsvgファイルを作成すれば、あとはそのコードをサイトに貼り付けてCSSを設定するだけ…簡単すぎる。

およそ3分もあれば作れてしまうSVGアニメーションを紹介します。

超シンプルなアニメーションなので、よく分からんがとりあえずSVGにアニメーションつけてみたい!という初心者向けです。

イラストレーターで文字を書く

①文字ツールで適当な文字を入力。

②文字をアウトライン化(忘れがち)。

③アートボードツールのオプションで、プリセットを「オブジェクト全体に合わせる」に設定。

④ファイル形式をSVGにして保存。

まずはこれでSVGファイルが完成しました。

コードをサイトに貼り付ける

①作成したSVGファイルをテキストエディタで開く。

②コード内のsvgタグをまるごとコピー(<svg>〜</svg>)

↓長ったらしいコードですが、svgから下を全部コピー。

③サイト内の表示したい箇所(HTMLファイル)にコピペした svgタグを貼り付ける。
貼り付ければイラレで作った文字がブラウザで表示されますが、この時点では当然動きません。

CSSでアニメーションを設定

とりあえず以下のコードをコピペしてCSSファイルに貼り付ければ動きます。
今回は面倒なのでsvgタグに直接スタイルを当ててますが、複数のsvgがある時に困るので、クラスは設定しておきましょう。

svg {
    width: 100px; /*svgのサイズ*/
    backface-visibility: hidden;
    transform: translateZ(0);
}
path {
    fill: none;
    stroke-dasharray: 3000;
    stroke-dashoffset: 3000;
    animation: WAROTA 1.5s ease-in 0.5s forwards;
    -webkit-animation:WAROTA 1.5s ease-in 0.5s forwards;
    stroke: #fff;
    stroke-width:0.8px;
}
@keyframes WAROTA {
    0% {
        stroke-dashoffset: 3000;
        fill: rgba(255, 255, 255, 0);
    }
    50% {
        stroke-dashoffset: 2000;
        fill: rgba(255, 255, 255, 0.5);
    }
    70% {
        stroke-dashoffset: 1000;
        fill: rgba(255, 255, 255, 0.8);
    }
    100% {
        stroke-dashoffset: 100;
        fill: rgba(255, 255, 255, 1);
        
    }
}

アニメーションはこんな感じで動きます。(右下のRerunで再生)

アニメーション以前に、こんな適当なロゴで大丈夫か? 
これを作ったのが現役のWEBデザイナーってマ?

 

☆ここでWEBデザイナーあるある!
ブログ作る前は調子に乗ってオリジナルデザインを作ろうとするが、いざ作り始めると面倒で結局無料テーマをインストール。その無料テーマをちょっとだけカスタマイズして終わる。
…あると思います。

まとめ

とりあえず超お手軽に実装できるSVGのアニメーション紹介でした。

今回作った文字のアニメーションは地味ですが、使いどころは意外とあります。

ページ内の重要な文言に使ったり、メインビジュアルの上に重ねたりしてシンプルながらもリッチなWEBサイトを表現できます。

文字ツールで作ったパスは単純で、コピペで使いまわして簡単にアニメーションが作れちゃうので、ちょっとWEBサイトに動きをつけたいときにオススメです。

いちいちSVGファイルを書き出す必要があるので、更新が多いブログの文章で使うには不向きです。







関連記事

ワイヤーフレームを作るならAdobe Compが超実用的【iPad・スマホ】

最近iPad Proを買ってから、ワイヤーフレームはずっとAdobe Compで作っています。便利すぎる。 Webサイトの制作を進める工程で、デザイン、コーディング、システム制作などがありますが、序盤 …

勉強せずにWebアナリスト検定に挑んだら難易度がヤバすぎた件

つい最近、「Webアナリスト検定」という試験を受けてきました。 いまさら資格なんていらないだろ…と思いつつも、会社から「金は出すから受けてこい」と言われたのでやむなし。 「Webアナリスト検定」とは、 …

新人のWEBデザイナーはまずProgateで勉強しよう

未経験で入社した新人WEBデザイナーへの教育で、HTML・CSSの基本から教えるのめんどくさいな〜まずは本を読んでもらおうかな…と悩んでいたとき、思い出した。 オンラインの学習サービス「Progate …

WordPress5.0へのアップデートはまだ待ったほうがよさそう

2018年12月6日にWordPressの最新バージョン5.0がリリースされました。 今回のメジャーアップデートはエディターが新しいものに変わるということで、注目していた人も多いと思いますが… やっぱ …

クリック率をアップさせるボタンはHTML+CSSだけで超簡単に作れます

Webサイトを作る時、ボタンのデザインは意外と重要です。 ボタンのデザイン次第でクリック率が変わってしまうのは、実際に身をもって体験しています。 ちょっと前まではPhotoshopでボタンを作ることが …

この記事をシェアする