質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

Q&A

解決済

1回答

862閲覧

JQueryでスクロールによって要素ごとにフェードインさせることができない。

Yuu412

総合スコア37

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

0グッド

0クリップ

投稿2020/06/16 16:02

以下のコードによって、スクロールすると下からフェードインする機能を実装しようとしていますが、上手く実装できません。

できたこと

・スクロールによってフェードインさせる(一気に)
・少しでもスクロールするとフェードインする

できないこと

・少しでもスクロールすると、ページの上から下まで'fadein-all'で囲った要素が全てフェードインしてしまう
・JQuery内の数値(300など)を変更しても上記の動きと全く同じ動作をする

JQueryに関してはほぼコピペで実装したため、テストなどを詳しくすることができません。

情報量が少なすぎて申し訳ありませんが、原因など分かる方はいらっしゃいませんでしょうか。

JQuery

1$(function(){ 2 $(window).scroll(function (){ 3 $('.fadein-all').each(function(){ 4 var position = $(this).offset().top, 5 scroll = $(window).scrollTop(), 6 windowHeight = $(window).height(); 7 if (scroll > position - windowHeight + 300){ 8 $(this).addClass('active'); 9 } 10 }); 11 }); 12});

CSS

1.fadein-all { 2 opacity: 0; 3 transform: translate(0, 200px); 4 transition: all 1500ms; 5} 6 7.fadein-all.active { 8 opacity: 1; 9 transform: translate(0, 0); 10} 11

HTML

1 <div class="fadein-all"> 2 <div id="about"> 3 <a href="URL"> 4 <h2 class="about-title">ABOUT</h2> 5 内容 6 </a> 7 </div> 8 </div> 9 10 <div class="fadein-all"> 11 <div id="works"> 12 <a href=""> 13 <h2 class="works-title">WORK</h2> 14         内容 15 </a> 16 </div> 17 </div> 18

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

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

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

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

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

Lhankor_Mhy

2020/06/17 04:42

ご提示のコードを拝見しましたが、「ページの上から下まで'fadein-all'で囲った要素が全てフェードインしてしまう」ということは起きませんでした。 つまり、問題が再現しません。 ↓サンプル https://jsfiddle.net/Lhankor_Mhy/ykgqsL86/
Yuu412

2020/06/17 06:01

私も別サイトでテストしてみましたが、上手く動作いたしました。他のコードが影響して、上手く動作していないことは考えられるのでしょうか? ちなみに、クラス名に関しては、(fadein-all)はここでしか使用しておりません。
Lhankor_Mhy

2020/06/17 06:07

scroll > position - windowHeight + 300 とあるので、fadein-allが、300px以下になることがあるようでしたら、同時に発火することもあるかと思いますよ。
Yuu412

2020/06/17 06:08

要素の高さがということですかね?
Lhankor_Mhy

2020/06/17 06:12

ああ、はい、そのとおりです。
Lhankor_Mhy

2020/06/17 06:17

scroll > position - windowHeight + 300 ↓ scroll + windowHeight > position + 300 ↓ スクリーンの下端 > fadein-allの上端 + 300px という意味です。 つまり、スクリーンの下端よりさらに300px下に、fadein-allの上端が届いていれば、発火します。
Yuu412

2020/06/17 06:20

その値を-100 にしてみましたが、全て同時に発火します・・・
Lhankor_Mhy

2020/06/17 06:38

-100の場合、スクリーンの下端の上100pxなので、それより上に上端が届いているfadein-allはすべて発火するはずです。
Yuu412

2020/06/17 06:41

スクリーン上に見えていない要素(上端含め)も全てが同時に発火します。
Lhankor_Mhy

2020/06/17 06:53

そうなんですね…… そうすると、 console.log( position, this ); if (scroll > position - windowHeight + 300){ などとして、値を調査してみるなどしてはいかがでしょうか?
Yuu412

2020/06/17 06:56

ログを見ることができる関数ですね。 試してみます。ありがとうございます。
guest

回答1

0

自己解決

JQueryではなくJSで記述することで解決しました。

投稿2020/07/03 02:49

Yuu412

総合スコア37

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問