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 Previews
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 |
Do you need developer help for Star Wars Toggle Icon 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!
Rıza Selçuk Saydam (rss) Script Codes
| Name | Size |
| Button Switch | 5,239 Kb |
| How a Text Gradient is Made | 4,908 Kb |
| Flutterby | 3,799 Kb |
| Flat iOS 7 Safari Icon | 3,332 Kb |
| Pigecon | 3,730 Kb |
| Little Boxes on an iPhone | 4,036 Kb |
| SOCIAL BANG | 8,251 Kb |
| Animated Flat Camera Icon | 3,843 Kb |
| Sticky footer - adjustPusher | 2,127 Kb |
| Contact Page CSS3 Transation | 6,686 Kb |
Create amazing blog posts 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!
Similar Scripts & Codes
| Name | Username | Size |
| Mosaic transition effect between two photos using jQuery | Stathisg | 2,518 Kb |
| Scroll Arrow | Robooneus | 4,437 Kb |
| Background Images | Jooonebug | 2,100 Kb |
| Loading animation with css | Icebob | 2,947 Kb |
| Responsive scrolling text | Ashdurham | 2,259 Kb |
| Cant get enough icecream in pure css3 | Melawire | 4,322 Kb |
| React Markdown Previewer | C0d0er | 3,190 Kb |
| Blog demo to use given styling | Andygirl | 2,412 Kb |
| Wavy Road with Dashes | Jonobr1 | 2,679 Kb |
| Velocity.js custom stagger | Tommiehansen | 4,805 Kb |
Do you want hide your ip address?
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!