So I'm coding this website and I what I want it to do before it changes to another website that I linked to the whole page is fade out. And when it's finally in the website, it fades in.
Does anybody know the code to this?
You can have a css animation for your fade-out and then use setTimeout() in js to delay the process and navigate to a new page via js after the animation is done
(instead of <a> tag)
function navigate(){
const element = document.querySelector('.otherWebsite');
element.classList.add('animation'); // setting the animation class to the element
setTimeout(() =>{
location.assign('https://stackoverflow.com')
} , 3000) // delaying the process of the navigation for 3s (3000ms)
}.otherWebsite{
padding: 10px;
background-color: green;
color: #fff;
}
.animation{
animation: fadeout 3s linear 1 forwards;
}
@keyframes fadeout {
from{
opacity: 1;
}
to{
opacity: 0;
}
}<div class="otherWebsite" onclick="navigate()">Click here</div>Note: You can also make the js function flexible for multiple tags using data-href or your preferred data set
document.querySelectorAll('[data-href]').forEach(element =>{ // looping though all tags with 'data-href' in the page
// setting an onclick event listener for the element
element.onclick = () =>{
element.classList.add('animation') // setting animation class to element
const link = element.dataset.href || element.getAttribute('data-href'); // getting the link from the 'data-href' attribute
setTimeout(() => location.assign(link) , 3000) // navigate to a new website after 3s (3000ms)
}
}).otherWebsite{
padding: 10px;
background-color: green;
color: #fff;
margin: 10px 0px;
}
.animation{
animation: fadeout 3s linear 1 forwards;
}
@keyframes fadeout {
from{
opacity: 1;
}
to{
opacity: 0;
}
}<div class="otherWebsite" data-href="https://stackoverflow.com">Website (stackoverflow)</div>
<div class="otherWebsite" data-href="https://google.com">Website 2 (google)</div>