この記事では「スクロール時のフェードイン」について解説していきます!
目次
- 【jQuery】スクロール時のフェードイン【やり方】
- 【jQuery】スクロール時のフェードイン【サンプル・コピペコード付き】
- 【jQuery】スクロール時のフェードイン【サンプル・コピペコード付き】:まとめ
【jQuery】スクロール時のフェードイン【やり方】
スクロールしたらフワッとフェードインして表示するデモが下記になります。
出力結果
<main>
<div class="box">
<div class="box__item js-fade">フェードインするよ!</div>
</div>
<div class="box">
<div class="box__item js-fade">フェードインするよ!</div>
</div>
<div class="box">
<div class="box__item js-fade">フェードインするよ!</div>
</div>
<div class="box">
<div class="box__item js-fade">フェードインするよ!</div>
</div>
<div class="box">
<div class="box__item js-fade">フェードインするよ!</div>
</div>
</main>
HTML.js-fade {
opacity: 0;
visibility: hidden;
transform: translateY(50px);
transition: opacity 1s,visibility 1s, transform 1s;
}
.scroll {
opacity: 1;
visibility: visible;
transform: translateY(0px);
}
CSS$(function(){
$(window).scroll(function (){
$('.js-fade').each(function(){
var pos = $(this).offset().top;
var scroll = $(window).scrollTop();
var windowHeight = $(window).height();
if (scroll > pos - windowHeight + 100){
$(this).addClass('scroll');
}
});
});
});
JavaScriptコードの解説として重要な点が、こちらになります↓
- 共通クラスをつける
- フェードイン前後の記述をする
- スクロールしたらクラスをつける記述をする
順に見ていきましょう。
➀:共通クラスをつける
まずHTMLにて、フェードインさせる場所に共通のクラスをつけてきます。
<div class="box">
<div class="box__item js-fade">フェードインするよ!</div>
</div>
<div class="box">
<div class="box__item js-fade">フェードインするよ!</div>
</div>
HTML今回でいうと「js-fade」ですね。
このクラスをつける要素がフェードインする対象となります。
「js-」とついておけば、JavaScript用につけてるクラスだとわかりやすいです!
➁:フェードイン前後の記述をする
次にCSSにてフェードイン前後の反映記述をします。
// フェードイン前
.js-fade {
opacity: 0;
visibility: hidden;
transform: translateY(50px);
transition: opacity 1s,visibility 1s, transform 1s;
}
// フェードイン後
.scroll {
opacity: 1;
visibility: visible;
transform: translateY(0px);
}
CSS初期値は「透明度0」+「非表示」+「Y軸に50pxずらす」を指定。
そしてフェードイン用のクラスをつけると「透明度1」+「表示」+「Y軸0pxの位置に戻す」を指定します。
transitionをつけることで、1秒間かけてフェードインするように指定。
念のため「transition-property」もつけておきます。
③:スクロールしたらクラスをつける記述をする
あとは「scroll」というクラスを、「js-fade」の要素にスクロール時につければ実装可能。
それはjQueryにて下記コードで実装いたします。
$(function(){
$(window).scroll(function (){
$('.js-fade').each(function(){
var pos = $(this).offset().top;
var scroll = $(window).scrollTop();
var windowHeight = $(window).height();
if (scroll > pos - windowHeight + 100){
$(this).addClass('scroll');
}
});
});
});
JavaScriptおそらく初見だとこのコードを見ても、わけが分からないかと思います。
簡単に説明すると
「ウインドウ画面をスクロール時に、.js-fadeのクラスを持つ要素が、もしも100px以上画面内に入ってきたら、.scrollというクラスを付与する」
という意味。
そして.eachメソッドを使うことで、要素それぞれに対して指定することができます。つまり一気にすべての要素に「.scroll」クラスがつかないようにできるということ。
細かく説明すると下記の感じ↓
$(function(){
// ウインドウをスクロールしたら
$(window).scroll(function (){
// .js-fadeのクラスを持つ要素(それぞれに対して)
$('.js-fade').each(function(){
// この要素のスクロール位置(上から)
var pos = $(this).offset().top;
// ウインドウのスクロール量(上から)
var scroll = $(window).scrollTop();
// ウインドウの縦幅
var windowHeight = $(window).height();
// ウインドウのスクロール量(上から)が
// この要素のスクロール位置 - ウインドウの縦幅 + 100pxより大きい場合
if (scroll > pos - windowHeight + 100){
// .scrollというクラス.js-fadeに付与する
$(this).addClass('scroll');
}
});
});
});
JavaScript【jQuery】スクロール時のフェードイン
【サンプル・コピペコード付き】
最後に色んな方向からフェードインするサンプルと、コピペ用コードを紹介していきます!
- 下からフェードイン
- 上からフェードイン
- 左からフェードイン
- 右からフェードイン
- 上下左右からフェードイン
順に見ていきましょう。
下からフェードイン
出力結果
.js-fade {
opacity: 0;
visibility: hidden;
transform: translateY(50px);
transition: opacity 1s,visibility 1s, transform 1s;
}
.scroll {
opacity: 1;
visibility: visible;
transform: translateY(0px);
}
CSS$(function(){
$(window).scroll(function (){
$('.js-fade').each(function(){
var pos = $(this).offset().top;
var scroll = $(window).scrollTop();
var windowHeight = $(window).height();
if (scroll > pos - windowHeight + 100){
$(this).addClass('scroll');
}
});
});
});
JavaScript上からフェードイン(html,jsは同じ)
出力結果
.js-fade {
opacity: 0;
visibility: hidden;
transform: translateY(-80px);
transition: opacity 1s,visibility 1s, transform 1s;
}
.scroll {
opacity: 1;
visibility: visible;
transform: translateY(0px);
}
CSS左からフェードイン(html,jsは同じ)
出力結果
.js-fade {
opacity: 0;
visibility: hidden;
transform: translateX(-80px);
transition: opacity 1s,visibility 1s, transform 1s;
}
.scroll {
opacity: 1;
visibility: visible;
transform: translateX(0px);
}
CSS左右どちらからフェードインする場合は、transformの値をXにしてあげましょう。
右からフェードイン(html,jsは同じ)
出力結果
main {
overflow: hidden;
}
.box__item {
width: 100%;
}
.js-fade {
opacity: 0;
visibility: hidden;
transform: translateX(80px);
transition: opacity 1s,visibility 1s, transform 1s;
}
.scroll {
opacity: 1;
visibility: visible;
transform: translateX(0px);
}
CSS先ほど同様、translateの値をXにします。
ただ、右からフェードインの場合は注意が必要。
というのも要素の横幅によっては横スクロールが生じてしまうため。mainタグに対して「overflow: hidden;」をかけるなどの対策をおすすめします。
上下左右からフェードイン
出力結果
<main>
<div class="box">
<div class="box__item js-fadeBottom">フェードインするよ!</div>
</div>
<div class="box">
<div class="box__item js-fadeTop">フェードインするよ!</div>
</div>
<div class="box">
<div class="box__item js-fadeLeft">フェードインするよ!</div>
</div>
<div class="box">
<div class="box__item js-fadeRight">フェードインするよ!</div>
</div>
</main>
HTML// 下からフェードイン
.js-fadeBottom {
opacity: 0;
visibility: hidden;
transform: translateY(80px);
transition: opacity 1s,visibility 1s, transform 1s;
}
.js-fadeBottom.scroll {
opacity: 1;
visibility: visible;
transform: translateY(0px);
}
// 上からフェードイン
.js-fadeTop {
opacity: 0;
visibility: hidden;
transform: translateY(-80px);
transition: opacity 1s,visibility 1s, transform 1s;
}
.js-fadeTop.scroll {
opacity: 1;
visibility: visible;
transform: translateY(0px);
}
// 左からフェードイン
.js-fadeLeft {
opacity: 0;
visibility: hidden;
transform: translateX(80px);
transition: opacity 1s,visibility 1s, transform 1s;
}
.js-fadeLeft.scroll {
opacity: 1;
visibility: visible;
transform: translateX(0px);
}
// 右からフェードイン
.js-fadeRight {
opacity: 0;
visibility: hidden;
transform: translateX(-80px);
transition: opacity 1s,visibility 1s, transform 1s;
}
.js-fadeRight.scroll {
opacity: 1;
visibility: visible;
transform: translateX(0px);
}
CSS$(function(){
$(window).scroll(function (){
$('.js-fadeBottom,.js-fadeTop,.js-fadeLeft,.js-fadeRight').each(function(){
var pos = $(this).offset().top;
var scroll = $(window).scrollTop();
var windowHeight = $(window).height();
if (scroll > pos - windowHeight + 100){
$(this).addClass('scroll');
}
});
});
});
JavaScript上下左右など色んな方向からのフェードインアニメーションが複数ある時は、コードの数を増やします。
方向別用の「クラス」「css」を記述。
そして下記のように、クラスそれぞれに対してjsが発動するように指定します↓
$('.js-fadeBottom,.js-fadeTop,.js-fadeLeft,.js-fadeRight').each(function(){
JavaScript【jQuery】スクロール時のフェードイン
【サンプル・コピペコード付き】:まとめ
- フェードインさせる場所に共通のクラスをつける
- フェードイン前後のCSSを記述
- スクロールしたらクラスをつける記述をする
フェードインアニメーションはよく使うので覚えておきましょう!