ゲーム大好き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ファイルを書き出す必要があるので、更新が多いブログの文章で使うには不向きです。







この記事をシェアする

関連記事

WordPressで勝手に設定されるロゴのファビコンを消す方法

WordPressの最新バージョンをインストールすると、勝手にWordPressのロゴがファビコンに表示されるようになりました。 ↓こんな感じです…。   勝手にファビってんじゃねぇよ…。 …

サービス終了するけど、Wunderlistは超便利だった

無料でシンプルだけど便利な機能が一通りそろっているWunderlist。 サービス終了の発表が1年以上前にあったけど、未だに使い続けています。 使いやすく、デザインも良い。 今の会社に入ってからは、こ …

簡単にサイトマップを作れる「PS Auto Sitemap」の使い方

サイトマップを自動生成してくれるWordPressプラグイン「PS Auto Sitemap」。 一度設定すればあとは自動で記事を追加してくれるので、初心者だけでなく、WEB制作者もよく使っているプラ …

Atomのactivate power modeを使ってドヤる

Webデザイナーがコーディングするためには欠かせないエディタ。 同じ社内でも人によって使っているエディタが全然違う場合もあるでしょう。 社員A コーディングするならやはりDreamweaverです。 …

iPad版のPhotoshopが使いにくすぎて絶望した!「WEBデザイン無理です」

どうも、WEBデザイナー(笑)のERAです。 最近はPHPのプログラミングがメインですが、WEBデザインもひっそりと続けております。 iPad Proを持っているので、「せっかくならiPadでPSDデ …


コメント

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA