記事一覧画面とかで、スクロールしたら記事がふわっと現れるようなアニメーションを実現するCSS/JavaScriptについて書きます。
CSS/JavaScript/jQuery追記するだけなのでWordpress使ってる人にも簡単に使えます。
スクロールしたらフェードイン表示するのはこんな流れになります。
- スクロールしたときに要素がウィンドウの中に表示されているか判定
- 表示されていたらフェードインのClassを付与してアニメーション実行する
目次
フェードイン表示するCSS
.fadeinがフェードインアニメーションするためのClassです。
0.7秒かけて下から上にふわっと1度フェードインさせるアニメーションです。
.fadein {
animation: fadein-anim 0.7s ease 0s 1 normal;
}
@keyframes fadein-anim {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0px);
}
}
animationプロパティ
animation: fadein-anim 0.7s ease 0s 1 normal;
animation: 対象 動作時間 進行の挙動 開始時間 回数 反転再生させるかの指定動作時間、回数はそのままの意味です。今回は1度だけ0.7秒かけてフェードインアニメーションを実行します。
対象はkeyframesの名前を指定します。animationプロパティは指定したkeyframesを設定に従ってアニメーション動作させる役割です。
進行の挙動部分はアニメーション速度の変化を記述します。easeなら開始・完了を滑らかに、linearなら一定のアニメーションになります。詳しくは以下のページを参考。
http://www.htmq.com/css3/animation-timing-function.shtml
開始時間は、例えば1sにすると1秒後にアニメーション開始するなど何秒後に開始するかという設定です。今回は0秒なのですぐ開始されます。
反転再生させるかについて、normalだと同じ方向でアニメーションを繰り返すが、alternateにすると奇数回では通常方向、偶数回だと逆方向のアニメーションをするようになります。
ただし、今回はアニメーション回数が1度だけなのでどちらにしても意味はありません。
keyframes – 実際のアニメーションの挙動
@keyframesはアニメーションの動きを定義できます。
名前の通り、fromで指定した状態からtoで指定した状態にアニメーションします。パーセント指定することもできますが今回は省略します。
opacityは不透明度です。0%すなわち透明から、100%透過なしに遷移します。
また、translateYで要素を垂直方向にずらすことができます。20px下から0pxすなわち元の高さに戻すという意味です。
@keyframes fadein-anim {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0px);
}
}JavaScript/jQueryでスクロール時に要素が表示されたかを判定・Class付与
スクロール時に要素が表示されたかの判定はJavaScript/jQueryの実装が必要です。
基本的にコードの通りといった感じです。
スクロール時に指定した要素を探索して、要素が画面上に見えていたらフェードイン表示するClassを付与するという感じです。
すでに1/3以上見えている要素はフェードイン表示しないようにしています。
/* 表示時にフェードインする設定 */
$(document).ready(function () {
$(window).scroll(function () { // スクロール時に呼ばれる処理を設定
var windowHeight = $(window).height();
var scrollVal = $(window).scrollTop();
$('フェードインしたい要素のClassなど').each(function () {
var nodeTopPosition = $(this).offset().top; // 要素の上座標
var nodeOneThirdPosition = nodeTopPosition + $(this).height() / 3; // 要素の1/3の座標
// すでに要素が1/3以上見えていたら何もしない
if(nodeOneThirdPosition < windowHeight) {
return;
}
// 表示されてきたらフェードインアニメーションするClassを付与する
if(scrollVal + windowHeight > nodeTopPosition + 20) {
$(this).addClass("start-fadein");
}
});
});
});
実際の動作
私のブログ記事一覧ページで導入してるので見てみてください。
スクロールしたら記事がふわっとフェードイン表示するようにしています。
また、それ以外にマウス・カーソルを合わせると記事をズーム・拡大させるようにしています。
それについては別記事にまとめているのでよければこちらも見てみてください。