ページ開いた最初の１回だけスクロールして出てくるようにしたいです。2回目以降は、スクロールしてもずっと表示されっぱなしにしたいです。

Question

前提・実現したいこと

スクロールして画面指定位置で要素をアニメーションさせるものを作っています。詳しく言うと、スクロールすると画像や見出しと文字が太いラインが横スライドしてから、それらが出てきます。また文章Pは同時にフェードインして出てきます。

発生している問題

現在のコードでは繰り返しスクロールしても上記のようにして出てきます。しかし私は、２回目以降のスクロールは、繰り返したくないのですが、JSにどのようなコードを追記したら良いのかわかりません。初回と回にには何入れたら良いのでしょうか？```

https://webdesignday.jp/inspiration/technique/3636/の最後にもう少しアニメーションを付け足しましたの一番下のサンプルを参考にして自分でちゃんとそこまでできました。しかし2回目以降は、スクロールしてもずっと表示されっぱなしがまだできていません。そこの部分は調べても出てきてくレませんでした。

どの部分がスペルミスになっていますか？
そのコードどこにjsのどこに付け足したら良いのでしょうか？

html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, img, ul, li, article, figure, figcaption, footer, header, menu, nav, section {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;/*vertical-align: baseline;*/
}
* {
	box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
}

/*flexbox*/
.flex {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
}
.flex--start {
	justify-content: flex-start;
	-webkit-justify-content: flex-start;
}
.flex--center {
	justify-content: center;
	-webkit-justify-content: center;
}
.flex--end {
	justify-content: flex-end;
	-webkit-justify-content: flex-end;
}
.flex--bet {
	justify-content: space-between;
	-webkit-justify-content: space-between;
}

/*画面幅*/
.hero {
	margin-bottom: 120px;
	max-height: 600px;
	overflow: hidden;
}
/*画像幅*/
.hero__img {
	height: auto;
	width: 100%;
}
/*画像と画像の間隔*/
.sec {
	margin-bottom: 120px;
}

.img-container {
	overflow: hidden;
	position: relative;
}
.img-container__img {
	display: block;
	opacity: 0;
	position: relative;
	transition: all .5s .3s ease;
	z-index: 0;
}
/*画像スクロールした時の色*/
.img-container:before {
	background: #F9FF00;
	content: '';
	display: block;
	height: 100%;
	position: absolute;
	transform: translateX(-100%);
	transition: all .8s 0s ease;
	width: 100%;
	z-index: 1;
}
/*文字幅位置*/
.text-container {
	padding: 0 60px;
}
/*見出しの文字色と大きさと太さ*/
.text-container__title {
	color: #333;
	display: inline-block;
	font-size: 210%;
	font-weight: 600;
	overflow: hidden;
	position: relative;
	z-index: 0;
}
/*見出し文がスクロールした時に出てくる色*/
.text-container__title:before {
	background: #F9FF00;
	content: '';
	display: block;
	height: 100%;
	position: absolute;
	transform: translateX(-100%);
	transition: all .8s .3s ease;
	width: 100%;
	z-index: 1;
}
/*スクロールすると文字がフェードして出てくる*/
.text-container__title__inner {
	display: inline-block;
	opacity: 0;
	transition: all .8s .5s ease;
}
/*同上*/
.text-container__text {
	left: -50px;
	font-size: 20px;
	opacity: 0;
	position: relative;
	transition: all .5s .5s ease;
}
/*アニメーションするプロパティを設定します*/
.img-container.active img {
	opacity: 1;
}
.img-container.active:before {
	transform: translateX(100%);
}
.text-container.active .text-container__title:before {
	transform: translateX(100%);
}
.text-container.active .text-container__title__inner {
	opacity: 1;
}
.text-container.active .text-container__text {
	left: 0;
	opacity: 1;
}
コード

<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>トップページ</title>
<script src="java/jquery-3.3.1.min.js"></script>
<script src="java/jquery.waypoints.min.js"></script>
<script src="java/smooth-scroll.js"></script>
<script>$('.img-container').waypoint(function(direction){
    var activePoint = $(this.element);
    //scroll down
    if (direction === 'down') {
        activePoint.addClass('active');
    }
    else{
        activePoint.removeClass('active');
    }
},{offset : '70%'});
 
$('.text-container').waypoint(function(direction){
    var activePoint = $(this.element);
    //scroll down
    if (direction === 'down') {
        activePoint.addClass('active');
    }
    else{
        activePoint.removeClass('active');
    }       
},{offset : '70%'});
});


jQuery(function($){
   // #で始まるアンカーをクリックした場合に処理
   jQuery('a[href^="#"]').click(function() {
	  // スクロールの速度
	  var speed = 400; // ミリ秒
	  // アンカーの値取得
	  var href= jQuery(this).attr("href");
	  // 移動先を取得
	  var target = jQuery(href == "#" || href == "" ? 'html' : href);
	  // 移動先を数値で取得
	  var position = target.offset().top;
	  // スムーススクロール
	  jQuery('body,html').animate({scrollTop:position}, speed, 'swing');
	  return false;
   });
});

</script>



</head>

<body>

  
  <section>
	 <div class="fadein">
	 <h3>見出し</h3>
	  </div>
    <section class="sec">
      <div class="flex flex--bet">
        <figure class="img-container col2"> <img class="img-container__img" src="画像" alt="img01"> </figure>
        <div class="text-container col2">
          <h2 class="text-container__title"><span class="text-container__title__inner">見出しh2</span></h2>
          <p class="text-container__text"> 文章 </p>
          
			
		
          </div>
			
       
		  
		  </div>
       
      </div>
     
    </section>
    <section class="sec">
      <div class="flex flex--bet">
        <div class="text-container col2">
          <h2 class="text-container__title"><span class="text-container__title__inner">見出し</span></h2>
          <p class="text-container__text"> 文章 </p>
          <!--<figure class="img-container col2">-->
         
		<div class="fadein">
			<div class="imgWrap">
            
			</div>
            </div>
          <!--</figure>--> 
        </div>
        <!--text-container-->
        <figure class="img-container col2"> <img class="img-container__img" src="画像" alt="img01"> </figure>
      </div>
      <!--flex-bet--> 
    </section>
  </section>
</head>
</html>
コード

Comments

[m.ts10806]

退会された同じ方ですかねえ… https://teratail.com/questions/158422

[m.ts10806]

元の質問が削除依頼中なので確認できませんが、この内容ですとやりたいことは書いてあってもどのような問題が発生しているのかわかりません。質問は何でしょうか

[退会済みユーザー]

２回目以降のスクロールは表示されっぱなしにしたいのですが、そのやり方がわかりません。わかりましたでしょうか？

[退会済みユーザー]

そのやり方がわからない問題です。

[退会済みユーザー]

実装したいことがちゃんと書いてあるのにもかかわらず、なぜわからないのでしょうか？

[m.ts10806]

質問本文に追記してください

[m.ts10806]

したいこと→コード だけではそのコードで何が起きてるかわかりませんよ？何が問題かを聞いているのであって、やりたいことを聞いているわけではありません。直接的な表現で言うと丸投げです。

[m.ts10806]

「現在のコードで起きている問題を記載してください」 です。「わからない」だけだと丸投げです。何かしら調べたり試したりしたのでしょうか？書いてある内容しか見ている人は知りません。あなたがやりたいことのために何を調べ何を試したのか記載し、そのうえでどのような回答が欲しいのかを明確にしてください。調べ方だけ教えればなんとかできるのかどうかとか、どのレベルでの回答をすべきか見ている人はわかりません。もちろん「コードください」だけでは丸投げです。私は回答したくないわけでも要件に対してなにも知見を持っていないわけでもありません。ただ、「質問になっていない」ことを指摘しています。そのあたりきちんと書くようにしないと何度退会してやりなおしても質問を立て直しても得たい回答は得られませんよ

[退会済みユーザー]

ちゃんと調べたりはしました。この先質問になっていないなどと主張しましたら、退会します。もう２度と、ここの会員にはなりません。このスクロールアニメションはちゃんと調べてやりました。

[m.ts10806]

そのあたり「質問するときのヒント」を読まれたら分かることもあるかと。質問者さんが今どこまでできていて何ができていないか、どう調べて何をやったか は回答するために必要な情報です。 退会するのは自由ですが同じやり方ならどこにいっても得たい回答は得られないと思いますよ。

[退会済みユーザー]

https://webdesignday.jp/inspiration/technique/3636/の最後にもう少しアニメーションを付け足しましたの一番下のサンプルを参考にして自分でちゃんとそこまでできました。しかし2回目以降は、スクロールしてもずっと表示されっぱなしがまだできていません。

[m.ts10806]

いきなり出てきたこのURLは何でしょうか。何の説明もなしにURLを提示されるのは全く事情を知らない赤の他人からすると非常にこわいことです（広告や不正なサイトへの誘導も可能ですし。疑っているわけではありませんが配慮は必要です）。要件として大事なことなので質問に追記していただけますか？こちらのコメント欄はデフォルト非表示で目につきにくいですし、質問本文との関連性も分かりづらくなります。

[退会済みユーザー]

私が何度も何ども同じ質問してここまで調べてやって明確に質問しているはずなのに、返事いただけないのでもう諦めて退会します。もう２度と会員にはなりません。ありがとうございました。

[m.ts10806]

回答したんですけど・・。

[m.ts10806]

もし「回答になっていない」と言うのでしたら、そこは何がどうなっていないのかとか何が分からないのかとかご指摘いただければ、解説はします。（現在の質問内容からこれ以上の回答は難しい旨はご理解いただけたらと）

[退会済みユーザー]

これでも回答が難しいなら退会します。

[m.ts10806]

30分ほど前に現在の質問内容から出来うる回答をしていますよ。どこまで見られているかわかりませんが…

[退会済みユーザー]

localstrageでしょうか？

[退会済みユーザー]

見たのですがよくわかりません。

[m.ts10806]

回答に関するコメントであれば回答につけてください。何度も言ってますが今の質問内容からできうる回答はあれくらいです。細かいですがスペルミスされてます。プログラムは指示した通りにしか動きませんのでスペルミスは致命的になります

[m.ts10806]

localstrage　←スペルミス　　oが足りない。正しくは　localStorage

[m.ts10806]

（2回目）回答に関するコメントであれば回答につけてください。

Answer 1

２回目以降のスクロールは、繰り返したくない

これってもしかして、ページが読み込まれてスクロールした時に
アニメーションで出てきた要素は、**「再読込されない限り」**一度表示されたら
その後は何度スクロールしてもアニメーションされずに表示されたままにしておきたい
ってことだったりします？（再読込すればまた最初のスクロール時はアニメーションされる）

もしそうだったら、最近似たようなことやりましたよ。

１． スクロール時のアニメーションをCSS animationで定義する 【CSS】
２． 1のanimatinは、特定のclassが追加されたタイミングで適用されるようにしておく 【CSS】
３． スクロール量がアニメーションさせたい対象要素の位置を一定量超えたら、2で決めたclassをつける 【JS】

やったことはこれだけです。
この場合スクロールして表示された（=特定のclassがついた）状態をどこにも保存してませんので
再読込されればリセットされてまたスクロールすればアニメーションが適用されます。

もし1度スクロールしたら二度と（または一定期間）アニメーションさせたくないなら、
何らかの方法で状態を保存しておけばよいのでは？

（見当違いだったらすみません）

Comments

[m.ts10806]

私も要件不明瞭部分をどうするか結構迷ったうえで（可能性としては若干高くないほうで）決め打ち回答しました。
正しく伝わらなくて欲しい情報得られなくて困るのは結局質問者さんと割り切りです。
ただおそらく現在のコードもほぼコピペコードで更に今回用のコピペコードを欲していそうなので
ちょっと悩みどころですね。

[aKusano]

> 今回用のコピペコードを欲していそう
なんとなくそんな雰囲気がしましたので、実現できた手順だけ提示してみました。
（これだけ手順書いてあれば基本ググればコピべで作れますし私もそうでしたし。）
というか今回の現行コード、ちょっと何書いてるのかよく分からないので
「今のコードを修正してくれ！」と言われても私には無理ですw

[m.ts10806]

aKusanoさんの回答見て初めて「ScrollFireみたいなことやりたいんだな」とようやく認識持ちました。
ちょっと思うところ回答に追記してみます。参考のリンクだけですけど・・

Answer 2

今の内容から回答できることは少ないですが、
「2回目のアクセスかどうか判定したい」のであれば、localStorageにアクセスしたかどうかの情報を持っておいて判定すれば良いかと。

「2回目である」が取れればあとはその「スクロールしても表示されっぱなし」というのをするだけですね。
ひとまず、見た感じ「1回目のアクション」はできているようですし、2回目かどうかは置いておいて
「スクロールしても表示されっぱなし」をアクセス回数関係なくできてから
「2回目のアクセス」の判定を入れられては如何でしょうか。

蛇足：
コードにはインデントをつけてください。
他人でなく自身でも読みやすいとは言えません。
インデントがないと開始に対する終了（{ → }）が見て分かりませんので、
バグの温床ともなりえる部分です。

ミニマムコード

if(localStorage.getItem('access_count') == null){
 //初回アクセス
 localStorage.setItem('access_count',1);
 alert("初回");
}else{
 //2回目以降のアクセス
 localStorage.setItem('access_count',parseInt(localStorage.getItem('access_count'))+1);
 alert(ocalStorage.getItem('access_count')+"回");
}

ざっと作ったので動作確認してませんが、このコードだけ動かすと最初だけ「初回」とアラートが出て、それ以降はアクセスした回数がアラートで出るようになります。

追記：
1回目・2回目以降　というのが不明瞭な表現であるため、
いろいろな解釈ができることはご理解いただきたいと思います。
たぶんこんなことやりたいんだろうなというのを別回答で認識持ちました。
「2回目以降のアクセス」を制御したい場合は別途私が既に提示した方法を加味しつつ
制御しなければなりませんが、単にScrollFireのようなことをやりたいのであれば、
CSSフレームワークでほぼそのままの機能を持っているものがありますので、
そちらを参考にされてはいかがでしょうか。

• Materialize0.100.2:ScrollFire

Comments

[m.ts10806]

ミニマムコード提示しましたが、このコードがなんのヒントにもならないようだと
正直厳しそうな気がします。
コピペで動くコードを提示したとしてもそれは理解されないコードとなりうるので、
せっかくの回答が無駄になるので。
蛇足で回答に書いた「インデント」についてもバカにできない部分なのですけども。

ひとまず全部一気にやろうとせず、1つずつやっていってください。
現在どこまでできていて、何ができていないのか。
できていない部分を細分化して1つずつ部品作って組み合わせる形です。
技術的にも未熟のようですし、そういうときこそ要件細分化して1つずつ組み立てていくべきです。
熟練者であってもそうします。
どんなすごい技術者でも項目の細分化・部品化・設計を疎かにしていては何も完成しません。