【初心者向け】プロのLP（コーディング）を解説★CSS３とjsを解析〜第4回

こんにちは。ほむほむです。

たまたまWEB上で見かけたLPを解説・解析しながら、
プロのテクニックをご紹介しています。
今回は4回目になります。

今回が最終回になります！

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

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

【初心者向け】プロのLP（コーディング）を解説★CSS３とjsを解析〜第3回

今回は今までの集大成です！

第2回目の説明文を表示するアニメーションと

第3回目のAOS（jsプラグインを使った）の複合技です！

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

⑤横からスライドの画像の表示とAOS（jsプラグイン）

写真と円形画像の表示分析

動きを画像で確認していきましょう。

画面下部、黒いベタ塗りが出てきます。黒いベタ塗りが大きくなりました。

さらに下から円形の画像がフェードインしています。円形の画像がだんだんハッキリしてきました。
その下からもう一つ黒いベタと円形画像がフェードインしてきました。黒いベタが写真に変わっていきます。黒いベタが写真に変わっていきます。
写真と円形画像が表示されました。

テンポ良く表示されていきますね。

写真と円形画像の表示のHTML

写真と円形画像の表示の仕方を前回、前々回の復習もかねて分析していきましょう。

<section class="topics_area" id="topics_area">
<div class="inner">
<h1><img src="botanist_files/img/topics_ttl.png" alt=""></h1>
<h2><img src="botanist_files/img/topics_sub_ttl.png" alt=""></h2>
<div class="voice one">
.
.
.
</div>
<div class="voice two">
.
.
.
</div>
<div class="voice three">
<div class="js-scroll"><span class="motion-txt"><span class="motion-inner"><img src="botanist_files/img/topics_pic03.png" alt=""></span></span></div>
<img src="botanist_files/img/topics_voice03.png" alt="" data-aos="fade-up" class="aos-init">
</div>
<div class="voice four">
<div class="js-scroll"><span class="motion-txt"><span class="motion-inner"><img src="botanist_files/img/topics_pic04.png" alt=""></span></span></div>
<img src="botanist_files/img/topics_voice04.png" alt="" data-aos="fade-up" class="aos-init">
</div>
<div class="voice five">
.
.
.
</div>
</section>

写真１枚と円形画像１枚のセットのHTML

<div class="voice three"> 
<div class="js-scroll">
<span class="motion-txt">
<span class="motion-inner">
<img src="botanist_files/img/topics_pic03.png" alt="">
</span>
</span>
</div> 
<img src="botanist_files/img/topics_voice03.png" alt="" data-aos="fade-up" class="aos-init"> 
</div>

<div class="js-scroll">

第２回の説明文の表示で見たクラスがついてます。

今回は画像にスライドする効果を付けてるんですね。

data-aos="fade-up"

そして円形画像にdata-aos=”fade-up”がついています。

第３回のAOS（JavaScriptプラグイン）です。

この2つをミックスすることで、複雑な動きに見えてると思います。

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

<section><div class="all">
<div class="voice one">
 <div class="js-scroll">
  <span class="motion-txt">
   <span class="motion-inner">
    <div class="box"></div>
   </span>
  </span>
 </div>
 <div class="box2" data-aos="fade-up" data-aos-duration="700" data-aos-delay="1000"></div>
</div>

<div class="voice two">
 <div class="js-scroll">
  <span class="motion-txt">
   <span class="motion-inner">
    <div class="box3"></div>
   </span>
  </span>
 </div>
 <div class="box4" data-aos="fade-in" data-aos-duration="700" data-aos-delay="1500"></div>
</div>
</div></section>

data-aos="fade-in"

円形がfade-inします。

data-aos-duration="700"

円形が0.7秒かけてアニメーションします。

data-aos-delay="1500"

円形が1.5秒後にアニメーションを始めます。

このように細かくタイミングを指定して行くこともできます。

まとめ

全部で４回もLP『BOTANIST』の解説をしてきました。

今回の『横からスライドの画像の表示とAOS（jsプラグイン）』は

総まとめのような内容でしたね。

サンプルはLPとは少し数値を変えたりしています。

zoom-in、fade-left、、、今回試してないものもたくさんあります。

delayやdurationの数値を変えるのも、

ものすごいパターンがありますね。

ぜひ、色々試してみたいと思います。

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