ゲーム大好き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にログインしてない人も記事を投稿できるようにしてよ」と言われました。 今までそんな事はやったことなかったのですが、お得意様なのでしぶしぶと快く引き受けました。 とり …

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

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

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

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

パソコン画面の操作をキャプチャしてGIFアニメにする方法

最近仕事でよく使うフリーソフト「LICEcap」を紹介します。 LICEcapはパソコン画面での操作をアニメーションとしてGIF画像で保存できる、便利なフリーソフトです。 仕事でWEBサイトを作り、W …

ブログが不正アクセスされそうになりました…【SiteGuardで対策】

WordPressに不審なアクセスを発見…! このブログはWordPressで運営しておりまして、 管理画面にアクセスするにはユーザー名・パスワードが必要なのですが… ふとログイン履歴を確認してみると …


コメント

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

CAPTCHA