要素がスクロールして画面に表示されたらCSSアニメーションを動かす方法【jQueryコピペ】

2023年2月18日2023年3月4日

当ページのリンクには広告が含まれています。

ページを開くと同時に、すべてのアニメーションが発火するのではなく、スクロールして目的の部分が表示されたらアニメーション動くjQueryのやり方です。
コピペで使えます。

CSSアニメーション実装の理屈と流れ

実装したい部分をクラス(class or ID)指定する。
実装したいCSSアニメーションを作る。
ページが表示されたら発火するjQueryをいれる。
jQueryが発火して、実装したい部分のクラスに「.active」を付与。CSSアニメーションが動き出す。

スクロールして画面表示されたら動くCSSアニメーション

では、実際に作っていきます。
サンプルは下のような、スクロール表示されたらテキストの下にボーダーが伸びるCSSアニメーションです。

▼SAMPLE
（下の『SAMPLE　TEXT』が動かないときは、リロードしてちょっとスクロールしてみてください）

SAMPLE TEST

html/CSSとJQueryは下記のようになっています。

<div class="box">
 SAMPLE TEST
 <p class="boder"></p>
</div>

.box{
  height: 20px;
 }
.boder{
　max-width:400px;
　height: 1px;
	}
.active{
	border-bottom: solid 1px #666;
	animation: border_anim 2s linear forwards;
	}
@keyframes border_anim {
	0%{
		width: 0%;
	}
	100%{
		width: 100%;
	}
}

$(window).scroll(function (){
 $(".boder").each(function(){
   var position = $(this).offset().top;
   var scroll = $(window).scrollTop();
   var windowHeight = $(window).height();
   if (scroll > position - windowHeight){
     $(this).addClass('active');
   }
 });
});

スクロールするとアニメーションが動き出す仕組みと流れ

STEP

実装したい部分にクラス(class)指定します。

classはすでに入っていたモノでも、新しいclassを付与しても、どちらでもいいです。
~~（自分はいつもCSSアニメーション用のクラスを別途付与してます(笑)）~~
ID、classのどちらを付与するかはお好みで。

サンプルでは「.border」のclassがはいっています。

STEP

実装したいCSSアニメーションを作る

CSSを動きをつけるアニメーションを記述します。
自分はいつも「.active」とか「.on」とか分かりやすいクラス名にしています。

▼記述例
　サンプルでは「.active」とClass名をつけました。
　テキストの下に1pxのボーダーを左から右に引くCSSアニメーションです）

.active{
      border-bottom: solid 1px #666;
     animation: border_anim 1s linear forwards;
}
@keyframes border_anim {
       0%{ width: 0%;}
       100%{width: 100%;}
       }

STEP

ページが表示されたら発火するjQueryをいれる。

発火用jQueryを入れて、STEP１で指定したclass「.boder」を2行目をいれます。

$(window).scroll(function (){
 $(".boder").each(function(){
   var position = $(this).offset().top;
   var scroll = $(window).scrollTop();
   var windowHeight = $(window).height();
   if (scroll > position - windowHeight){
     $(this).addClass('active');
   }
 });
});

STEP

jQueryが発火してclass「.active」を付与

スクロール表示されると、jQueryが発火して、STEP１のclass「.boder」に、STEP２のCSSアニメーションを記述したクラス「.active」を付与します。
すると、付与されたCSSアニメーションが動き出します。

以上でスクロールするとアニメーションが動き出す手順となります。

上で紹介した発火用JQueryは、別のCSSアニメーションでも発火できます。
なので、このJQueryを流用するだけで、いろんなアニメーションを実装できるので、是非試してみてください。

複数のCSSアニメーションを同じページで発火したいとき

同じページ内で、複数のCSSアニメーションを使いたいという時は実務でも少なくないです。
やり方はいくつかありますが、そのうちの2種類を紹介します。

CSS内で複数アニメーションを制御（ClassまたはIDが同じ）
JQueryで複数アニメーションを制御（ClassまたはIDが異なる）

実装したいアニメーションや構造に応じて使い分けるとよきです。

01 CSS内で複数アニメーションを制御（ClassまたはIDが同じ）

classまたはIDが同じときは、記述は簡単です。
CSSのanimation部分に、カンマ「,」で区切って複数アニメーションを記述します。

▼サンプル
帯が右に伸びながら、色が変わる

アニメーションのhtml/CSSとJQueryは下記のようになっています。
cssのactiveの記述の部分に、カンマ「,」で区切って、帯が伸びるアニメーションと、色が4段階で変わるアニメーションの２つを記述してます。

<div class="box02"></div>

.box02{
    max-width: 400px;
    height: 30px;
}
.active{
    animation: bg_anim 2s infinite,color-anim 2s infinite;
}
@keyframes bg_anim {
    0%{width: 0;}
    100%{width: 100%;}
	}
@keyframes color-anim {
    0%{background: #f0e68c;}
    25%{ background: #afeeee;}
    50%{background: #da70d6;}
    100%{ background: #66cdaa;}
}

$(window).scroll(function (){
 $(".box02").each(function(){
   var position = $(this).offset().top;
   var scroll = $(window).scrollTop();
   var windowHeight = $(window).height();
   if (scroll > position - windowHeight){
     $(this).addClass('active');
   }
 });
});

02 JQueryで複数アニメーションを制御（ClassまたはIDが異なる）

ClassまたはIDが違うたびにJQueryを記述していたら面倒なので、まとめて記述します。
また、実装環境によってはJQueryの重複でアニメーションが動かない場合もあるので、できるだけ1つにまとめるのをおススメします。

2行目に指定したClass名のところに、カンマ「,」で区切りながら複数のclassを追加できます。

▼サンプル

テキストぼよんぼよん

アニメーションのhtml/CSSとJQueryは下記のようになっています。

注意する点としては、CSSの書き方です。
上のCSSアニメーション1個のときはドンと「.active」と書けばよかったですが、複数のときは、下記の「.bound.active」や「.line.active」という風に個別に書く必要があります。

<div class="box">
 <p class="bound">テキストぼよんぼよん</p>
 <p class="line"></p>
</div>

.box{
  height: 40px;
  max-width:400px;
}

.bound {
  color:#c35656;
}
.bound.active{
  animation: bound_anim .3s ease infinite alternate;
}
@keyframes bound_anim {
  0% {transform: translateY(0px);}
  100% {transform: translateY(-20px);}
}

.line{
  height: 1px;
}
.line.active{
	border-bottom: solid 1px #666;
	animation: line_anim 3s linear forwards;
	}
@keyframes line_anim {
  0%{width: 0%;}
  100%{ width: 100%;}
}

$(window).scroll(function (){
 $(".line , .bound").each(function(){
   var position = $(this).offset().top;
   var scroll = $(window).scrollTop();
   var windowHeight = $(window).height();
   if (scroll > position - windowHeight){
     $(this).addClass('active');
   }
 });
});