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 |
Mobile Menu Concept WIP | 4,592 Kb |
Animate delay Sass Mixin | 3,050 Kb |
Responsive Checkout Concept WIP | 6,323 Kb |
A Pen by alex rodrigues | 3,920 Kb |
Jquery Scroll test | 3,879 Kb |
Front End Age Gate | 5,806 Kb |
WIP - Checkout Flow Steps Progress mobile concept | 3,960 Kb |
Toying With Flexslider | 5,052 Kb |
Responsive Table-less Shopping Cart | 6,637 Kb |
SA_testing | 2,188 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 |
Multi-step GSAP animation | Acacheung | 2,668 Kb |
Lunar eclipse | Ademilter | 2,056 Kb |
Ghost | Mghayour | 11,738 Kb |
Rows with image hover effect | Amit-webdesigner | 12,875 Kb |
Pure CSS Spinners | Jlong | 2,043 Kb |
Rrremark.com Overlay Highlighter | Derickruiz | 4,438 Kb |
Minimal Menu | Achudars | 3,430 Kb |
Gulpfile | Aimhigherwebdesign-amy | 1,765 Kb |
Portfolio page | Bhavya_j | 2,804 Kb |
Simple DevTools | Deegill | 2,511 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!