Playing with transitions & menus
How do I make an playing with transitions & menus?
Using the http://www.bigspaceship.com/ menu as a model to learn about using transition delays and transforms to animate multiple Lists and items. . What is a playing with transitions & menus? How do you make a playing with transitions & menus? This script and codes were developed by Alex Rodrigues on 13 August 2022, Saturday.
Playing with transitions & menus - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Playing with transitions & menus</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="menu_wrap"> <span class="menu icon1"></span> <span class="menu icon2"></span> <span class="menu icon3"></span>
</div>
<div class="header"> <ul> <li><a class="linkNav" href="#">Articles</a></li> <li><a class="linkNav" href="#">Testing</a></li> <li><a class="linkNav" href="#">Bob Loblaw</a></li> <li><a class="linkNav" href="#">Law Blog</a></li> </ul>
</div>
<h1>Playing with Transitions & Menus</h1> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Playing with transitions & menus - Script Codes CSS Codes
@import url(http://fonts.googleapis.com/css?family=Droid+Serif:400,400italic);
body { font-family: 'Droid Serif', serif; -webkit-font-smoothing: antialiased;
}
h1 { font-weight: normal; font-size: 3em; letter-spacing: -1px; margin: 10% 0; text-align: center;
}
h1:after { width: 35%; height: 4px; content: " "; background: #f30; display: block; margin: .5em auto;
}
* { box-sizing: border-box;
}
li { list-style-type: none;
}
/* MENU ICON */
.menu_wrap { position: absolute; right: 5%; top: 5%; padding: 1.25em; padding-bottom: .25em; z-index: 101; overflow: hidden; cursor: pointer; /* background: #d5d5d5;*/ -webkit-transition: all .25s ease; -moz-transition: all .25s ease; -ms-transition: all .25s ease; -o-transition: all .25s ease; transition: all .25s ease; /* border-radius:100%;*/
}
.menu_wrap .menu { background: #191919; display: block; border-radius: 1em; width: 100%; height: .18em; position: absolute; left: 0; -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -ms-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; transition: all .5s ease-in-out;
}
.menu_wrap .menu.active { background: #fff;
}
.menu_wrap .menu.icon1 { top: 0%;
}
.menu_wrap .menu.icon1.active { top: 50%; -moz-transform: scale(1) rotate(225deg); -webkit-transform: scale(1) rotate(225deg); -o-transform: scale(1) rotate(225deg); -ms-transform: scale(1) rotate(225deg); transform: scale(1) rotate(225deg);
}
.menu_wrap .menu.icon2 { top: 50%; margin-top: -.15em;
}
.menu_wrap .menu.icon2.active { top: 50%; -moz-transform: rotate(-225deg); -webkit-transform: rotate(-225deg); -o-transform: rotate(-225deg); -ms-transform: rotate(-225deg); transform: rotate(-225deg);
}
.menu_wrap .menu.icon3 { top: 100%; margin-top: -.25em; -webkit-transition: all .75s ease-in-out; -moz-transition: all .75s ease-in-out; -ms-transition: all .75s ease-in-out; -o-transition: all .75s ease-in-out; transition: all .75s ease-in-out;
}
.menu_wrap .menu.icon3.active { top: -300%; background: transparent;
}
/* Header */
.header { position: fixed; padding: 2%; background: #191919; width: 100%; height: 100%; color: #fff; top: 0; left: 0; z-index: -1; opacity: 0; -webkit-transition: all .25s ease-in-out; -moz-transition: all .25s ease-in-out; -ms-transition: all .25s ease-in-out; -o-transition: all .25s ease-in-out; transition: all .25s ease-in-out;
}
.header li { position: relative; top: 2em; -webkit-transition: all .25s linear; -moz-transition: all .25s linear; -ms-transition: all .25s linear; -o-transition: all .25s linear; transition: all .25s linear; color: transparent; opacity: 0; transform: rotateX(90deg);
}
.header li a { font-size: 2em; line-height: 2; color: transparent; text-decoration: none; border-bottom: 2px solid transparent; -webkit-transition: all .25s linear; -moz-transition: all .25s linear; -ms-transition: all .25s linear; -o-transition: all .25s linear; transition: all .25s linear;
}
.header li a:hover { border-bottom: 2px solid #fff;
}
.header li:nth-child(2) { -webkit-transition-delay: .1s; -moz-transition-delay: .1s; -o-transition-delay: .1s; transition-delay: .1s;
}
.header li:nth-child(3) { -webkit-transition-delay: .15s; -moz-transition-delay: .15s; -o-transition-delay: .15s; transition-delay: .15s;
}
.header li:nth-child(4) { -webkit-transition-delay: .2s; -moz-transition-delay: .2s; -o-transition-delay: .2s; transition-delay: .2s;
}
.header.active { z-index: 1; opacity: 1;
}
.header.active li { opacity: 1; top: 0em; color: #fff; transform: rotateX(0deg);
}
.header.active li a { color: white;
}
@media only screen and (max-width: 30em) { h1 { font-size: 2em; margin: 25% auto; } .menu_wrap { font-size: 80%; }
}
Playing with transitions & menus - Script Codes JS Codes
$('.menu_wrap').click(function() { $('.menu_wrap .menu, .header').toggleClass('active'); })
Developer | Alex Rodrigues |
Username | alex_rodrigues |
Uploaded | August 13, 2022 |
Rating | 3 |
Size | 4,147 Kb |
Views | 20,240 |
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 |
Transition Demo | 2,823 Kb |
Jquery Scroll test | 3,879 Kb |
Mobile Menu Concept WIP | 4,592 Kb |
Learning FlexBox | 2,821 Kb |
Front End Age Gate | 5,806 Kb |
WIP - Checkout Flow Steps Progress mobile concept | 3,960 Kb |
Responsive Checkout Concept WIP | 6,323 Kb |
Responsive Table-less Shopping Cart | 6,637 Kb |
Animated Bar Graphs | 3,919 Kb |
A Pen by alex rodrigues | 3,920 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 |
Popover | Teles | 2,248 Kb |
Halo 5 REQ Guide Bookmarklet | Cwacht | 3,993 Kb |
Contact | GanNichiHa | 2,514 Kb |
Double box-shadow | Daubac402 | 1,436 Kb |
HTM5 picture dropzone | Jaysalvat | 2,576 Kb |
Wikipedia Viewer | Codinger | 4,681 Kb |
Light Switch | Bartuc | 4,933 Kb |
Pictos font library from CodePen | Jstam | 3,790 Kb |
Pricing Table | Semenchenko | 6,784 Kb |
Opening Reveal Modal On Document Ready | Winghouchan | 1,787 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!