diff --git a/wiki/pages/tryhomepage.html b/wiki/pages/tryhomepage.html index ff0d8392f4c2ab8b1894e2ba46fb5c3928ef4cc7..ef9bc990c21232813ff94f62636621462eefdaa9 100644 --- a/wiki/pages/tryhomepage.html +++ b/wiki/pages/tryhomepage.html @@ -52,6 +52,25 @@ transform: translate(-50%, -50%); color: #ffffff; } + + .logo{ + position: absolute; + display: inline-block; + bottom: -20px; + opacity: 0; + } + + .logo.active{ + bottom: 0; + opacity: 1; + transition: ease-in-out 0.5s; + } + + .logo.fade{ + bottom: 150px; + opacity: 0; + transition: ease-in-out 0.5s; + } body { font-family: Calibri, sans-serif; line-height: 1.6; @@ -78,7 +97,33 @@ </div> <script> + let intro = document.querySelector('.intro'); + let logo = document.querySelector('.logoheader'); + let logoSpan = document.querySelectorAll('.logo'); + + window.addEventListener('DOMContentLoaded', ()=>{ + setTimeout(()=>{ + logoSpan.forEach((span, idx)=>{ + setTimeout(()=>{ + span.classList.add('active'); + }, (idx+1) * 400) + }); + + setTimeout(()=>{ + logoSpan.forEach((span, idx)=>{ + setTimeout(()=>{ + span.classList.remove('active'); + span.classList.add('fade'); + }, (idx + 1) * 50) + + }) + }, 2000); + setTimeout(()=>{ + intro.style.top = '-100vh'; + }, 2300) + }) + }) </script> </body> </html>