0

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

<こちらでもマルチポストさせていただいております>
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: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>

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単独では、稼働します。

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

4
  • ふわっとするスクロールとはどういうアニメーションでしょうか?もう少し具体的にお願いします。何か例題なんかがあるとよりわかりやすいでしょう。
    – keitaro_so
    Commented 2021年1月25日 0:50
  • そのまま当てはまるかは分かりませんが、過去の関連しそうな質問: Javascriptで後から追加した要素をふわっと出現させるには
    – cubick
    Commented 2021年1月25日 1:14
  • @keitaro_so様 コメントありがとうございます。以下、参考にさせていただいたサイトです。 imasashi.net/element-fadein.html
    – top1rk
    Commented 2021年1月25日 2:41
  • @cubick♦様 コメントありがとうございます。参考にさせていただきます。
    – top1rk
    Commented 2021年1月25日 3:24

1 件の回答 1

0

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

(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 {

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

$(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');
      }
    });
  });
});
.fadein {
    opacity : 0.1;
    transform : translate(0, 50px);
    transition : all 500ms;
}

.fadein.scrollin {
    opacity : 1;
    transform : translate(0, 0);
}
<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>

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

1
  • @keitaro_so様 ご回答ありがとうございました!実装して動作確認できました。 コピペしてから自分で右往左往するうちに、おかしくなっていたようです。 数日間悩んでいましたので、大変助かりました!
    – top1rk
    Commented 2021年1月25日 6:35

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。