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

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

Sponser Link

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

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

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

【初心者向け】プロのLPのコーディングを保存してじっくり勉強する方法 【初心者向け】プロのLP(コーディング)を解説★jsアニメーションを解析〜第2回 【初心者向け】プロのLP(コーディング)を解説★CSS3とjsを解析〜第3回

 

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

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

第3回目のAOS(jsプラグインを使った)の複合技です!

ほむほむ

本当に写真がきれいで素敵なLPですよね。

写真素材って重要だなとしみじみ思いました。

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

Sponser Link

⑤横からスライドの画像の表示と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>

写真1枚と円形画像1枚のセットの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">

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

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

data-aos="fade-up"

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

第3回の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秒後にアニメーションを始めます。

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

Sponser Link

まとめ

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

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

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

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

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

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

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

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

 

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

Sponser Link

コメントを残す

メールアドレスが公開されることはありません。