MENU
  • 資格関連
  • SEO
  • WordPress
  • HTML/CSS
  • 雑記
週末のトモゾウ
  • 資格関連
  • SEO
  • WordPress
  • HTML/CSS
  • 雑記
週末のトモゾウ
  • 資格関連
  • SEO
  • WordPress
  • HTML/CSS
  • 雑記
  1. ホーム
  2. HTML/CSS
  3. 要素がスクロールして画面に表示されたらCSSアニメーションを動かす方法【jQueryコピペ】

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

2023 3/04
HTML/CSS
2023年2月18日 2023年3月4日

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

CSSアニメーション実装の理屈と流れ
  1. 実装したい部分をクラス(class or ID)指定する。
  2. 実装したいCSSアニメーションを作る。
  3. ページが表示されたら発火するjQueryをいれる。
  4. 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を入れて、STEP1で指定した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が発火して、STEP1のclass「.boder」に、STEP2のCSSアニメーションを記述したクラス「.active」を付与します。
すると、付与されたCSSアニメーションが動き出します。

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

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

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

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

  1. CSS内で複数アニメーションを制御(ClassまたはIDが同じ)
  2. JQueryで複数アニメーションを制御(ClassまたはIDが異なる)

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

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

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

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

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

<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');
   }
 });
});
あわせて読みたい
複数の背景画像(background-img)を自動的に切り替えるCSSアニメーション CSSだけで背景をふわっと自動で変えていく方法です。コピペで出来るのでどうぞ。画像をあえて背景(back-ground)にしたのは、中にテキストを入れやすくするためです。(…
HTML/CSS
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
  • ネタになるニッチ資格おすすめ10選!趣味や友達との話題にもなるニッチ資格・検定を紹介!
  • 【JQuery】imgタグのsrcとdata-srcを画像書き換えて遅延読み込みさせる|ページスピード改善

この記事を書いた人

tomoのアバター tomo

資格試験やSEOなどについての情報を発信します。現在も資格試験や検定にチャレンジ中!実際に資格を勉強した上で、おススメの勉強方法や講義動画チャンネル、過去問サイトを紹介してます!
(仕事はWEBデザインとWEBマーケ)

この著者の記事一覧へ

関連記事

  • おしゃれなCSSポイント見出しデザイン!簡単コピペで現場ですぐに使える!
    2023年3月19日
  • イグアナ
    【JQuery】imgタグのsrcとdata-srcを画像書き換えて遅延読み込みさせる|ページスピード改善
    2023年3月12日
  • 複数の背景画像(background-img)を自動的に切り替えるCSSアニメーション
    2022年12月29日
カテゴリー
  • HTML/CSS
  • SEO
  • WordPress
  • ガジェット
  • 副業・ポイ活
  • 資格関連
  • 雑記
目次
トモゾウ
埼玉在住でWEBデザイン(フロントエンドエンジニア)の仕事をしながら、いろんな資格試験に挑戦しています。

また、本業とは別にブログを運営してます。資格勉強で学んだことや、WEB(SEO/HTML/CSSなど)を発信中。
About
カテゴリー
  • HTML/CSS
  • SEO
  • WordPress
  • ガジェット
  • 副業・ポイ活
  • 資格関連
  • 雑記
検索
当ブログは「SWELL」を使用しています。
  • サイトマップ
  • プライバシーポリシー
  • お問い合わせ

© 2023 週末のトモゾウ

目次