コラボウォッチのLP
昨日はnoteを更新できなかった・・・!せっかく5日連続投稿できてたのに残念。でも三日坊主にならなかった自分を褒めてあげたい!
今日は大好きなスターウォーズとコラボした時計のCITIZENのLP。12月のエピソード9もめっちゃ楽しみ!ということで早速レビューしていきます。
・まず現れるライトセーバー、そしてキャッチコピーやロゴとダース・ベイダーがゆっくり現れるエフェクトがかっこいい。ライトセーバーが描かれている部分のコード、canvasタグというのを初めて知った。参考:https://techacademy.jp/magazine/12576
・全体的にスクロール が遅くなっている。この辺りかな?参考:https://arutega.jp/scroll-speed/
・時計の部分までスクロールするとキラッと盤面が光るエフェクト。
・時計にカーソルを合わせるとカーソルに合わせて時計も動く!
・ボタンのhoverで文字間が広がるのは新しい気がする
・スクロールしていくと各セクションのタイトル上ににゅっと現れる縦線はcssのアニメーションを使用
アニメーションやパララックスを効果的に使っているLPだと思いました!cssアニメーションとかほとんど勉強してないから勉強しよう。
この記事が気に入ったらサポートをしてみませんか?