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







関連記事

Advanced Custom Fieldsの設定が保存されない時の対処法

お手軽にカスタムフィールドを作成できるWordPressプラグイン「Advanced Custom Fields」 いつも通りフィールドを追加して保存したはずなのに、何故か追加したフィールドが反映され …

1つのメールアドレスでWordPressに複数ユーザーを作成する方法

仕事でクライアントから50人以上のユーザーを登録しなくてはならないサイト制作を依頼されました。 複数の店舗がそのサイトにそれぞれの情報を登録していくタイプのWEBサイトですね。 しかし、WordPre …

WordPressでユーザーを一括登録する「Import Users from CSV」の使い方

WordPressを複数のユーザーで管理したい時、1人ずつ登録するのは大変だと思います。 そんな時はWordPressのプラグイン「Import Users from CSV」を使って効率化しましょう …

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

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

Dreamweaver CCのCSSクイック編集が便利すぎた件

最近、以前Dreamweaverで作成した静的なHTMLのサイトを更新する機会があったので久々にDreamweaverを使いました。 Adobeに登録しているのでバージョンはDreamweaver C …

この記事をシェアする

ranking人気の記事

plofileプロフィール

運営者:ERA
職業:WEBクリエイター
趣味:ゲーム
仕事中はずっとパソコン、家に帰るとずっとゲームをして1日中ブルーライトを浴び続ける生活をしています。
詳細はこちら