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

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

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

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

JavaScript

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

jQuery

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

CSS

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

Q&A

解決済

1回答

297閲覧

ヘッダーのリストを光らせたままにしたいです。

sasayaka_p

総合スコア20

HTML5

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

JavaScript

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

jQuery

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

CSS

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

0グッド

0クリップ

投稿2020/02/06 06:10

LPのヘッダーリストのアニメーションについて、どのようなプラグインを使用してるのか教えて欲しいです。

画像の用に、ヘッダーリストには
Home About Works.. と書いてあります。

例えば Aboutの要素にスクロールすると、Aboutが黄色に光り。
Worksにスクロールすると、Worksが黄色になる。

といった感じのアニメーションを実装したいです。

イメージ説明

↓ aboutからworksへスクロールすると

イメージ説明

といった感じです。

何かこれについてヒントをいただけないでしょうか。

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

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

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

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

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

miyabi_takatsuk

2020/02/06 08:18 編集

話が支離滅裂でわけわからないですし、話整理したとしても、コードがない(自身の努力がない)丸投げ質問だと思います。 下記を実行お願いします。 ・自身の書いてみたソースコードがあるなら記載 ・最終的に何を聞きたいのか明確に。二つ大きく出ていますが、どちらを聞きたいのでしょうか? タイトルの > ヘッダーのリストを光らせたままにしたいです。 ですか? それとも、 > LPのヘッダーリストのアニメーションについて、どのようなプラグインを使用してるのか教えて欲しいです。 ですか? LPのうんぬん言われても、そのLPのリンクないしソースコードも提示いただいてないのに、回答できるわけありませんよ。 質問本文は修正できますので、必ずこの質問にて行ってください。 ソースコード記載の時は、コードブロックを使ってください。 ```言語名 ここにソースコード ``` という形式です。
yambejp

2020/02/07 03:20

「Aboutの要素」がなにかわかりません
guest

回答1

0

ベストアンサー

スクロールしたらそのとき何が表示されているかを反映させればいいわけです。
elementFromPoint() で指定の位置に何があるかわかるので、たとえば

jQuery

1$(window).on('scroll', function(event) { 2 var id = $(document.elementFromPoint(200, 127)).closest('section[id]').prop('id'); 3 if (id) { 4 $('nav li a[href="#' + id + '"]').closest('li').addClass('selected').siblings().removeClass('selected'); 5 } 6});

https://www.w3.org/TR/cssom-view-1/#dom-document-elementfrompoint

IntersectionObserver の例

jQuery

1const observer = new IntersectionObserver((entries, observer) => { 2 const entry = entries.find(a => a.isIntersecting); 3 if (entry) { 4 const id = entry.target.id; 5 $('nav li a[href="#' + id + '"]').closest('li').addClass('selected').siblings().removeClass('selected'); 6 } 7}, { rootMargin: '-50%' }); 8$('section[id]').each((index, element) => observer.observe(element));

https://developer.mozilla.org/ja/docs/Web/API/Intersection_Observer_API

投稿2020/02/07 03:15

編集2020/02/07 08:41
x_x

総合スコア13749

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問