はじめに

今回紹介するjQUERYは、ずいぶん以前に作った物ですが、内容を今一度見直してみました。

jQUERYを使って、ウインドウが指定の位置までスクロールしたらテキストがスライドしながら表示されるという内容の物になります。

やりたいこと

最初に言っておきたいこと

jQUERYを使ってテキストを動かすのが今回の目的ですが、実際にテキストを動かすのはJSファイルではありません。

今回のJSファイルはウィンドウが指定の位置までスクロールしたら対象に指定のcssを与えるという物で、そのcssにテキストを動かす指示をコーディングしていく形になります。

対象物がアニメーションするまでの流れとしては以下のとおりです。

実際にコードを書くとこのようになります。

HTML

<div class="scrolleffect_up">
　<p>上部へスライドエフェクト</p>
</div>

CSS

.scrolleffect_up {
　transition: 2s;
　opacity: 0;
 }
 .scrolleffect_up_run {
　transform: translateY(-90px);
　opacity: 1;
}

移動前のclassscrolleffect_upと移動後のclassscrolleffect_up_runの2つを用意します。

デフォルトではscrolleffect_upが適用されています。ウィンドウをスクロールさせることでscrolleffect_up_runを付与させ、transform: translateY(-90px);で上方向へ90pxアニメーションさせます。

あわせて透過度opacityも指定することで、だんだん浮かび上がってくるようなアニメーションになります。

スクロールによってclassを付与させるJavascriptは以下のとおりです。

Javascript

$(function() {
　$(window).scroll(function (){
　　$('.scrolleffect_up').each(function(){
　　var POSITION = $(this).offset().top;
　　var scroll = $(window).scrollTop();
　　var windowHeight = $(window).height();
　　if (scroll > POSITION - windowHeight){ 
　　　$(this).addClass('scrolleffect_up_run');
　　　} else {
　　　$(this).removeClass('scrolleffect_up_run');
　　　}
　　});
　});
});

各行に解説を入れたソースが以下になります。

$(function() {
　$(window).scroll(function (){
//ウインドウがスクロールされたら以下の行の処理を実行する
　　$('.scrolleffect_up').each(function(){
//class"scrolleffect_up"に以下の処理を（順番に）実行する
　　var POSITION = $(this).offset().top;
//[offset().top]でページ最上部からthis(scrolleffect_up)までの距離を取得する。その値を変数「POSITION」に代入する。
　　var scroll = $(window).scrollTop();
//[scrollTop()]でスクロールした量を取得する。その値を変数[scroll]に代入する
　　var windowHeight = $(window).height();
//「.height()」でウインドウの高さを取得する。その値を「windowHeight」に代入する
　　if (scroll > POSITION - windowHeight){
//スクロールした量 > 「ページの最上部からscrolleffect_upまでの距離」 - 「ウィンドウの高さ」となった時（ページの表示領域がscrolleffect_upまで到達した時）
　　　$(this).addClass('scrolleffect_up_run');
//[scrolleffect_up]に[scrolleffect_up_run]というclassを与える
　　　} else {
//偽の時（そうじゃない時）は
　　　$(this).removeClass('scrolleffect_up_run');
//[scrolleffect_up]から[scrolleffect_up_run]というclassを削除する
　　　}
　　});
　});
});

という訳で実際に作成したデモがこちらです。