Subnav Reveal Animation

Developer
Sicontis
Size
2,709 Kb
Views
72,864
  1. Subnav Reveal Animation Previews
  2. Subnav Reveal Animation HTML Codes
  3. Subnav Reveal Animation CSS Codes
  4. Subnav Reveal Animation JS Codes

How do I make an subnav reveal animation?

What is a subnav reveal animation? How do you make a subnav reveal animation? This script and codes were developed by Sicontis on 12 July 2022, Tuesday.

Subnav Reveal Animation Previews
IQ Test

Subnav Reveal Animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Subnav Reveal Animation </title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/typicons/2.0.8/typicons.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <div class="interface"> <div class="image"> </div> <div class="topnav"> <ul> <li class="topico"><i class="typcn typcn-export"></i></li> <li class="topico"><i class="typcn typcn-cloud-storage"></i></li> <li class="topico"><i class="typcn typcn-trash"></i></li> </ul> </div> <div class="subnav"> <ul> <li class="subico"><i class="typcn typcn-home-outline"></i></li> <li class="subico"><i class="typcn typcn-zoom"></i></li> <li id="trigger"><i class="typcn typcn-minus"></i></li> <li class="subico"><i class="typcn typcn-user-outline"></i></li> <li class="subico"><i class="typcn typcn-heart-outline"></i></li> </ul> </div> </div>
</div> <script src="js/index.js"></script>
</body>
</html>

Subnav Reveal Animation - Script Codes CSS Codes

body { background: #FFFFF3;
}
.container { display: flex; justify-content: center; align-items: center; position: fixed; top: 0; right: 0; bottom: 0; left: 0;
}
.interface { width: 300px; height: 500px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; background: #E0E3DA;
}
.image { width: 100%; height: 360px; background: #A593E0; transform: translateY(80px);
}
.topnav { max-width: 100%; width: 5px; max-height: 60px; height: 25px; background: #566270; transform-origin: center 0; transform: translateY(072px); border-radius: 3px; overflow: hidden;
}
.topnav ul { display: flex; justify-content: space-around; align-items: center; height: 100%;
}
.topnav li { color: #FFFFFF;
}
.subnav { width: 100%; height: 60px; background: #E0E3DA;
}
.subnav ul { display: flex; justify-content: space-around; align-items: center; height: 100%;
}
.subnav li { font-size: 2em; color: #566270;
}
.subico { opacity: 1;
}
.topico { opacity: 0;
}
/* ANIMATION REVEAL */
/* 1. Move bar up and expand */
.open { transform: translateY(0px); animation: 1s reveal forwards;
}
/* 2. Slide image up at same time */
.slide-up { animation: slideUp .5s forwards;
}
/* 3. Fade out subnav icons */
.subico-fade-out { animation: fadeOut .5s .5s forwards;
}
/* 4. Fade in topnav icons */
.topico-fade-in { animation: fadeIn .5s 1s forwards; font-size: 2em;
}
/* ANIMATION CLOSE */
/* 1. Fade out topnav icons */
.topico-fade-out { animation: fadeOut .5s; font-size: 2em;
}
/* 2. Close bar and slide down */
.close { animation: 1s hide forwards;
}
/* 3. Slide image down */
.slide-down { transform: translateY(0px); animation: slideDown .5s .5s forwards;
}
/* 4. Fade in subnav */
.subico-fade-in { opacity: 0; animation: fadeIn .5s 1s forwards;
}
@keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; }
}
@keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; }
}
@keyframes slideUp { 0% { transform: translateY(80px); } 100% { transform: translateY(0px); }
}
@keyframes slideDown { 0% { transform: translateY(0px); } 100% { transform: translateY(80px); }
}
@keyframes reveal { 0% { height: 25px; width: 5px; border-radius: 3px; transform: translateY(72px); } 50% { height: 80px; width: 5px; border-radius: 0; transform: translateY(0px); } 100% { height: 80px; width: 100%; border-radius: 0; transform: translateY(0px); }
}
@keyframes hide { 0% { height: 80px; width: 100%; border-radius: 0; transform: translateY(0px); } 50% { height: 80px; width: 5px; border-radius: 0; transform: translateY(0px); } 100% { height: 25px; width: 5px; border-radius: 3px; transform: translateY(72px); }
}

Subnav Reveal Animation - Script Codes JS Codes

let topnav = document.querySelector('.topnav');
let image = document.querySelector('.image');
let subIcos = document.querySelectorAll('.subico');
let topIcos = document.querySelectorAll('.topico');
let trigger = document.getElementById('trigger');
let aniOpen = false;
trigger.addEventListener('click', () => { if (aniOpen) { topIcos.forEach(btn => btn.classList.toggle('topico-fade-out')); topnav.classList.toggle('close'); image.classList.toggle('slide-down'); subIcos.forEach(btn => btn.classList.toggle('subico-fade-in')); } topnav.classList.toggle('open'); image.classList.toggle('slide-up'); subIcos.forEach(btn => btn.classList.toggle('subico-fade-out')); topIcos.forEach(btn => btn.classList.toggle('topico-fade-in')); aniOpen = true;
});
Subnav Reveal Animation - Script Codes
Subnav Reveal Animation - Script Codes
Home Page Home
Developer Sicontis
Username Sicontis
Uploaded July 12, 2022
Rating 3
Size 2,709 Kb
Views 72,864
Do you need developer help for Subnav Reveal Animation?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Sicontis (Sicontis) Script Codes
Name
Laracasts Nav Bar
That Reddit Guy
Striped Sliding Navigation
Wikipedia Search
Simple Modal
Pure CSS Shapes
Bank Quick Transfer Interface Vue JS
Simple Day Timer
Portfolio
A Pen by Sicontis
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!