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