How To Animate A Bar In Javascript
Posted on April 24, 2021, 8 p.1000. by Bishal ( 1045)
Hi Everyone, Lawmaking With Bishal is back with a new project. And then take hold of your PC and open your favourite Code Editor and starting time coding with me. In this web log, we will create an animated navbar that will enhance the UI/UX of your website. Continue reading this blog to have a demo of the animated navbar. All the downloadable resource are attached to this blog, You tin hands download these with the help of the buttons below.
What is an blithe navigation bar?
Our crawly, blithe navigation bar gives visitors an attractive, responsive, and animated navigation bar. You can also add these to your website or to your portfolio and can create a not bad UI experience for the visitors.
How tin can I utilize this animated navigation bar using JavaScript?
You can easily re-create the code or can download the code from our website and can only paste information technology anywhere to get the animated navigation bar.
Practice I need to know how to code?
No, you don't demand to know how to code you lot can simply copy lawmaking from hither and paste it wherever y'all want your animated navigation bar. As well, you can try it on our website using the "TRY It NOW" option or can download the code using the "Download" push below.
What are the advantages of the animated navigation bar?
the blithe navigation bar is a very good fashion for using a navbar on a website.
How can I download the source code of the blithe navigation bar?
Scroll the page to the bottom in that location you will discover our download push to download the code.
In this blog, you tin can acquire, how to brand an blithe navigation bar using HTML, CSS, and JavaScript By Code With Bishal. Just Re-create The Code From Here And Paste It Into Your Website or portfolio. To Preview coil the page to the beginning. If you are having any trouble viewing the code simply refresh the page. The blithe navigation bar is a lightweight and piece of cake-to-use HTML, CSS, and JavaScript code that creates an animated navigation bar for y'all. In this blog, there are 5th sections on the webpage, in the outset department, you can get a preview of the blog, in the second section there are few FAQs and an overview of the blog, in the third section at that place are few more coding blogs you might like, in the 4th section yous tin Try our animated navigation bar using the "Endeavor Information technology NOW" push button, after that, you can re-create the code and paste it [that'due south the 5th section] and from the last section Yous can download the source code.
Some Screenshots
Pace by pace guide of creating an animated navigation bar:
Then this fourth dimension I have something interesting yous tin can put this where your clients or visitors will land or landing page and it will create a navbar with JavaScript animation (This is optimized for desktop equally well as for mobile).
-
Create a file with the name
index.html -
Open up
index.html -
Add the Broiler plate of HTML
Broiler Plate of HTML:
<!DOCTYPE html> <html> <caput> <title>Animated NavBar - Code With Bishal</championship> </caput> <!-- created by Code With Bishal - world wide web.codewithbishal.com --> <torso> </body> </html> After adding the broiler plate of HTML add the beneath lawmaking to create a three horizontal bar for our header/navbar.
<div id="ham"> <div id='top'></div> <div id='middle'></div> <div id='bottom'></div> </div> Then add together the header links :
<div id="header"> <div course="card" style="width: 18rem;"> <ul grade="nav-item"> <li class="nav-item">First Item</li> <li class="nav-item">Second Item</li> <li class="nav-item">Third Item</li> </ul> </div> </div> At present, let'due south add together the CSS or style to our HTML file and this will practice the styling of our navbar. So our second step is to add the CSS file, you tin re-create the code from below
-
Create a file
fashion.css -
Link External CSS file with your HTML file
Hither is how can you link:
Add together these code in the<head> </head> of your HTML certificate:
<link href="style.css" rel="stylesheet"> Now add some CSS code to thestyle.css file:
#ham { position: fixed; z-index: 5; top: 15px; left: 15px; cursor: pointer; transition: left 500ms ; } #ham div { width: 35px; height: 2px; margin-lesser: 8px; background-colour: #008bfcc5; transition: 500ms; } This will style our hamburger menu, and add the below to requite a hover effect when someone hovers over it.
#ham:hover > div { box-shadow: 0 0 1px #008bfcfa; } The below code will add together fashion to the menu when it'southward in the active state,
#ham.active { left: 230px; } #ham.active div { groundwork-color: #343838; } #ham.active:hover > div { box-shadow: 0 0 1px #343838; } #ham.active #top { transform: translateY(10px) rotate(-135deg); } #ham.active #middle { transform: calibration(0); } #ham.active #bottom { transform: translateY(-10px) rotate(-45deg); } Now, nosotros have to fashion the header, the below lawmaking volition practice the piece of work
#header { position: fixed; z-index: 4; overflow: none; opacity: 0; } #header.active { transition: 3000ms; left: 0px; opacity: one; } Now, to mode items within the header or nav links employ the code from below
.nav-item{ list-manner: none; padding: five%; font-size: 20px; font-weight: assuming; } We accept successfully added way to our header and now we can move on to our next pace that is adding JavaScript.
-
Create a file
script.js -
Link External JavaScript file with your HTML file
Hither is how can yous link:
Add these code in the<head> </caput> of your HTML document:
<script src="script.js"></script> At present add some codes to thescript.js file:
var sidebar = document.querySelector('#header'); var sidebarBtn = document.querySelector('#ham'); sidebarBtn.addEventListener('click', function(event) { if (this.classList.contains('agile')) { this.classList.remove('active'); sidebar.classList.remove('agile'); } else { this.classList.add('active'); sidebar.classList.add('active'); } }); Source Code
1) HTML Code:
<!DOCTYPE html> <html> <head> <title>Animated NavBar - Code With Bishal</title> </head> <!-- created past Code With Bishal - www.codewithbishal.com --> <body> <div id="ham"> <div id='pinnacle'></div> <div id='middle'></div> <div id='lesser'></div> </div> <div id="header"> <div class="card" style="width: 18rem;"> <ul class="nav-item"> <li class="nav-item">First Particular</li> <li course="nav-detail">Second Item</li> <li grade="nav-item">3rd Item</li> </ul> </div> </div> </body> </html> 2) CSS Code:
#ham { position: stock-still; z-index: five; top: 15px; left: 15px; cursor: arrow; transition: left 500ms ; } #ham div { width: 35px; height: 2px; margin-lesser: 8px; background-color: #008bfcc5; transition: 500ms; } #ham:hover > div { box-shadow: 0 0 1px #008bfcfa; } #ham.active { left: 230px; } #ham.agile div { background-color: #343838; } #ham.active:hover > div { box-shadow: 0 0 1px #343838; } #ham.active #meridian { transform: translateY(10px) rotate(-135deg); } #ham.agile #middle { transform: scale(0); } #ham.agile #bottom { transform: translateY(-10px) rotate(-45deg); } #header { position: fixed; z-index: iv; overflow: car; opacity: 0; } #header.active { transition: 3000ms; left: 0px; opacity: one; } .nav-item{ list-manner: none; padding: 5%; font-size: 20px; font-weight: bold; } 3) JavaScript Code:
var sidebar = document.querySelector('#header'); var sidebarBtn = document.querySelector('#ham'); sidebarBtn.addEventListener('click', office(upshot) { if (this.classList.contains('active')) { this.classList.remove('agile'); sidebar.classList.remove('active'); } else { this.classList.add('active'); sidebar.classList.add together('agile'); } }); Source: https://www.codewithbishal.com/example/how-to-create-animated-navigation-bar
Posted by: grangerapoing.blogspot.com
0 Response to "How To Animate A Bar In Javascript"
Post a Comment