実現したいこと
サイトのナビゲーション管理で、各セクションにスクロールした際、現在位置を示す白点をナビ左に表示し、
アクテイブからインアクティブになる際、白点が消失時、円が白点の周囲をくるりとまわるような動きを実装したい。
(現在、ナビゲーションが各セクションにスクロールした際、ナビゲーション左横に白点を表示(アクティブ)し、別のセクションに移動した際、白点が消失(インアクティブ)するところまではできており、今後、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 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をまだまだ使いこなせていない為、できるだけ噛み砕いて教えていただけると助かります


