LPにCSSアニメーションをつけてみた

こんにちは。

現在ダイエット中の原口です。
絶対痩せるぞ2021！

さて、今回はスペースマーケットのLPにCSSでアニメーションをつけてみた、という話になります。

なぜつけようと思ったか？

完全に個人的な理由になってしまうのですが、久しぶりにCSSアニメーションを作成したかったからです。笑

自分が以前勤めていたのWeb制作会社ではCSSアニメーションを採用することが多く、個人的にもCSSアニメーションは好きだったので楽しんで実装していました。

スペースマーケットでは今までCSSアニメーションを実装する機会がなかったのですが、「久しぶりにCSSアニメーションを作りたいな〜」と考えていたところ、去年末にリリースされたロイヤリティプログラムというPJに関わる機会があり、そこで作られたLPにCSSアニメーションを取り入れることができそうだったため、久しぶりにチャレンジしてみました。

アニメーションを追加したページはこちらです。

どうやっているか

ライブラリなどは使用せず、全てCSSのtransitonプロパティとanimationプロパティのみで実装しています。

前職の時はjQueryを利用していたので、DOMに対しclassを付与して、アニメーションを実装していましたが、スペースマーケットではjQueryは使用しておらずコンポーネントがReactで作られていることや、今回は全体のアニメーションが短いということもあり、シンプルにCSSのみでアニメーションを作成しました。

コードはこんな感じになります。

// Container
const RewardsMainVisual = () => {
 const [start, setStart] = useState(false)
 useEffect(() => {
   setStart(true)
 }, [])
 return <Presenter.RewardsMainVisual start={start} />
}

// Presenter
<StyledThumbnail>
 <StyledCoinPoint animation={start}>
   <Image src="coin1.png" alt="コイン" />
 </StyledCoinPoint>
 <StyledCoinLogo animation={start}>
   <Image src="coin2.png" alt="コイン" />
 </StyledCoinLogo>
</StyledThumbnail>

// Style
const StyledCoinPoint = styled.div`
 transition-duration: 0.3s;
 transition-delay: 1.8s;
 transform: rotate(-10deg);
 opacity: 0;
 transform: rotate(-10deg) translate(62px, 39px);
 ${props =>
   props.animation &&
   `
     opacity: 1;
     transform: rotate(0deg) translate(10px, 47px);
   `}
`

基本的にはtransitionプロパティでアニメーションを作成しており、最後の星が回転する動きだけanimationプロパティを使用しています。

動きをつけたい要素に対し、transition-durationを指定しておき、props.animation がtrueになったタイミングでスタイルの値を変更し、アニメーションを開始させています。非常にシンプルですね。

動き出すタイミングは全てtransition-delayで調整しています。

実装する上で気をつけたこと

1. アニメーションの長さ

まずアニメーションが長くならないようにしました。メインビジュアルのアニメーションは3秒くらいが良いという話を聞いたことがあるので、3秒を意識して作りました。

が、初めは4.5秒くらいになってしまい、画面のレビュー時に少し長いと指摘をいただきました😇

2. アニメーションのスピード感

このプログラムが、
スペースマーケットを利用→ポイントをゲット→ランクをあげる！
というフローになるので、序盤の

Get points!
Upgrade!!

は、勢いを表現するために、テンポ良くスピーディにさせることを意識しました。

3. 細かなこだわり

気づきにくい部分ではありますが、細かい部分のアニメーションにもこだわりました。

例えば序盤のコインが表示される部分では、コインがスライドする際に少し回転を加えたり、SPACEMARKET Rewardsのタイトルが表示される際に、タイトルのy軸の値を少し引いてタイトルがせり上がるように見せたりしました。

アニメーションを作る上で便利なデバッグ方法

自分はchrome dev toolsのアニメーションタブをよく利用してアニメーションを作成します。

表示されない場合は左のメニューから表示できます。

これを開いた状態で、ページをリロードすると、

このようなアニメーションのタイムラインが表示されます。

簡単にではありますが、画面の説明です。

①アニメーションのスピードを変更できます。100% / 25% / 10% を選択し、再生ボタンを押すことで選択したスピードでアニメーションを再生することができます。

②クリックすることでアニメーションはじめから再生してくれます。全体の流れを確認したいときによく使用します。

③つまみを動かすことでアニメーションの再生位置を調整できます。細かな動きを確認するときによく使用します。

④動きを指定している要素名が表示されます。

アニメーション作成中は、ひたすらこのdev toolを使用し、確認→調整の繰り返してアニメーションを調整していきます。

最後に

今回追加したCSSアニメーションについて簡単にではありますが、説明させていただきました。

個人的には久しぶりにCSSアニメーションを実装することができて楽しかったです🙌

おすすめスペースの紹介

カタカタと娘の洋服を作る妻を横目に本記事を作成しましたので、ミシンが使えるスペースをまとめてみました！👗

ものづくりを楽しむスペース | スペースマーケット

採用について

スペースマーケットでは一緒にサービスを成長させてくれる仲間を募集しております。

我こそは！という方はお話だけでも結構ですので、是非ご応募お待ちしています。