Web筋トレも使っているサーバー!ロリポップを使ってみない?

【初心者向け】プロのLP(コーディング)を解説★jsアニメーションを解析〜第2回

Sponser Link

こんにちは。

前回は『いいLP(サイト)だな。どうやって作ってるんだろう?』

と思った時に自分のローカルに保存して、

構造なり、ギミックなりをじっくり

勉強できるようにする方法をご紹介しました。

【初心者向け】プロのLPのコーディングを保存してじっくり勉強する方法

 

今回は前回の続きで、

プレビューで画像は見えるようになりましたが、

アニメーションが動かないままです。

これを動くようにしていきます。

 

今回もたまたま見つけた下記のLPの分析をしていきます。

https://lp.botanistofficial.com/lp/bota-bodysoap-01/

ほむほむ

たまたま見つけたのであって、回し者ではございません。。。

Sponser Link

①説明文アニメーションの解析

まずは説明文アニメーションの動きを分析

画面が表示されたタイミングで、

一度、ベタ塗りのバーが左から出てきて、、、

バーが右に消えていき、文字(画像)が表示されます。

ページが更新されるとまた同じ動きをします。

更新されなければ、スクロールしても同じ動きはしません。

See the Pen
LP Description animation
by studio-0 (@studio-0)
on CodePen.

説明文アニメーションのHTML

2本のバーはそれぞれ<li>だということがわかりました。

説明文アニメーションのJavaScript

次にjsをみていきましょう。

ページが更新されるまで同じ動きはしないので、

jsでaddClassをしてるのかな。と予想ができます。

すると、doneが怪しいと推察できます。

にしてみます。動きました!

しかし、バーが左から出てきて、

右に消えていく動きが正解ですが、

最初からバーがあり、それが右に消えていく動きになりました。

ほむほむ

といことは、showが怪しいですね!

これで正解の動きになりました。

 

前回、ファイルを保存した時にはアニメーションが終わっていたので、

showとdoneがついた状態のHTMLを保存したことが原因だとわかります。

HTMLファイルにあるshowとdoneは全て削除しましょう。

すると、jsが反応してアニメーションが動きます。

動いたあと、ソースを見るとshowとdoneがついています。

他に2ヶ所ありました。

 

showとdoneをaddする指示はどこに書いてあるのでしょうか?

script.jsに書いてありました。

ほむほむ

ウィンドウの下から100pxに要素がきたら、

showクラスをaddしてね。

(バーが左から出てくる)

0.5秒後にdoneクラスをaddしてね。

(バーが右に消えていく)

と書いてあります。

説明文アニメーションのCSS

deepmoist.cssに記述がありました。

showクラスが付く前の状態です。

showクラスがついた時のcssです。

見やすいようにベンダープレフィックスは消しました。

茶色いバーが左から出てくるアニメーションです。

X軸が−101%から0になることで動いています。

doneクラスがついた時のcssです。

見やすいようにベンダープレフィックスは消しました。

茶色いバーが右に消えていくアニメーションです。

X軸が0から103%になることで動いています。

Sponser Link

②スマホのみ表示の追従バナーの解析

追従バナーの動きを分析

最初は追従バナーはありません。

ある程度スクロールするとウィンドウ最下部にバナーが表示されます。

ページ下部にあるカートにページ内リンクしてます。

スクロールを続けると追従バナーが消えます。

ページ下部のカートに近づいて、

リンクさせる必要がなくなるからです。

See the Pen
dyoQVPB
by studio-0 (@studio-0)
on CodePen.

追従バナーのHTML

追従バナーが非表示の時のHTMLです。
追従バナーが表示されている時のHTMLです。
is-showが追加されています。

追従バナーのjs

script.jsに書いてありました。

cv_area < scroll かつscroll < kago_areaだったら、

is-showクラスをaddして、

追従バナーを表示すると書いてあります。

cv_area < scroll は

『#cv_top』がスクロールした画面の下から1/4に表示されたら、

という意味です。

scroll < kago_area は

『#cart』がスクロールした画面の下から1/4に表示されてなかったら、

という意味になります。

cv_area >= scroll または kago_area <= scrollだったら、

is-showクラスをremoveして、

追従バナーを非表示にすると書いてあります。

表示する場合の反対の条件ということになります。

追従バナーのCSS

common_3.cssに記述がありました。

表示条件を満たすまで、

非表示になっているということです。

Sponser Link

まとめ

前回はLPの構造を分析する方法、

今回はLPの中にある2つのjs、css3の解説をしてきました。

次回もjs、css3の解説の続きをしていきます!

ここまでお付き合いくださりありがとうございました〜!

【初心者向け】プロのLP(コーディング)を解説★jsアニメーションを解析〜第2回
Sponser Link

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA