Offscreen zoom nav

Developer
Chris Wright
Size
5,205 Kb
Views
46,552
  1. Offscreen zoom nav Previews
  2. Offscreen zoom nav HTML Codes
  3. Offscreen zoom nav CSS Codes
  4. Offscreen zoom nav JS Codes

How do I make an offscreen zoom nav?

Animated offscreen zoom navigation sequence. What is a offscreen zoom nav? How do you make a offscreen zoom nav? This script and codes were developed by Chris Wright on 12 July 2022, Tuesday.

Offscreen zoom nav Previews
IQ Test

Offscreen zoom nav - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Offscreen zoom nav</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <main role="main" class="m-experiment l-flex-column-one" id="result"> <h1>Off canvas zoom navigation</h1> <div class="m-frame js-frame-toggle"> <nav class="m-navigation" role="navigation">	<div class="m-user-profile">	<div class="m-user-image-outer">	<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/22318/bio_chris_copy.png" class="m-user-image" alt="Photo of Chris Wright" />	</div>	<div class="m-user-profile-content">	<h2 class="m-user-name">Chris Wright</h2>	<a href="http://www.twitter.com/cwrightdesign" class="m-user-twitter">@cwrightdesign</a>	</div>	</div>	<ul>	<li><a class="m-navigation-link" href="#">Mentions</a></li>	<li><a class="m-navigation-link" href="#">Likes</a></li>	<li><a class="m-navigation-link" href="#">Messages</a></li>	<li><a class="m-navigation-link" href="#">Settings</a></li>	<li><a class="m-navigation-link" href="#">Sign out</a></li>	</ul>	</nav>	<div class="m-content js-content-toggle">	<header class="m-header">	<a href="#" class="m-nav-trigger js-nav-trigger"> <!-- SVG for the menu --> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="32px" height="22.5px" viewBox="0 0 32 22.5" enable-background="new 0 0 32 22.5" xml:space="preserve"> <g class="svg-icon-menu"> <path fill="#FFFFFF" d="M20.945,8.75c0,0.69-0.5,1.25-1.117,1.25H3.141c-0.617,0-1.118-0.56-1.118-1.25l0,0 c0-0.69,0.5-1.25,1.118-1.25h16.688C20.445,7.5,20.945,8.06,20.945,8.75L20.945,8.75z"/> <path fill="#FFFFFF" d="M20.923,15c0,0.689-0.501,1.25-1.118,1.25H3.118C2.5,16.25,2,15.689,2,15l0,0c0-0.689,0.5-1.25,1.118-1.25 h16.687C20.422,13.75,20.923,14.311,20.923,15L20.923,15z"/> <path fill="#FFFFFF" d="M20.969,21.25c0,0.689-0.5,1.25-1.117,1.25H3.164c-0.617,0-1.118-0.561-1.118-1.25l0,0 c0-0.689,0.5-1.25,1.118-1.25h16.688C20.469,20,20.969,20.561,20.969,21.25L20.969,21.25z"/> </g> </svg> <!-- End SVG for the Menu --> Menu </a>	</header>	<div class="m-inner-content">	<p>Animating profile navigation, hit the menu button</p>	</div>	</div> </div>
</main> <script src="js/index.js"></script>
</body>
</html>

Offscreen zoom nav - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Nunito:400,300);
body { background: #222; color: #fff; font: 300 100%/1.6 Nunito;
}
h1 { font: 300 1.8em/1.2 Nunito; margin: 0 0 1em 0; text-align: center;
}
.l-flex-column-one { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}
.l-flex-row-one { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row;
}
.m-experiment { padding: 1em;
}
.m-experiment-navigation { margin: 0.5em auto;
}
.m-experiment-navigation li { display: -webkit-box; display: -ms-flexbox; display: flex;
}
.m-frame { background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/22318/bg_blur_copy.jpg") #000; height: 30em; overflow: hidden; position: relative; width: 30em;
}
.m-button-primary,
.m-button-secondary { border-radius: 3em; color: #000; display: block; margin: 1em; padding: 1em; text-align: center; text-decoration: none; -webkit-transition: background-color 0.4s ease-in-out; transition: background-color 0.4s ease-in-out; width: 10em;
}
.m-button-primary { background: #f49c2c;
}
.m-button-primary:hover { background: #bb5224;
}
.m-button-secondary { background: #eee;
}
.m-button-secondary:hover { background-color: #ddd;
}
.m-frame.is-toggled .m-navigation-link { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0);
}
.m-frame.is-toggled .m-navigation { -webkit-transform: translateX(100%); transform: translateX(100%);
}
.m-frame.is-toggled .m-navigation li:nth-of-type(1) .m-navigation-link { -webkit-transition-delay: 0.1s; transition-delay: 0.1s;
}
.m-frame.is-toggled .m-navigation li:nth-of-type(2) .m-navigation-link { -webkit-transition-delay: 0.2s; transition-delay: 0.2s;
}
.m-frame.is-toggled .m-navigation li:nth-of-type(3) .m-navigation-link { -webkit-transition-delay: 0.3s; transition-delay: 0.3s;
}
.m-frame.is-toggled .m-navigation li:nth-of-type(4) .m-navigation-link { -webkit-transition-delay: 0.4s; transition-delay: 0.4s;
}
.m-frame.is-toggled .m-navigation li:nth-of-type(5) .m-navigation-link { -webkit-transition-delay: 0.5s; transition-delay: 0.5s;
}
.m-frame.is-toggled .m-navigation li:nth-of-type(6) .m-navigation-link { -webkit-transition-delay: 0.6s; transition-delay: 0.6s;
}
.m-frame.is-toggled .m-content { -webkit-transform: scale(0.7) translateX(7em) translateY(1em); transform: scale(0.7) translateX(7em) translateY(1em);
}
.m-navigation { position: absolute; right: 100%; -webkit-transform: translateX(0); transform: translateX(0); -webkit-transition: -webkit-transform 0.4s ease-in-out; transition: -webkit-transform 0.4s ease-in-out; transition: transform 0.4s ease-in-out; transition: transform 0.4s ease-in-out, -webkit-transform 0.4s ease-in-out; width: 100%;
}
.m-navigation-link { opacity: 0; -webkit-transform: translateY(0.75em); transform: translateY(0.75em); -webkit-transition: opacity 0.4s ease-in-out, -webkit-transform 0.5s ease-in-out; transition: opacity 0.4s ease-in-out, -webkit-transform 0.5s ease-in-out; transition: opacity 0.4s ease-in-out, transform 0.5s ease-in-out; transition: opacity 0.4s ease-in-out, transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
}
.m-content { -webkit-transition: -webkit-transform 0.5s ease; transition: -webkit-transform 0.5s ease; transition: transform 0.5s ease; transition: transform 0.5s ease, -webkit-transform 0.5s ease; -webkit-transform-origin: bottom right; transform-origin: bottom right;
}
.m-inner-content { -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.m-inner-content { padding: 1em;
}
.m-navigation-link { color: #fff; display: block; font-size: 1.2em; padding: 0.75em; text-decoration: none; text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.8);
}
.m-content { background: #fff; color: #000; min-height: 100%; position: relative; z-index: 50;
}
.m-header { background-color: #ff6f79; padding: 1.5em; width: 100%;
}
.m-nav-trigger { color: #fff; height: 1em; padding: 1em 1em 1em 0; text-decoration: none; width: 1em;
}
.m-user-profile { padding: 1em; text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.8);
}
.m-user-profile:after { display: table; clear: both; content: " ";
}
.m-user-twitter { color: #fff; text-decoration: none;
}
.m-user-image { border-radius: 50%;
}
.m-user-name { font-size: 2em; line-height: 1em;
}
.m-user-image-outer { float: left; margin-right: 1em;
}
.m-user-profile-content { float: left;
}

Offscreen zoom nav - Script Codes JS Codes

//flexbox is centering the experiment so if you're browsing on something that doesn't have flexbox it'll probably be all over the place.
var d, mainToggle, navTrigger;
d = document;
mainToggle = d.querySelector( '.js-frame-toggle' );
navTrigger = d.querySelector( '.js-nav-trigger' );
navTrigger.addEventListener( 'click', function( e ){ e.preventDefault(); mainToggle.classList.toggle( 'is-toggled' );
});
Offscreen zoom nav - Script Codes
Offscreen zoom nav - Script Codes
Home Page Home
Developer Chris Wright
Username chriswrightdesign
Uploaded July 12, 2022
Rating 4.5
Size 5,205 Kb
Views 46,552
Do you need developer help for Offscreen zoom nav?

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!

Chris Wright (chriswrightdesign) Script Codes
Name
Grid - two columns with gutters
IPhone SVG
Flexbox responsive navigation
Experiments with nth-of-type animation
Grid - Row with minmax
SVG Noise blended radial
Background Noisy Radial Gradient
Reverse cascade
SVG Shadows
Bouncing ball arc horizontal
Create amazing marketing copy 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!