はじめに

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

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

やりたいこと

目次

機能の概要について

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

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

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

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を削除する
　　　}
　　});
　});
});

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