Star Wars Toggle Icon Animation
How do I make an star wars toggle icon animation?
StarWars.com's Toggle Icon Animation, it was really great, so I decided to add it to CodePen. It is designed and developed by StarWars.com. What is a star wars toggle icon animation? How do you make a star wars toggle icon animation? This script and codes were developed by Rıza Selçuk Saydam on 02 August 2022, Tuesday.
Star Wars Toggle Icon Animation - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Star Wars Toggle Icon Animation</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body{ background:#222; padding: 100px; font-size: 10px; /*increase me to scale toogle-icon*/
}
#nav-container{ position: absolute; top: 50%; left: 50%; margin:-3em;
}
/*toggle-icon*/
.toggle-icon { display: block; position: relative; width: 100%; margin: -2.2em auto 0 0.2em; -webkit-transition: margin 600ms; -moz-transition: margin 600ms; transition: margin 600ms; cursor: pointer;
}
.toggle-icon .bar { display: block; width: 3.8em; height: 0.2em; margin: 0.9em; border-right: 2.8em solid #fff; border-left: 0.6em solid #d6d6d6; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition-property: -webkit-transform, margin, border-right-color, box-shadow; -moz-transition-property: -moz-transform, margin, border-right-color, box-shadow; transition-property: transform, margin, border-right-color, box-shadow; -webkit-transition-duration: 600ms; -moz-transition-duration: 600ms; transition-duration: 600ms;
} .toggle-icon .bar:nth-of-type(1) { -webkit-transition: opacity 300ms; -moz-transition: opacity 300ms; transition: opacity 300ms; } .toggle-icon .bar:nth-of-type(2) { -webkit-transform: rotate(-180deg); -moz-transform: rotate(-180deg); -ms-transform: rotate(-180deg); -o-transform: rotate(-180deg); transform: rotate(-180deg); }
/*pushed*/
.pushed .toggle-icon { margin: -3.2em 0 0 0.7em;
} .pushed .bar:nth-of-type(1) { opacity: 0; } .pushed .bar:nth-of-type(2) { margin-left: 1.4em; -webkit-transform: rotate(-137deg) translateY(-1.5em); -moz-transform: rotate(-137deg) translateY(-1.5em); -ms-transform: rotate(-137deg) translateY(-1.5em); -o-transform: rotate(-137deg) translateY(-1.5em); transform: rotate(-137deg) translateY(-1.5em); } .pushed .bar:nth-of-type(3) { margin-left: 0.5em; -webkit-transform: rotate(-42deg); -moz-transform: rotate(-42deg); -ms-transform: rotate(-42deg); -o-transform: rotate(-42deg); transform: rotate(-42deg); }
.pushed .toggle-icon:hover .bar:nth-of-type(2) { border-right-color: #e9b8b9; box-shadow: 0.4em 0 0.6em 0.1em rgba(205,40,44,0.75);
}
.pushed .toggle-icon:hover .bar:nth-of-type(3) { border-right-color: #ddf1da; box-shadow: 0.4em 0 0.6em 0.1em rgba(83,228,68,0.65);
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div id="nav-container"> <div class="toggle-icon"> <span class="bar"></span> <span class="bar"></span> <span class="bar"></span> </div><!-- /toggle-icon -->
</div><!-- /nav-container --> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Star Wars Toggle Icon Animation - Script Codes CSS Codes
body{ background:#222; padding: 100px; font-size: 10px; /*increase me to scale toogle-icon*/
}
#nav-container{ position: absolute; top: 50%; left: 50%; margin:-3em;
}
/*toggle-icon*/
.toggle-icon { display: block; position: relative; width: 100%; margin: -2.2em auto 0 0.2em; -webkit-transition: margin 600ms; -moz-transition: margin 600ms; transition: margin 600ms; cursor: pointer;
}
.toggle-icon .bar { display: block; width: 3.8em; height: 0.2em; margin: 0.9em; border-right: 2.8em solid #fff; border-left: 0.6em solid #d6d6d6; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition-property: -webkit-transform, margin, border-right-color, box-shadow; -moz-transition-property: -moz-transform, margin, border-right-color, box-shadow; transition-property: transform, margin, border-right-color, box-shadow; -webkit-transition-duration: 600ms; -moz-transition-duration: 600ms; transition-duration: 600ms;
} .toggle-icon .bar:nth-of-type(1) { -webkit-transition: opacity 300ms; -moz-transition: opacity 300ms; transition: opacity 300ms; } .toggle-icon .bar:nth-of-type(2) { -webkit-transform: rotate(-180deg); -moz-transform: rotate(-180deg); -ms-transform: rotate(-180deg); -o-transform: rotate(-180deg); transform: rotate(-180deg); }
/*pushed*/
.pushed .toggle-icon { margin: -3.2em 0 0 0.7em;
} .pushed .bar:nth-of-type(1) { opacity: 0; } .pushed .bar:nth-of-type(2) { margin-left: 1.4em; -webkit-transform: rotate(-137deg) translateY(-1.5em); -moz-transform: rotate(-137deg) translateY(-1.5em); -ms-transform: rotate(-137deg) translateY(-1.5em); -o-transform: rotate(-137deg) translateY(-1.5em); transform: rotate(-137deg) translateY(-1.5em); } .pushed .bar:nth-of-type(3) { margin-left: 0.5em; -webkit-transform: rotate(-42deg); -moz-transform: rotate(-42deg); -ms-transform: rotate(-42deg); -o-transform: rotate(-42deg); transform: rotate(-42deg); }
.pushed .toggle-icon:hover .bar:nth-of-type(2) { border-right-color: #e9b8b9; box-shadow: 0.4em 0 0.6em 0.1em rgba(205,40,44,0.75);
}
.pushed .toggle-icon:hover .bar:nth-of-type(3) { border-right-color: #ddf1da; box-shadow: 0.4em 0 0.6em 0.1em rgba(83,228,68,0.65);
}
Star Wars Toggle Icon Animation - Script Codes JS Codes
$(".toggle-icon").click(function() { $('#nav-container').toggleClass("pushed");
});
/*** starwars.com's Toggle Icon Animation ***/
Developer | Rıza Selçuk Saydam |
Username | rss |
Uploaded | August 02, 2022 |
Rating | 4.5 |
Size | 3,180 Kb |
Views | 66,792 |
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!
Name | Size |
Loader Animation | 2,761 Kb |
SOCIAL BANG | 8,251 Kb |
Pigecon | 3,730 Kb |
How a Text Gradient is Made | 4,908 Kb |
Contact Page CSS3 Transation | 6,686 Kb |
Little Boxes on an iPhone | 4,036 Kb |
METU CSS3 Logo | 2,504 Kb |
Sticky footer - adjustPusher | 2,127 Kb |
Button Switch | 5,239 Kb |
Flat iOS 7 Safari Icon | 3,332 Kb |
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!
Name | Username | Size |
Stylize Stories | Jvhti | 2,465 Kb |
Boom | Mhrjnsa1 | 1,794 Kb |
CSS Google Now | Jackmoran | 3,196 Kb |
Responsive scrolling text | Ashdurham | 2,259 Kb |
A Pen by Moeid Saleem | Moeidsaleem | 1,862 Kb |
CSS Piano | Dannystyle | 5,138 Kb |
Revolving Text Landing Page Trial | TimRuby | 2,976 Kb |
Touch Carousel - last, no gaps. | Berkin | 4,332 Kb |
Blog Concept 2 | JGallardo | 2,994 Kb |
Flat Star Wars | Kevinjannis | 37,947 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!