スクリーンショット_2019-11-23_14

コラボウォッチのLP

昨日はnoteを更新できなかった・・・!せっかく5日連続投稿できてたのに残念。でも三日坊主にならなかった自分を褒めてあげたい!

今日は大好きなスターウォーズとコラボした時計のCITIZENのLP。12月のエピソード9もめっちゃ楽しみ!ということで早速レビューしていきます。

・まず現れるライトセーバー、そしてキャッチコピーやロゴとダース・ベイダーがゆっくり現れるエフェクトがかっこいい。ライトセーバーが描かれている部分のコード、canvasタグというのを初めて知った。参考:https://techacademy.jp/magazine/12576
・全体的にスクロール が遅くなっている。この辺りかな?参考:https://arutega.jp/scroll-speed/
・時計の部分までスクロールするとキラッと盤面が光るエフェクト。
・時計にカーソルを合わせるとカーソルに合わせて時計も動く!
・ボタンのhoverで文字間が広がるのは新しい気がする
・スクロールしていくと各セクションのタイトル上ににゅっと現れる縦線はcssのアニメーションを使用

アニメーションやパララックスを効果的に使っているLPだと思いました!cssアニメーションとかほとんど勉強してないから勉強しよう。

この記事が気に入ったらサポートをしてみませんか?