スライドインに必要なファイル

• 自前のCSSファイル
• jQuery
• 自前のJSファイル

実装してみよう

①自前のcssファイルを読み込む
<link rel="stylesheet" href="自前のファイル.css" >

②スライドインさせたいタグにクラス名を付与
<div class="inview">
  <p>この要素をスライドインさせる</p>
</div>

③BODYの前で読み込み
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="自前のファイル.js"></script>
</body>

スライドインは数か所使用することが多いと思うので、inviewというクラス属性を付けるだけで実装できるようにします。

自前のJSファイルに記述
$(window).scroll(function(){
  var scroll = $(window).scrollTop();
  var windowHeight = $(window).height();
  var viewPosition = 50;
  $(".inview").each(function(){
    var position = $(this).offset().top;
    if(scroll > position – windowHeight + viewPosition){
    $(this).addClass("is-active");
    }
  });
});

この書き方だとクラス属性「inview」がついている要素が画面+50pxまで行ったら「inview」に「is-active」というクラス属性を付けるという書き方になります。
数値とクラス名は変更可能です。適宜調整してください。

.inview {
  opacity: 0;
  transition: 400ms;
  transform: translateY(50px);
}

.inview.is-active {
  opacity: 1;
  transform: translateY(0px);
}

最後にcssで「初期状態」と画面に入った後の状態を記述すれば完成です。
この時「transition」を付けてあげることでアニメーションのようにふわっと表示することが出来ます。

動かない時のチェック項目

まとめ

今回のコードのようにクラス属性「inview」に対して動作するようにしておけば、何か所でも使えます。
またスライドインしたい要素を非表示にしてあげることも忘れないようにしましょう。