Card Carousel Using Javascript | Frontend Everything - 2022

 

Neumorphism Menu Toggle Animation in HTML, CSS & JavaScript | Project Series Day - 17 | Frontend everything

preview

Hello Everyone 👋Welcome to My New Blog. Today I have made a neumorphism toggle animation with the help of HTML, CSS, and JavaScript | It is Project Series Day 16. 😍

I am Piyush, Sharing About Web development Daily. You can also check out me at @frontendeverything.

Let's start making this simple animate or scroll step by step.

Video  of the project,

So that was the preview now let us start making the project 😄 First, we will code HTML then CSS and javascript, and also I have shared codepen ink to make it easier for you.

HTML 🎈( step - 1)

In HTML we have made a div and given it a class toggle. And a span tag for lines of menu button

<div class="toggle">
	<span></span>
</div>

After the HTML we will design the menu button and give it a neumorphism effect so it becomes cooler.

CSS🎈( step - 2)

*,
*::after,
*::before {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	min-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #e7e7e7;
}

.toggle {
	height: 100px;
	width: 100px;
	border-radius: 15px;
	background: #e7e7e7;
	box-shadow: 8px 8px 15px #d2d2d2, -8px -8px 15px #fcfcfc;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: 0.5s;
}

.toggle span {
	width: 50px;
	height: 5px;
	border-radius: 5px;
	background: #00000080;
	box-shadow: 0 15px 0 #00000080, 0 -15px 0 #00000080;
	transition: 0.5s;
}

.toggle.active {
	border-radius: 50%;
}

.toggle.active span {
	transform: rotate(45deg);
	box-shadow: none;
}

.toggle.active span::after {
	content: "";
	width: 50px;
	height: 5px;
	border-radius: 5px;
	background: red;
	position: absolute;
	transform: rotate(90deg);
	background: #00000080;
}

Now we have done the CSS coding as well, now let's move to javascript. in javascript, we have not done enough coding. we have written for toggle button class changer like, on clicking button- class change to active.

let menuToggle = document.querySelector(".toggle");
menuToggle.addEventListener("click", function () {
	menuToggle.classList.toggle("active");
});

All the coding part is done, now let us see the final output, and also below I have mentioned the codepen link.

Final Output

The codepen link is here for making your work easier!

Click here for the code!

.

.

.

.

.

.

Thank You For Scrolling Till here 😊. If You gain any knowledge then do checkout me at @frontendeverything. I am Piyush 🎉 I provide Content related to programming, technology, web development  Daily.

.

More blogs you should give a check!

• Pexels Website Clone With HTML< CSS and Javascript
• Word Counter In Angular JS
• Responsive Newsletter in CSS
• Dark And Night mode toggle button in javascript
• Best Youtube Channels For Learning Coding
• Top-notch Project ideas For HTML< CSS< Javascript

• Best Platform To sell your Website Templates
• Google Homepage Clone With Html and CSS