「About Us」の項目にスクロールエフェクトをつけました。

1.HTML/要素に目印になるためのクラス(1)を追加
クラス名は scloll_up に設定

                
               <div class="scroll_up">
               <!--======= 表示させたいものをここに記載 =======-->
               </div>
               </span></div>
                
            

2.js/要素が見えてきたらクラス(2)を追加する指示
トリガークラスが見えてる画面範囲に入って100pxぐらい進んだら.onってクラスを追加するという記述。

                
                    //scroll_effect
                    $(window).scroll(function () {
                      var scrollAnimationElm = document.querySelectorAll('.scroll_up');
                      var scrollAnimationFunc = function () {
                        for (var i = 0; i < scrollAnimationElm.length; i++) {
                          var triggerMargin = 100;
                          if (window.innerHeight > scrollAnimationElm[i].getBoundingClientRect().top + triggerMargin) {
                            scrollAnimationElm[i].classList.add('on');
                          }
                        }
                      }
                      window.addEventListener('load', scrollAnimationFunc);
                      window.addEventListener('scroll', scrollAnimationFunc);
                    });
                
            

3.CSS/クラス(1)にクラス(2)が追加されたら非表示から表示する記述をする
クラス(1)はあらかじめ opacity : 0 で不透明度0%にしておく。
クラス(2)が追加されると opacity : 1 で不透明度100%になるように記述して、非表示から表示へ変更させる。

                
                    .scroll_up {
                        transition: 0.8s ease-in-out;
                        transform: translateY(30px);
                        opacity: 0;
                      }
                      .scroll_up.on {
                        transform: translateY(0);
                        opacity: 1.0;
                      }
                
            

→制作HP