【コピペOK】スクロールでコンテンツにアニメーション◇コーディングテク【デモあり】

今日はLPを想定して、レスポンシブ対応で、

『スクロールでコンテンツにアニメーション』

のコーディングをやっていきたいと思います。

今日やりたいこと。

See the Pen
横からスライドしてコンテンツを見せるアニメーション by studio-0 (@studio-0)
on CodePen.

①スクロールでコンテンツが右からのスライドで表示される

HTML

<div class="formula__ttl fade__box">
<div class="fade__inner fadeInLeft"></div>
<img src="https://studio-0.com/blog/wp-content/uploads/2020/04/visual_img02.png" width="1201" alt="" class="pc">
<img src="https://studio-0.com/blog/wp-content/uploads/2020/04/sp_formula_ttl.png" alt="" width="333" class="sp"></div>

<div class="fade__inner fadeInLeft"></div>

これが画像がスライドする前の白い部分です。

CSS

/* アニメーション用 */
.fade__box {
position: relative;
overflow: hidden; 
}
.fade__box .fade__inner {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: #fff; 
}

これが画像がスライドする前の白い部分です。

/*fadeInLeft*/
.fadeInLeft {
transform: translate(0, 0);
transition: all 1s; 
}
.fadeInLeft.on {
transform: translate(-100%, 0);
left: 0; 
}

onクラスがついたら、背景白の<div class=”fade__inner fadeInLeft”></div>が右から左に移動します。

overflow: hidden;があるので、画面から消えて行くように見えます。

JavaScript

//fadeInLeft
$(window).scroll(function () {

$('.fadeInLeft').each(function () {
if ($(window).scrollTop() > $(this).offset().top - $(window).height() + 200) {
$(this).addClass('on');
}
});

$('.fadeInRight').each(function () {
if ($(window).scrollTop() > $(this).offset().top - $(window).height() + 200) {
$(this).addClass('on');
}
});
}).trigger('scroll');

②左右内側から同時にスライドして表示させる

HTML

<ul class="clearfix">
<li class="fade__box">
<div class="fade__inner fadeInLeft"></div>
<img src="https://studio-0.com/blog/wp-content/uploads/2020/04/contrast_img02.png" alt="" width="520" class="pc"><img src="https://studio-0.com/blog/wp-content/uploads/2020/04/sp_contrast_img02.jpg" alt="" class="sp">
</li>

<li class="fade__box">
<div class="fade__inner fadeInRight"></div>
<img src="https://studio-0.com/blog/wp-content/uploads/2020/04/contrast_img03.png" alt="" width="520" class="pc"><img src="https://studio-0.com/blog/wp-content/uploads/2020/04/sp_contrast_img03.jpg" alt="" class="sp">
</li>
</ul>

<li>にfade__boxをつけてます。

CSS

①のcssに追加して

.contrast .contrast_wrapper ul li {
width: 48.1%;
float: left; 
}

.contrast .contrast_wrapper ul li:last-child {
float: right; 
}

これで画像を並べています。

/*fadeInRight*/
.fadeInRight {
transform: translate(0, 0);
transition: all 1s; 
}
.fadeInRight.on {
transform: translate(100%, 0); 
}

中央から同時に左右にスライドします。

③左右外側から同時にスライドして表示させる

HTML

<div class="bl__img__box clearfix">
        
<div class="bl__photo__img fade__box" style="height: 325px;">
<div class="fade__inner fadeInLeft"></div>
<img src="https://studio-0.com/blog/wp-content/uploads/2020/04/contrast_img05.jpg" alt="" width="1280" class="pc"><img src="https://studio-0.com/blog/wp-content/uploads/2020/04/sp_contrast_img05.jpg" alt="" class="sp"></div>
        
<div class="bl__photo__txt" style="height: 325px;">
<div class="bl__photo__inner fade__box">
<div class="fade__inner fadeInRight"></div>
<img src="https://studio-0.com/blog/wp-content/uploads/2020/04/contrast_img04.png" alt="" width="623" class="pc"><img src="https://studio-0.com/blog/wp-content/uploads/2020/04/sp_contrast_img04.png" alt="" class="sp"></div>
</div>
        
</div>

CSS

/*写真とテキスト画像*/
.bl__img__box .bl__photo__img {
max-width: 1280px;
width: 66.66%;
float: right; }

.bl__img__box .bl__photo__txt {
width: 33.33%;
position: relative;
z-index: 5;
display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-line-pack: center;
  align-content: center;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end; }

.bl__img__box .bl__photo__txt .bl__photo__inner {
margin: 14px -30.6% 0 0;
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center; }

@media screen and (max-width: 767px) {
.bl__img__box {
margin: 0 -20px; }

.bl__img__box .bl__photo__img {
width: 77.1%; }

.bl__img__box .bl__photo__txt {
margin: -23% 0 0 0;
width: 79.46%;
float: left; }

.bl__img__box .bl__photo__txt .bl__photo__inner {
margin: 0; }

.bl__img__box .bl__photo__txt .bl__photo__inner img {
width: 100%; } }

CSSは①、②とほぼ一緒です。

重なるようにしている分、少し複雑です。

両サイドの外側から画像がスライドしてきます。

一つの動きでも、使い方で色々な見せ方ができますね。

display:flexを使って、align-content: center;で縦の中央で合わせています。

高さを揃えるjs

GitHubの「jquery.matchHeight.js」ページからダウンロードできます。
liabru/jquery-match-height · GitHub

これを使って、左右の<div>の高さを合わせています。

$(function(){
if($(window).width() > 767){
$('.bl__img__box > div').matchHeight();
}
});

使い方は簡単です。

$('高さを揃えたい要素').matchHeight();

完成！

動きのあるコンテンツを作ることができました！

See the Pen
横からスライドしてコンテンツを見せるアニメーション by studio-0 (@studio-0)
on CodePen.