teratail
回答率
85.29%
質問するログイン新規登録
トップHTML5に関する質問ページ開いた最初の１回だけスクロールして出てくるようにしたいです。2回目以降は、スクロールしてもずっと表示されっぱなしにしたいです。

Q&A

2回答

6879閲覧

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

退会済みユーザー

退会済みユーザー

総合スコア0

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2018/11/17 11:32

編集2018/11/17 13:32

0

0

前提・実現したいこと

スクロールして画面指定位置で要素をアニメーションさせるものを作っています。詳しく言うと、スクロールすると画像や見出しと文字が太いラインが横スライドしてから、それらが出てきます。また文章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>
コード

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806
m.ts10806

2018/11/17 11:42

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

退会済みユーザー

2018/11/17 11:48

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

退会済みユーザー

2018/11/17 11:49

そのやり方がわからない問題です。
退会済みユーザー

退会済みユーザー

2018/11/17 11:50

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

2018/11/17 11:53

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

2018/11/17 11:55

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

2018/11/17 12:06

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

退会済みユーザー

2018/11/17 12:18

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

2018/11/17 12:35

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

2018/11/17 12:52 編集

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

退会済みユーザー

2018/11/17 13:03

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

2018/11/17 13:05

回答したんですけど・・。
m.ts10806
m.ts10806

2018/11/17 13:07 編集

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

退会済みユーザー

2018/11/17 13:13

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

2018/11/17 13:15

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

退会済みユーザー

2018/11/17 13:16

localstrageでしょうか？
退会済みユーザー

退会済みユーザー

2018/11/17 13:17

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

2018/11/17 13:19

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

2018/11/17 13:27

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

2018/11/17 13:32

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

回答2件

0

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

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

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

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

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

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

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

投稿2018/11/17 14:06

aKusano
aKusano

総合スコア3763

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806
m.ts10806

2018/11/17 14:31

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

2018/11/17 14:36

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

2018/11/17 14:40 編集

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

0

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

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

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

ミニマムコード

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

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

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

投稿2018/11/17 12:45

編集2018/11/17 14:44
m.ts10806
m.ts10806

総合スコア80890

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806
m.ts10806

2018/11/17 13:37

ミニマムコード提示しましたが、このコードがなんのヒントにもならないようだと 正直厳しそうな気がします。 コピペで動くコードを提示したとしてもそれは理解されないコードとなりうるので、 せっかくの回答が無駄になるので。 蛇足で回答に書いた「インデント」についてもバカにできない部分なのですけども。 ひとまず全部一気にやろうとせず、1つずつやっていってください。 現在どこまでできていて、何ができていないのか。 できていない部分を細分化して1つずつ部品作って組み合わせる形です。 技術的にも未熟のようですし、そういうときこそ要件細分化して1つずつ組み立てていくべきです。 熟練者であってもそうします。 どんなすごい技術者でも項目の細分化・部品化・設計を疎かにしていては何も完成しません。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.29%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

トップHTML5に関する質問

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