Fadout menu concept

Developer
Rune Sejer Hoffmann
Size
3,451 Kb
Views
8,096
  1. Fadout menu concept Previews
  2. Fadout menu concept HTML Codes
  3. Fadout menu concept CSS Codes
  4. Fadout menu concept JS Codes

How do I make an fadout menu concept?

What is a fadout menu concept? How do you make a fadout menu concept? This script and codes were developed by Rune Sejer Hoffmann on 10 December 2022, Saturday.

Fadout menu concept Previews
IQ Test

Fadout menu concept - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Fadout menu concept</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> <nav>	<ul>	<li>Home</li>	<li>About</li>	<li>Contact</li>	</ul>
</nav>
<div class='box'>	Fading <span>menu</span><p>- By Rune</p>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Fadout menu concept - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Abril+Fatface);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,300);
* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; box-sizing: border-box;
}
body { background-color: #f48e7f; font-family: 'Abril Fatface', cursive; color: #eaeaea; height: 200vh; background-image: url(http://artplague.dk/_assets/JSMS7R8B43.jpg); background-size: cover;
}
nav { position: fixed; width: calc(100% + 40px); margin-left: -20px; height: 70px; line-height: 65px; font-family: 'Open Sans', sans-serif; font-weight: 400; text-align: center; font-size: 16px; background-color: rgba(29, 40, 41, 0.98); z-index: 999;
}
nav:before, nav:after { content: ""; position: absolute; width: 70px; height: 2px; background-color: #f48e7f; right: 90px; top: 25px; -webkit-transform: rotate(-55deg); transform: rotate(-55deg);
}
nav:after { right: 60px; top: 12px;
}
nav ul li { display: inline-block; margin-left: 40px; margin-right: 40px; cursor: pointer; position: relative;
}
nav ul li:hover:before, nav ul li:hover:after { width: 100%;
}
nav ul li:after, nav ul li:before { content: ""; width: 100%; height: 2px; background-color: #f48e7f; position: absolute; bottom: 20px; right: 0; -webkit-transition: all .3s ease; transition: all .3s ease; width: 0;
}
nav ul li:before { left: 0;
}
.box { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); font-family: 'Abril Fatface', cursive; font-size: 10vw; color: #ee7260;
}
.box span { font-size: 3vw; display: block;
}
.box p { font-size: 1vw; display: block; font-family: 'Open Sans', sans-serif; font-weight: bold;
}

Fadout menu concept - Script Codes JS Codes

//Only webkit
//TODO: Does not work with mouse scroll
var position = $(window).scrollTop();
var height = 99;
var previousScroll = 0;
var nav = $('nav');
var scrolled = 0;
var aniNumber = 0;
$(window).scroll(function() { var scroll = $(window).scrollTop(); if(scroll > position && scroll > 50 && scrolled < 25) { // scrolling downwards scrolled++; } else if(scrolled > 0) { // scrolling upwards scrolled--; }	aniNumber = scrolled * 3;	opaNumber = height - aniNumber;	nav.css({'transform' : "translateY(-" + aniNumber + "px)", '-webkit-filter' : "blur(" + scrolled / 2 + "px)"});	position = scroll;
});
Fadout menu concept - Script Codes
Fadout menu concept - Script Codes
Home Page Home
Developer Rune Sejer Hoffmann
Username RSH87
Uploaded December 10, 2022
Rating 4.5
Size 3,451 Kb
Views 8,096
Do you need developer help for Fadout menu concept?

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!

Rune Sejer Hoffmann (RSH87) Script Codes
Name
Content aware dropdown
Offset menu
Search concept
Social sharing button
Material design card
Pure css download button
Perspective CSS hover effect
CSS Pixel game
Svg polycat
Ecommerce animations
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!