73558


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

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

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

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

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

[code]

    Some messages have been moved to the Issues panel.    
    
[/code]

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

### 該当のソースコード

**HTML**

[code]

    <!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:wght@300&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>
    
[/code]

**CSS**

[code]

    .fadein {
        opacity : 0.1;
        transform : translate(0, 50px);
            transition : all 500ms;
    }
    
    .scrollin {
        opacity : 1;
        transform : translate(0, 0);
    }
    
[/code]

**jQuery**

[code]

    $(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');
          }
        });
      });
    });
    
[/code]

### 試したこと

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

[code]

    $(function() {
    alert('OK!');
    });
    
[/code]

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

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

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


CC BY-SA 4.0
2021-01-24T04:02:33.630
73542
2021-01-25T05:28:17.100
2021-01-24T06:43:01.937
43659
43659
question
javascript jquery css
【スクロールすると「ふわっと」スクロールするアニメーション】の実装ができません


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

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

質問のHTML

[code]

    <li class="fadein scrollin">
    
[/code]

参考サイトのHTML

[code]

    <section class="fadein">
    
[/code]

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

（２）JavascriptでaddClassしているところも記述が間違っています。

質問のJavascrpt

[code]

    $(this).addClass('.scrollin');
    
[/code]

参考サイトのJavascript

[code]

    $(this).addClass('scrollin');
    
[/code]

jQueryの[APIリファレンス](https://api.jquery.com/addClass/#addClass-
className)を確認しましょう。

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

質問のCSS

[code]

    .scrollin {
    
[/code]

参考サイトのCSS

[code]

    .fadein.scrollin {
    
[/code]

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

[code]

    $(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');
          }
        });
      });
    });
[/code]

[code]

    .fadein {
        opacity : 0.1;
        transform : translate(0, 50px);
        transition : all 500ms;
    }
    
    .fadein.scrollin {
        opacity : 1;
        transform : translate(0, 0);
    }
[/code]

[code]

    <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>
[/code]

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


CC BY-SA 4.0
2021-01-25T05:28:17.100
73558
2021-01-25T05:28:17.100
22665
73542
answer