Medium-esque v2.0
How do I make an medium-esque v2.0?
Blur to sharpen on scroll . What is a medium-esque v2.0? How do you make a medium-esque v2.0? This script and codes were developed by Jerusha Johnson on 22 October 2022, Saturday.
Medium-esque v2.0 - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Medium-esque v2.0</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <section class="body-copy one"></section>
<section class="blur-img"> <div class='blur'></div> <div class="clear-img"></div> <h1>This is an Awesome Cat.</h1>
</section>
<section class="body-copy two"></section>
<section class="body-copy three"></section>
<section class="body-copy four"></section>
<section class="body-copy five"></section> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Medium-esque v2.0 - Script Codes CSS Codes
.blur-img { position: relative; width: 100%; height: 440px; z-index: 2; top: 600px; left: 0; overflow:hidden;
}
.blur-img>div { position: absolute; width: 110%; height: 450px; top:-10px; left:-10px; background-image: url('http://www.mrwallpaper.com/wallpapers/cute-cat-sleeping.jpg'); background-repeat: no-repeat; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; background-position: center center;
}
.clear-img{ opacity: 0; background-image: url('http://www.mrwallpaper.com/wallpapers/cute-cat-sleeping.jpg'); position: absolute; width: 100%; height: 440px; top:0;
}
.blur { opacity: 1; top:0; background-image: url('http://www.mrwallpaper.com/wallpapers/cute-cat-sleeping.jpg'); filter: blur(7px) brightness(0.75); -webkit-filter: blur(7px) brightness(0.75); -moz-filter: blur(7px) brightness(0.75); -ms-filter: blur(7px) brightness(0.75); -o-filter: blur(7px) brightness(0.75);
}
.headline{ position: absolute; /*top: 600px;*/ left: 0; right: 0; z-index:10; height: 440px;
}
.headline h1{ font-weight: 200; font-size:3.5em; color: white; text-shadow: 0 0 10px rgba(10,10,10,0.7); margin: 0; line-height: 440px; text-align: center;
}
.body-copy{ position: absolute; left: 0; right: 0; z-index:1; height: 600px; background:white;
}
.body-copy.one{ top:0; background:#666;
}
.body-copy.two{ top:1040px; background:#c1c1c1;
}
.body-copy.three{ top:1640px; background:#a4a4a4;
}
.body-copy.four{ top:2040px; background:#666;
}
.body-copy.five{ top:2440px; background:#333;
}
Medium-esque v2.0 - Script Codes JS Codes
(function() { $(window).scroll(function() { var oVal; oVal = $(window).scrollTop() / 240; return $(".clear-img").css("opacity", oVal); });
}).call(this);
Developer | Jerusha Johnson |
Username | bonzaipenguin |
Uploaded | October 22, 2022 |
Rating | 3 |
Size | 2,335 Kb |
Views | 10,120 |
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 |
Slide animation | 2,281 Kb |
Scaled Agile Card Heights | 2,113 Kb |
Parallax Scroll 2.0 | 2,393 Kb |
Moveable 8-bit | 2,063 Kb |
Logo Trial v2 | 2,050 Kb |
Objects | 2,616 Kb |
Text Shadow Experiment | 2,593 Kb |
Photo Week Bug | 1,926 Kb |
Medium-esque | 2,185 Kb |
Logo for Carla v2 | 1,959 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 |
Drawing a Terminal with CSS | Lachlanjc | 3,185 Kb |
Blog demo to use given styling | Andygirl | 2,412 Kb |
No Vacancy 404 CSS Only | Sethkontny | 0 Kb |
Material Design-Layout-Principles Practice | Fraina | 2,331 Kb |
Faux column absolute wrapper | Yurimorini | 1,823 Kb |
TigerWoods Freecodecamp Page | Baileytj | 2,869 Kb |
CardMove | Thompsonemerson | 3,699 Kb |
Flat design iframe | Damienpm | 1,819 Kb |
Blog | Rottingroom | 1,430 Kb |
A Pen by Anoop | Anoopjohn | 330,760 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!