質問内容/困っていること
<こちらでもマルチポストさせていただいております>
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単独では、稼働します。
ご回答いただければ助かります。よろしくお願いします。