Issue
I'm trying to add a feature which when I click on my navbar, the animation restarts on the click, but I can't seem to make it work
JAVSCRIPT
const homeButton = document.getElementById('li-home');
const home = document.getElementById('home');
function refreshHome() {
home.removeClass('logo-animation')
home.addClass('logo-animation');
setTimeout(function() {
home.classList.remove('logo-animation');
}, 1000);
}
homeButton.onclick = refreshHome;
CSS class
.home-animation {
animation: tracking-in-contract 1.2s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}
HTML
<header id="home">
<div class="logo logo-animation" data-glitch="Soccmai">
<div class="glitch-bloc">
<p class="invisible-text">{ soccmai }</p>
<p class="glitchedAnim">{ soccmai }</p>
<p class="glitchedAnim">{ soccmai }</p>
<p class="glitchedAnim">{ soccmai }</p>
</div>
</div>
<div class="underLogo">
<h2>Web Developer | Graphic Designer</h2>
</div>
</header>
<nav>
<ul>
<li><a href='#home' id="li-home">Home</a></li>
<li><a href='#about-me'>About Me</a></li>
<li>Projects</li>
<li>Skills</li>
<li>Contact</li>
</ul>
</nav>
I tried adding addClass, removeClass, or classList.add, classList.remove, but it doesn't change anything
Solution
The method is classList.add
not .addClass
. I think you might be trying to use the JQuery library.
See classList for more info : https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
Answered By - Ronnie Royston
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.