🧠
インプットとアウトプットのPDCA📝💡⚙️
お問合せ

ウニョウニョ動くロゴアニメーションをCSSとJavaScriptで作る

プロドウガ開発者

共有

# ウニョウニョ動くロゴアニメーションをCSSとJavaScriptで作る

HTMLとCSS、それにJavaScriptを使って、ロゴをウニョウニョ動かすアニメーションを実装する方法を紹介します。

HTMLでロゴをSpanでラップ

まずHTMLではロゴのテキストをSpanタグで文字ごとにラップします。

<p>
  <span>P</span>
  <span>r</span>
  <span>o</span>
  <!-- 中略 --> 
</p>

このSpanに対して個別にアニメーションを適用していきます。

CSSでアニメーションを指定

CSSでは@keyframesを使って、font-variation-settingsプロパティを変化させるアニメーションを定義します。

@keyframes breath {
  0% {
    font-variation-settings: "wght" var(--min); 
  }

  100% {
    font-variation-settings: "wght" var(--max);
  }
}

各Spanタグにこのアニメーションを適用することで、ウニョウニョ効果を実現できます。

JavaScriptでタイミングをずらす

そしてJavaScriptを使って各文字のアニメーションタイミングをずらします。

span.style.animationDelay = i * 0.5 + 's';

これにより文字ごとに遅延が入り、なめらかな動きになります。

できあがり!

このようにHTML/CSS/JSを組み合わせることで、程よいモーションを持ったロゴアニメを作ることができます。モダンなWebサイト制作に役立ててください。

共有

🌐公式サイト