JavaScriptによるスクロールエフェクト1

解説

scroll > POSITION - windowHeightと記述すると、画面下に到達した時点でアニメーションが開始されてしまい動きが分かりにくいため、サンプルではwindowサイズの縦 +100pxまで到達したらscrolleffect_upというクラスにscrolleffect_up_runというクラスを追加させる、というようにしています。

JS

$(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 + 100){ 
　　　$(this).addClass('scrolleffect_up_run');
　　　　} else {
　　　　$(this).removeClass('scrolleffect_up_run');
　　　　}
　　});
　});
});

ここが画面下から100ピクセルの位置です

この下にアニメーションが表示されます
↓

上部へスライドエフェクト

スライドアニメーションの方向を変えたい場合は、CSSとJSを次のように変更します（変更する行のみ記載しています）。

左右へのアニメーションも同様にtransformの値を変更すれば可能です。

横方向だとtransform: translateX(***px)と記載します。

CSS

.scrolleffect_down {
　transition: 2s;
　opacity: 0;
}
.scrolleffect_down_run {
　transform: translateY(90px);
　opacity: 1;
}

JS

$(function() {
　$(window).scroll(function (){
　/*　省略　*/
　　　$(this).addClass('scrolleffect_down_run');
　　　　} else {
　　　　$(this).removeClass('scrolleffect_down_run');
　　　　}
　/*　省略　*/

この下にアニメーションが表示されます
↓

下部へスライドエフェクト

スクロール調整用の余白です