スクロールをしたら要素を出現させたいが、出現しない

Question

前提・実現したいこと

画面をスクロールすると、右から要素を出現させたいと思っています。
（該当ソースコードの背景色グレーの部分です）

動きの参考にしたのは以下のサイトですが、記述通りに書いたはずが動いてくれません。
https://coco-factory.jp/ugokuweb/jscss/

該当のソースコード

<div class="height"></div>

<div class="box">
<div class="box__bg__outer"><div class="box__bg__inner fadeRightTrigger"></div></div>
<h3>タイトルテキスト</h3>
<p class="image"></p>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

body {
	overflow-x: hidden;
}

.height {
	min-height: 1500px;
}

.box {
	position:relative;
	margin: 0 auto;
	max-width: 600px;
	z-index: 1;
}

.box__bg__outer {
	position:absolute;
	top:0;
	right:0;
	max-width: 400px;
	background: #ccc;
	margin-left: 120px;
	border-radius: 30px 0px 0px 30px;
}

.box__bg__inner {
	width:calc(100vw - 120px);
	height: 399px;
	background: #ccc;
	border-radius: 30px 0px 0px 30px;
	z-index:0;
}

.box p.image {
	display: inline-block;
	position: relative;
	min-width: 400px;
	min-height:100px;
	background: #000;
	padding: 0;
	margin: 0;
	z-index: 1;
}

.box h3 {
	position:relative;
	max-width: 315px;
	font-size: 18px;
	letter-spacing: 0.54px;
	line-height: 30px;
	padding-top: 30px;
	margin: 0 auto 22px auto;
}

.box p {
	position:relative;
	max-width: 315px;
	margin: 22px auto 18px auto;
	font-size: 14px;
	font-weight: 300;
	line-height: 22px;
}

function fadeAnime(){

	$('.fadeRightTrigger').each(function(){ //fadeRightTriggerというクラス名が
		var elemPos = $(this).offset().top-50;
		var scroll = $(window).scrollTop();
		var windowHeight = $(window).height();
		if (scroll >= elemPos - windowHeight){
		$(this).addClass('fadeRight');// 画面内に入ったらfadeRightというクラス名を追記
		}else{
		$(this).removeClass('fadeRight');// 画面外に出たらfadeRightというクラス名を外す
		}
		});
		}

// 画面をスクロールをしたら動かしたい場合の記述
	$(window).scroll(function (){
		fadeAnime();/* アニメーション用の関数を呼ぶ*/
	});// ここまで画面をスクロールをしたら動かしたい場合の記述

試したこと

現在は「.box__bg__inner」のクラス中に「.fadeRightTrigger」をつけていますが、
記述箇所に問題があるのかと思い、「.box__bg__outer」や「.box」に記述を移動してみましたが動かないままです。
動かしたい要素に「.fadeRightTrigger」を付属するだけで動くはずなので、なにか元々のコードの書き方に問題があるのでしょうか…

Answer 1

動かしたい要素に「.fadeRightTrigger」を付属するだけで動くはずなので、

この認識が間違っています。
提示のjQueryで.fadeRightTriggerにfadeRightクラスを付加/削除するのは成功しています。

CSSでfadeRightクラスにアニメーションを設定する必要があります。

どのような動きにしたいのか不明ですが、
右から移動しながらフェイドインするということなら、
CSSに下記の設定を追加したらどうでしょう。

.fadeRight{
  animation-name:fadeRightAnime;
  animation-duration:0.5s;
  animation-fill-mode:forwards;
  opacity:0;
}

@keyframes fadeRightAnime{
  from {
    opacity: 0;
    transform: translateX(200px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.fadeRightTrigger{
  transform: translateX(100px);
  opacity: 0;
}

.box__bg__outer {
    position:absolute;
    top:0;
    right:0;
    max-width: 400px;
/*    background: #ccc;  この背景色は削除しておく */
    margin-left: 120px;
    border-radius: 30px 0px 0px 30px; 
}

Comments

[mupo]

そもそもの認識違いとのご指摘ありがとうございます。思い込んでしまっており、気付くことができませんでした…無事にうまく動かすことができました！感謝です。