ページを開くと同時に、すべてのアニメーションが発火するのではなく、スクロールして目的の部分が表示されたらアニメーション動くjQueryのやり方です。
コピペで使えます。
- 実装したい部分をクラス(class or ID)指定する。
- 実装したいCSSアニメーションを作る。
- ページが表示されたら発火するjQueryをいれる。
- jQueryが発火して、実装したい部分のクラスに「.active」を付与。CSSアニメーションが動き出す。
スクロールして画面表示されたら動くCSSアニメーション
では、実際に作っていきます。
サンプルは下のような、スクロール表示されたらテキストの下にボーダーが伸びるCSSアニメーションです。
▼SAMPLE
（下の『SAMPLE TEXT』が動かないときは、リロードしてちょっとスクロールしてみてください）
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');
}
});
});スクロールするとアニメーションが動き出す仕組みと流れ
classはすでに入っていたモノでも、新しいclassを付与しても、どちらでもいいです。（自分はいつもCSSアニメーション用のクラスを別途付与してます(笑)）
ID、classのどちらを付与するかはお好みで。
サンプルでは「.border」のclassがはいっています。
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%;}
}発火用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');
}
});
});スクロール表示されると、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');
}
});
});
