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

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

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

SVGは、XMLを基盤とした2Dベクター画像記述言語。画像を線・面といった図形の集合体として扱うベクター画像のため、環境に適した表示が可能です。アニメーション機能もサポートされており、簡単なインタラクティブコンテンツ作成もできます。

JavaScript

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

Q&A

2回答

348閲覧

svgとjavascriptを使った動的な可動

退会済みユーザー

退会済みユーザー

総合スコア0

SVG

SVGは、XMLを基盤とした2Dベクター画像記述言語。画像を線・面といった図形の集合体として扱うベクター画像のため、環境に適した表示が可能です。アニメーション機能もサポートされており、簡単なインタラクティブコンテンツ作成もできます。

JavaScript

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

0グッド

1クリップ

投稿2023/12/12 11:57

編集2023/12/13 21:35

実現したいこと

サイトのナビゲーション管理で、各セクションにスクロールした際、現在位置を示す白点をナビ左に表示し、
アクテイブからインアクティブになる際、白点が消失時、円が白点の周囲をくるりとまわるような動きを実装したい。
(現在、ナビゲーションが各セクションにスクロールした際、ナビゲーション左横に白点を表示(アクティブ)し、別のセクションに移動した際、白点が消失(インアクティブ)するところまではできており、今後、SVGを使いアクティブからインアクティブに切り替わる際、白点が消失する前に周囲を白い円でくるりと回るようにしたい)

前提

イメージとしてはhttps://gocloudforce.com/
このサイトのような動きを実装したく、svgを仕様しましたが、svgとjsをうまく組み合わせられません。

発生している問題・エラーメッセージ

具体的なエラーが発生しているわけではありませんが、何度挑戦しても白点がそもそもsvgの外に発生してしまい、コードそのものに問題があるのはわかるのですが、JSのコードをいじるとそもそも作動しなくなり
何から手をつけて良いのかわからなくなったので力を貸していただけると助かります。

エラーメッセージ

該当のソースコード

HTML

1<section id="home"> 2 <img src="img/logo.svg"> 3 <nav> 4 <a href="index.html#home" data-target="home"> 5 <svg viewBox="0 0 200 200" width="25px" height="25px" class="circle-wrapper-sp"> 6 <circle cx="100" cy="100" r="50" fill="transparent" stroke="#fff" stroke-width="3" class="circle-animation"></circle> 7 </svg>Home</a> 8 <a href="index.html#about" data-target="about"> 9 <svg viewBox="0 0 200 200" width="25px" height="25px" class="circle-wrapper-sp"> 10 <circle cx="100" cy="100" r="50" fill="transparent" stroke="#fff" stroke-width="3" class="circle-animation"></circle> 11 </svg>About</a> 12 <a href="index.html#rules" data-target="rules"> 13 <svg viewBox="0 0 200 200" width="25px" height="25px" class="circle-wrapper-sp"> 14 <circle cx="100" cy="100" r="50" fill="transparent" stroke="#fff" stroke-width="3" class="circle-animation"></circle> 15 </svg>Rules</a> 16 <a href="index.html#manas" data-target="manas"> 17 <svg viewBox="0 0 200 200" width="25px" height="25px" class="circle-wrapper-sp"> 18 <circle cx="100" cy="100" r="50" fill="transparent" stroke="#fff" stroke-width="3" class="circle-animation"></circle> 19 </svg>Manas</a> 20 <a href="index.html#contact" data-target="contact"> 21 <svg viewBox="0 0 200 200" width="25px" height="25px" class="circle-wrapper-sp"> 22 <circle cx="100" cy="100" r="50" fill="transparent" stroke="#fff" stroke-width="3" class="circle-animation"></circle> 23 </svg>Contact</a> 24 </nav> 25 <div class="scrolldown"><span>Scroll&nbsp;down</span></div> 26</section>

該当のソースコード

javascript

1$(document).ready(function () { 2 // ナビゲーションアクティブ時に白点を表示 3 function showNavigationDot() { 4 var activeNavItem = $('nav a.active'); 5 6 if (activeNavItem.length) { 7 var dotPosition = activeNavItem.position().left + activeNavItem.outerWidth() / 2; 8 $('nav').append('<div class="dot" style="left: ' + dotPosition + 'px;"></div>'); 9 } 10 } 11 12 // ナビゲーションのアクティブな位置を更新 13 function updateNavigation() { 14 $('nav a').removeClass('active inactive'); 15 16 var positions = updateScrollPositions(); 17 18 if (positions.scrollPosition >= positions.homePosition && positions.scrollPosition < positions.aboutPosition) { 19 $('nav a[data-target="home"]').addClass('active').removeClass('inactive'); 20 } else if (positions.scrollPosition >= positions.aboutPosition && positions.scrollPosition < positions.rulesPosition) { 21 $('nav a[data-target="about"]').addClass('active').removeClass('inactive'); 22 $('nav a:not([data-target="about"])').addClass('inactive'); 23 } else if (positions.scrollPosition >= positions.rulesPosition && positions.scrollPosition < positions.manasPosition) { 24 $('nav a[data-target="rules"]').addClass('active').removeClass('inactive'); 25 $('nav a:not([data-target="rules"])').addClass('inactive'); 26 } else if (positions.scrollPosition >= positions.manasPosition && positions.scrollPosition < positions.contactPosition) { 27 $('nav a[data-target="manas"]').addClass('active').removeClass('inactive'); 28 $('nav a:not([data-target="manas"])').addClass('inactive'); 29 } else if (positions.scrollPosition >= positions.contactPosition) { 30 $('nav a[data-target="contact"]').addClass('active').removeClass('inactive'); 31 $('nav a:not([data-target="contact"])').addClass('inactive'); 32 } 33 }

該当のソースコード

css

1body #home nav { 2 position: fixed; 3 top: 70%; 4 left: 3.5%; 5 display: flex; 6 flex-direction: column; 7 text-align: left; 8 list-style: none; 9} 10 11body #home nav a { 12 position: relative; 13 padding-bottom: 15px; 14 color: #ffffff; 15 text-decoration: none; 16 display: flex; 17 align-items: center; 18} 19 20body #home nav a::before { 21 content: ""; 22 display: inline-block; 23 width: 5px; 24 height: 5px; 25 background-color: transparent; 26 border-radius: 50%; 27 margin-right: 10px; 28} 29 30body #home nav a.active { 31 color: #ffffff; 32 display: block; 33} 34 35body #home nav a.active::before { 36 background-color: #ffffff; 37} 38 39body #home nav a .circle-animation { 40 stroke-dasharray: 314; 41 stroke-dashoffset: 314; 42 animation: dashFadeOut 0.5s ease-in-out forwards; 43 transform: rotate(-90deg); 44 transform-origin: 50% 50%; 45} 46 47@keyframes dashFadeOut { 48 0% { 49 stroke-dashoffset: 314; 50 opacity: 1; 51 } 52 70% { 53 stroke-dashoffset: 0; 54 opacity: 1; 55 } 56 100% { 57 stroke-dashoffset: 0; 58 opacity: 0; 59 } 60} 61

試したこと

思いつく限りコードをいじり、最初はsvgを使わずナビゲーションのアクテイブからインアクティブに切り替わる際、白点周囲をくるりとまわる仕様を実行しようとしましたが、うまくいきませんでした。
その際のコードなどは申し訳ありませんがありません。

補足情報(FW/ツールのバージョンなど)

javascriptをまだまだ使いこなせていない為、できるだけ噛み砕いて教えていただけると助かります

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

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

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

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

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

int32_t

2023/12/12 14:55

スタイルシートも開示してください。 問題が再現できるのに足るすべてのソースがないと回答は難しいです。
退会済みユーザー

退会済みユーザー

2023/12/12 20:17

大変申し訳ありません 初めての質問でテンパってしまいうっかりしておりました。 すぐに修正いたしますのでアドバイスいただけるとありがたいです
int32_t

2023/12/12 23:23

updateNavigation() を呼ぶコードがありません。updateScrollPositions() の実装がありません。ので、依然として他者が再現することはできません。
yambejp

2023/12/13 01:27 編集

サンプルのどの仕様を真似たいのかわからないですが マウスカーソルが大きく開くところですか? 「円が白点の周囲をくるりとまわる」とは異なるように感じます。 またご提示のサンプルだとアンカーの中にsvgを置いているのでなにをトリガーに動作したいかもよくわかりません。 もう少しソースを絞って、希望する動作も図示すると伝わりやすいかもしれません
退会済みユーザー

退会済みユーザー

2023/12/13 21:30

様々なご指摘ありがとうございます。回答も含め見せていただいた所、私の圧倒的な質問力不足、説明不足がわかりました。 時間を割いて色々アドバイスをいただいた皆様には本当に感謝しております。 しかし、これ以上コードを広く見せると情報開示の制限に引っかかる為、あくまでこのコードを元に推測いただけるとありがたいです。 実装したい具体的な内容についてですが、 現在、ナビゲーションがスクロールと連動しアクティブ時に左横に白点が表示され現在位置を示すところまではできており、それに加え、アクティブからインアクティブに切り替わる際、SVGを使って、白点が消える前に白点周囲をぐるりと円を描く仕様を追加したかったのです。 ただ、SVGをはじめて使った為、使用法がわからず、助けを求め殴り書きしてしまいました。 なにかしらヒントをいただけるととてもありがたいです。 情報不足で申し訳ありませんが引き続きご協力いただけると助かります
yambejp

2023/12/14 00:09 編集

ソースが出せないのはそういう事情もあるでしょうから仕方ありませんが 前回も書きましたが手書きでいいので図示してください
guest

回答2

0

質問の主旨がよくわからないのでサークルにhoverしたとき回転して消えるCSS

CSS

1<style> 2.circle-animation{ 3stroke-dasharray: 20; 4} 5.circle-animation:hover { 6animation: dashFadeOut linear 2s forwards; 7} 8@keyframes dashFadeOut { 9 0% { 10 stroke-dashoffset: 314; 11 opacity: 1; 12 } 13 70% { 14 stroke-dashoffset: 0; 15 opacity: 1; 16 } 17 100% { 18 stroke-dashoffset: 0; 19 opacity: 0; 20 } 21} 22</style> 23<svg viewBox="0 0 200 200" width=100 height=100 class="circle-wrapper-sp"> 24<rect width="200" height="200" fill="red" /> 25<circle cx="100" cy="100" r="50" fill="transparent" stroke="#fff" stroke-width="10" class="circle-animation" /> 26</svg>

調整版

別の所をクリックしたときにアクティブが外れる処理って感じですかね?
一応ざっと入れておきました

css

1<style> 2.circle-animation.leave { 3animation: dashFadeOut linear 2s forwards; 4} 5@keyframes dashFadeOut { 6 0% { 7 stroke-dashoffset: 314; 8 opacity: 1; 9 } 10 70% { 11 stroke-dashoffset: 0; 12 opacity: 1; 13 } 14 100% { 15 stroke-dashoffset: 0; 16 opacity: 0; 17 } 18} 19.circle-wrapper-sp.active .circle-animation{ 20 r:10px; 21 fill:white; 22} 23.circle-wrapper-sp:not(.leave) .circle{ 24opacity:0; 25} 26.circle-wrapper-sp{ 27transform: rotate(-90deg); 28} 29.circle-wrapper-sp.leave .circle{ 30animation: circle 1s forwards; 31} 32 33@keyframes circle { 34 0% { stroke-dasharray: 0 502; opacity:1; } 35 50% { opacity:1; } 36 99.9%,to { stroke-dasharray: 502 502; opacity:0;} 37} 38</style> 39<script> 40document.addEventListener('animationend',({target})=>{ 41 const c=target.closest('.leave')?.classList; 42 if(target.matches('.circle') && c){ 43 c.remove('leave'); 44 c.remove('active'); 45 } 46}); 47document.addEventListener('click',({target})=>{ 48 const c1=target.closest('.circle-wrapper-sp:not(.active,.leave)')?.classList; 49 const c2=document.querySelector('.circle-wrapper-sp.active')?.classList; 50 if(c1){ 51 if(c2) c2.add('leave'); 52 c1.add('active'); 53 } 54}); 55 56</script> 57<svg viewBox="0 0 200 200" width=100 height=100 class="circle-wrapper-sp"> 58<rect width="200" height="200" fill="red" /> 59<circle cx="100" cy="100" r="5" fill="transparent" stroke="#fff" stroke-width="10" class="circle-animation" /> 60<circle cx="100" cy="100" r="80" fill="transparent" stroke="#fff" stroke-width="10" class="circle" /> 61</svg> 62<svg viewBox="0 0 200 200" width=100 height=100 class="circle-wrapper-sp"> 63<rect width="200" height="200" fill="red" /> 64<circle cx="100" cy="100" r="5" fill="transparent" stroke="#fff" stroke-width="10" class="circle-animation" /> 65<circle cx="100" cy="100" r="80" fill="transparent" stroke="#fff" stroke-width="10" class="circle" /> 66</svg> 67<svg viewBox="0 0 200 200" width=100 height=100 class="circle-wrapper-sp"> 68<rect width="200" height="200" fill="red" /> 69<circle cx="100" cy="100" r="5" fill="transparent" stroke="#fff" stroke-width="10" class="circle-animation" /> 70<circle cx="100" cy="100" r="80" fill="transparent" stroke="#fff" stroke-width="10" class="circle" /> 71</svg> 72

投稿2023/12/13 02:29

編集2023/12/14 06:36
yambejp

総合スコア115286

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

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

退会済みユーザー

退会済みユーザー

2023/12/13 22:41

ありがとうございます。こちらの聞き方が悪かったせいで行いたい実装内容と異なるものとなりましたが、 別の場所で実装したかった内容だったので参考にさせていただきました。
yambejp

2023/12/14 06:36

改めてこういうことかなというものを上げておきました。
guest

0

(コードが不完全なので憶測になりますが)

js

1$('nav').append('<div class="dot" style="left: ' + dotPosition + 'px;"></div>');

dot クラスのスタイルに position プロパティの設定がないのかもしれません。left プロパティは position: absoluteposition: fixedposition: relative などのときのみ有効です。

投稿2023/12/12 23:26

int32_t

総合スコア21207

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

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

退会済みユーザー

退会済みユーザー

2023/12/13 22:46

ありがとうございます。こちらの情報開示不足、伝達能力不足により混乱させてしまい申し訳ありません 貴重なご意見参考にさせていただきます
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.44%

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

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

質問する

関連した質問