Webサイト刷新(メインビジュアル編)

こんにちは！
第二回目は、メインビジュアルを進めていきます。

前回はこちら

メインビジュアルは、サイトの顔となるので、しっかり考えないといけないところですが、
考えるより先に手を動かす方が結果的に良い方向に持っていけるので、まずは簡単に作成できる方法を試してみました

準備

SVGをアニメーションしたいので、まず素材となるSVGを探します。

「svg 無料」で検索すると商用利用もOKなライセンスがありました。

同じように「svgアニメーション ジェネレーター」で検索すると、
「SVG Artista」が紹介されており、簡単にアニメーションができそうでした。
(ライセンスはMITです)

利用

次にFigmaで気に入ったSVGを並べて、グループ化をしたのちSVGでエクスポートします。
「SVG Artista」でSVGを開くと、それらしいアニメーションを自動的に設定してくれます。

FILL ANIMATIONでアニメーションの開始や変化の時間をお好みで設定します。

実装

「SVG Artista」の右上のGET CODEからSVGのコードを取得して、Vueファイルに張り付けてコンポーネント化します。

MainVisula.vue

<template>
    <svg>
      ...
    </ svg>
</ template>
<style scoped>
/***************************************************
 * Generated by SVG Artista on 6/21/2024, 12:40:55 AM
 * MIT license (https://opensource.org/licenses/MIT)
 * W. https://svgartista.net
 **************************************************/
@-webkit-keyframes animate-svg-fill-1 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(242, 242, 242);
  }
}
// ...
 </style>

default.vueでTOP画面を実装しているので、MainVisual.vueを入れ込みます。

default.vue

<v-main>
  <div v-if="isTop" class="py-4 main-svg-area">
    <MainVisual />
  </div>
  <!-- 省略 -->
</v-main>
<style scoped>
.main-svg-area {
  background: rgb(34, 193, 195);
  background: linear-gradient(
    0deg,
    rgba(34, 193, 195, 1) 0%,
    rgba(253, 187, 45, 1) 100%
  );
}
</style>

背景に前回決めたカラーパターンを適用しています。

完成

gifで画質が荒いですけど、実際は綺麗に表示されています😁