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

こんにちは。

前回は『いいLP（サイト）だな。どうやって作ってるんだろう？』

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

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

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

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

今回は前回の続きで、

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<ul class="sub_ttl">
<li><div class="js-scroll show done"><span class="motion-txt"><span class="motion-inner"><img src="botanist_files/img/inspired_subttl_01_pc.png" alt=""></span></span></div></li>
<li><div class="js-scroll show done"><span class="motion-txt"><span class="motion-inner"><img src="botanist_files/img/inspired_subttl_02_pc.png" alt=""></span></span></div></li>
</ul>

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

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

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

<div class="js-scroll show done">

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

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

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

<div class="js-scroll show">

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

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

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

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

<div class="js-scroll">

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

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

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

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

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

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

他に2ヶ所ありました。

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

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

//変数の宣言
var EffectH = 100;

//ページ読み込み　スクロールしたときの処理
$(window).on('scroll load', function() {

//windowを読み込んだときのスクロールバーのスクロール位置を取得
var scTop = $(this).scrollTop();
//スクロール位置＋ウィンドウの高さを算出
var scBottom = scTop + $(this).height();
//上記で算出した数値を-100して左辺に代入
var effectPos = scBottom - EffectH;

//.js-scrollに繰り返し処理
$('.js-scroll, .js-scroll-r').each( function() {
//.js-scrollの左上からの距離を取得
var thisPos = $(this).offset().top;
//thisPosよりeffectPosの数値が大きくなったら処理
if ( thisPos < effectPos ) {
$.when(
//.js-scrollに.showクラスを付与
$(this).addClass("show")
//上記が正常に処理された場合は以下の処理
).done(function() {
//.上記処理から0.5秒後に.js-scrollに.doneクラスを付与
$(this).delay(500).queue(function(){
$(this).addClass("done")
})
});
}
});
});

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

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

.motion-txt {
display: inline-block;
position: relative;
overflow: hidden;
}

.motion-txt:after {
content: '';
position: absolute;
opacity: 1;
left: 0;
top: 0;
bottom: 0;
width: 100%;
background-color: #bfa679;
-webkit-transform: translate3d(-101%, 0, 0);
transform: translate3d(-101%, 0, 0);
}

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

.js-scroll.show .motion-txt:after {

transition-property: transform, opacity;

transition-duration: 0.5s;

transition-delay: 0s;

transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);

transform: translate3d(0, 0, 0);
}

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

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

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

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

.js-scroll.done .motion-txt:after {

transition-property: transform;

transition-duration: 0.5s;

transition-delay: 0s;

transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);

transform: translate3d(103%, 0, 0);
}

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

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

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

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

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

追従バナーの動きを分析

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

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

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

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

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

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

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

追従バナーのHTML

<!-- /SPの画面下部追従バナー -->
<div id="float_cv" class="is-fixed notPc" style="margin: 0px auto; display: none;">
<a href="https://lp.botanistofficial.com/lp/bota-bodysoap-01/#cart">
<img src="./botanist_files/img/floating_bnr.png" alt="">
</a>
</div>
<!-- /SPの画面下部追従バナー -->

追従バナーが非表示の時のHTMLです。

<!-- /SPの画面下部追従バナー -->
<div id="float_cv" class="is-fixed is-show notPc" style="margin: 0px auto; display: none;">
<a href="https://lp.botanistofficial.com/lp/bota-bodysoap-01/#cart">
<img src="./botanist_files/img/floating_bnr.png" alt="">
</a>
</div>
<!-- /SPの画面下部追従バナー -->

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

追従バナーのjs

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

$(document).ready(function(){

//追従CV
$(function(){
$(window).scroll(function (){
//追従CV出現位置指定
var imgPos = $("#cv_top").offset().top;
var scroll = $(window).scrollTop();
//追従CV消失点位置指定
var imgPos_kago = $("#cart").offset().top;
var windowHeight = $(window).height();
var cv_area = imgPos - windowHeight +
windowHeight/4;
var kago_area = imgPos_kago - windowHeight +
windowHeight/4;
if ( cv_area < scroll && scroll < kago_area) {
$("#float_cv").addClass("is-show").show();
}
else if(cv_area >= scroll || kago_area <= scroll){
$("#float_cv").removeClass("is-show").hide();
}
});
});

});

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に記述がありました。

/*------------------------------------------------------------
float_cv
------------------------------------------------------------*/
#float_cv {
z-index: 1000;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s; }

#float_cv.is-fixed {
position: fixed;
bottom: -100%;
left: 0;
width: 100%;
opacity: 0; }

#float_cv.is-fixed.is-show {
bottom: 0;
opacity: 1; }
#float_cv .floatCv_inner {
display: block; }
#float_cv .floatCv_inner img {
display: block; }

@media screen and (min-width: 769px) {
#float_cv {
display: none !important; } }

表示条件を満たすまで、

#float_cv.is-fixed { 
opacity: 0; 
}

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

まとめ

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

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

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

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

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