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

<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">

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

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

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

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

ほむほむ

といことは、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")
})
});
}
});
});

ほむほむ

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

showクラスをaddしてね。

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

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

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

と書いてあります。

説明文アニメーションの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%になることで動いています。

Sponser Link

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

追従バナーの動きを分析

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

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

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

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

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

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

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; 
}

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

Sponser Link

まとめ

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

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

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

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

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

コメントを残す

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