スポンサーリンク

【jQuery】スクロールをしたら要素を動かす方法【コピペOK】

javascript

 

今回はjQueryとCSSアニメーションを組み合わせて
スクロールをしたら要素を動かす方法をご紹介します

執筆者紹介

gddfgf
管理人
・HTMLとJavascriptでキルミーベイベーの将棋を作っている男

スクロールで要素を動かす仕組み

「動かしたい要素」「動くきっかけの起点となるクラス名」付与
動くきっかけの動作をする(スクロール、クリックなど
「アニメーション用CSSのクラス名が付与される」の指定をする

(例)スクロールをしたらふわっと出現させる
動くきっかけの起点となるクラス名 「fadeUpTrigger」の位置までスクロールをしたら、「fadeUp」というアニメーション用のCSSのクラス名を付与して動かす。

実際に作ってみよう

①html > 動きをつけたい要素に、動くきっかけの起点となるクラス名を与える

・Class名は自由に設定可能
・今回はふわっと出てくる動きをつけたいので「fadeUpTrigger」と命名
・すでにClass名が記述されているものは前に半角スペースを入れて追加

②javascript > fadeUpというクラス名を付与する

・動きをつけたい要素(=fadeUpTrigger)に付与する
・「fadeUpTrigger」が-50pxの位置までスクロールをしたら付与するよう記述する
・動きのきっかけとなるアニメーション名を好きな名前の関数で定義する

➂②の完成形を見てみよう

// 動きのきっかけとなるアニメーションの名前を定義
function fadeAnime(){

//ふわっと動くきっかけのクラス名と動きのクラス名の設定
$('.fadeUpTrigger').each(function(){ //fadeInUpTriggerというクラス名が
var elemPos = $(this).offset().top-50; //要素より、50px上の
var scroll = $(window).scrollTop();
var windowHeight = $(window).height();
if (scroll >= elemPos - windowHeight){
$(this).addClass('fadeUp');
// 画面内に入ったらfadeInというクラス名を追記
}else{
$(this).removeClass('fadeUp');
// 画面外に出たらfadeInというクラス名を外す
}
});

//関数でまとめることでこの後に違う動きを追加することが出来ます
$('.fadeDownTrigger').each(function(){ //fadeInDownTriggerというクラス名が
var elemPos = $(this).offset().top-50; //要素より、50px上の
var scroll = $(window).scrollTop();
var windowHeight = $(window).height();
if (scroll >= elemPos - windowHeight){
$(this).addClass('fadeDown');
// 画面内に入ったらfadeDownというクラス名を追記
}else{
$(this).removeClass('fadeDown');
// 画面外に出たらfadeDownというクラス名を外す
}
});

}//ここまでふわっと動くきっかけのクラス名と動きのクラス名の設定

// 画面をスクロールをしたら動かしたい場合の記述
$(window).scroll(function (){
fadeAnime();/* アニメーション用の関数を呼ぶ*/
});// ここまで画面をスクロールをしたら動かしたい場合の記述

// 画面が読み込まれたらすぐに動かしたい場合の記述
$(window).on('load', function(){
fadeAnime();/* アニメーション用の関数を呼ぶ*/
});// ここまで画面が読み込まれたらすぐに動かしたい場合の記述

④①「fadeUpTrigger」に「透過0(opacity:0;)」を指定しておく

※「ふわっ」と出現する動きには、透過をあらかじめつけないと

一度表示→非表示→表示というカクカクした動きになる。

.fadeUpTrigger{
opacity: 0;
}

⑤スクロールしたら、CSSで準備したアニメーション用のクラス名(fadeUp)で
「透過していた要素を下から出現」する指定を行う。

.fadeUp {
animation-name: fadeUpAnime;
animation-duration:2s;
animation-fill-mode:forwards;
opacity: 0;
}
@keyframes fadeUpAnime{
from {
opacity: 0;
transform: translateY(100px);
}
to {
opacity: 1;
transform: translateY(0);
}
}