【スクロールすると「ふわっと」スクロールするアニメーション】の実装ができません

投稿者: Anonymous

質問内容/困っていること

<こちらでもマルチポストさせていただいております>
https://teratail.com/questions/317212

LPを制作しており『スクロールすると「ふわっと」スクロールするアニメーション』を実装しようとしましたが、稼働しません。

発生している問題・エラーメッセージ

⇒グーグルクロームの検証ツールにてConsoleを確認しましたが エラーは表示されていません。(表示は以下の通りです。)

Some messages have been moved to the Issues panel.    

エラーメッセージはありませんが、稼働しません。

該当のソースコード

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/slick.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="css/slick-theme.css" media="screen" />
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP:[email protected]&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Sawarabi+Gothic&display=swap" rel="stylesheet">
    <script type="text/javascript"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="js/slick.min.js"></script>
    <script src="js/app.js"></script>

</head>

<ul>
<li class="fadein scrollin">  
テキストが入ります。  
<p>テキストが入ります。<br><br>  
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。  
</p>  
<figure>  
    <img src="img/photo.jpg">  
    <figcaption>テキストが入ります。</figcaption>  
</figure>  
</li>  
</ul>

CSS

.fadein {
    opacity : 0.1;
    transform : translate(0, 50px);
        transition : all 500ms;
}

.scrollin {
    opacity : 1;
    transform : translate(0, 0);
}

jQuery

$(function(){
    $(window).scroll(function (){
        $('.fadein').each(function(){
            var elemPos = $(this).offset().top;
            var scroll = $(window).scrollTop();
            var windowHeight = $(window).height();
            if (scroll > elemPos - windowHeight + 200){
                        $(this).addClass('.scrollin');
      }
    });
  });
});

試したこと

jQuery自体は、他にもsliderを実装しておりますが、稼働しています。
その他、jQuery自体が稼働しているかの確認のために他の実装済みの要素をコメントアウトした上で、簡単に以下にて稼働の確認をしています。

$(function() {
alert('OK!');
});

アラートは稼働しています。

この部分のみ、別サイトを作って実装してみましたが、同じく稼働しません。
$をjQueryに変更して入力してみましたが、同じく稼働しません。
addClassをfadeInでも試しております。同じく稼働しません。
CSS単独では、稼働します。

ご回答いただければ助かります。よろしくお願いします。

解決

参考にしているサイトのコードが正しくコピーされていないようです。
コードを正しくコピーしてから動きを見てみてください。

(1)まずhtmlにはscrollinをデフォルトでつけていますが、参考サイトはscrollinはつけていません。

質問のHTML

<li class="fadein scrollin">

参考サイトのHTML

<section class="fadein">

スクロールがされたら<section class="fadein scrollin">になるべきであり、デフォルトでクラスをつけなさいとは記述していません。

(2)JavascriptでaddClassしているところも記述が間違っています。

質問のJavascrpt

$(this).addClass('.scrollin');

参考サイトのJavascript

$(this).addClass('scrollin');

jQueryのAPIリファレンスを確認しましょう。

(おまけ)CSSも正しくコピーされていません。※
しかしながらこれは影響がない可能性がありますが念のため記述しておきます。

質問のCSS

.scrollin {

参考サイトのCSS

.fadein.scrollin {

【結論】
それらを参考にしてサンプルコードを作ってみました。

_x000D_

_x000D_

$(function(){
    $(window).scroll(function (){
        $('.fadein').each(function(){
            var elemPos = $(this).offset().top;
            var scroll = $(window).scrollTop();
            var windowHeight = $(window).height();
            if (scroll > elemPos - windowHeight + 200){
                        $(this).addClass('scrollin');
      }
    });
  });
});

_x000D_

.fadein {
    opacity : 0.1;
    transform : translate(0, 50px);
    transition : all 500ms;
}

.fadein.scrollin {
    opacity : 1;
    transform : translate(0, 0);
}

_x000D_

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
下にスクロールすることで表示する<br><br><br><br><br><br>


<ul>
  <li class="fadein">  
    テキストが入ります。<br>  
    <p>テキストが入ります。<br>
    <br>  
    テキストが入ります。<br>
    テキストが入ります。<br>
    テキストが入ります。<br>
    テキストが入ります <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    </p>
    <figure>
      <img src="img/photo.jpg">  
      <figcaption>テキストが入ります。</figcaption>  
    </figure>  
  </li>  
</ul>

_x000D_

_x000D_

_x000D_

【補足】
実際はスクロールが発生しないとフェードインできないので上部に相当のコンテンツ量が必要そうです。
また参考サイトにもありますが画面にある程度表示してからアニメーションを実行していますが、
このようなスニペットなどの小さな画面だと逆に200は大きすぎて数字を調整する必要がありそうです。

回答者: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *