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







関連記事

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

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

WordPressの記事複製プラグイン「Duplicate Post」が便利すぎた。

仕事でWordPressを使っていると更新作業の時、全く同じ記事を複製する場面があります。 WordPressでWEB制作している人なら恐らく経験があるんじゃないかと思います。 わざわざ新規ページを作 …

【2019年】ロリポップと比較してさくらのレンタルサーバが1歩リードか

安くてお手軽なサーバーとして比較されがちなさくらのレンタルサーバとロリポップ。 どちらも2016年あたりから2018年までに、かなり性能がアップしている印象がある。 特に昔のロリポップは「安かろう悪か …

PDFのパスワード解除方法が簡単すぎた

クライアントから頂いたPDFデータにパスワードがかかっていたときの話。 仕事で、別の制作会社が作成したPDFをもらう時がたまにあります。 PDFにロックをかけて、データの編集や抜き取りを防ぐんですが、 …

Microsoft Edgeを使うメリットはあるのだろうか

Microsoft Edgeとは Internet Explorerに代わり、Windows10で登場した標準ブラウザ。 新機能が追加され、IEと比べると読み込み速度の高速化・セキュリティの強化が行わ …

この記事をシェアする