Content Blur under Fixed Header

Developer
James Steinbach
Size
3,818 Kb
Views
26,312
  1. Content Blur under Fixed Header Previews
  2. Content Blur under Fixed Header HTML Codes
  3. Content Blur under Fixed Header CSS Codes
  4. Content Blur under Fixed Header JS Codes

How do I make an content blur under fixed header?

This will blur content under the header, similar to iOS7's header behavior.. What is a content blur under fixed header? How do you make a content blur under fixed header? This script and codes were developed by James Steinbach on 05 November 2022, Saturday.

Content Blur under Fixed Header Previews
IQ Test

Content Blur under Fixed Header - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Content Blur under Fixed Header</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> <header class="site-header"> <h1 class="site-title">The Site Title</h1> <nav class="site-menu"> <a class="menu-item" href="#">Menu Item 1</a> <a class="menu-item" href="#">Menu Item 2</a> <a class="menu-item" href="#">Menu Item 3</a> </nav>
</header>
<article class="site-content"> <div class="article-header"> <h1 class="article-title">Baseball is the best!</h1> <img class="header-image" src="http://phsbaseball.net/wp-content/uploads/2013/07/baseball-wallpaper.jpg"> </div> <div class="article-content"> <p>Cras mattis consectetur purus sit amet fermentum. Donec id elit non mi porta gravida at eget metus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum. Donec ullamcorper nulla non metus auctor fringilla. Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed consectetur.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui.</p> <p>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Nulla vitae elit libero, a pharetra augue. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p> <p>Donec id elit non mi porta gravida at eget metus. Donec id elit non mi porta gravida at eget metus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam quis risus eget urna mollis ornare vel eu leo.</p> </div>
</article> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Content Blur under Fixed Header - Script Codes CSS Codes

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
body { font: 1.5em/1.7 Gotham, Proxima Nova, Helvetica, sans-serif;
}
img { max-width: 100%; height: auto;
}
.site-header { position: fixed; top: 0; right: 0; left: 0; background: #000; z-index: 99; box-shadow: 0 0 0.125em 0 rgba(0, 0, 0, 0.5); overflow: hidden; max-height: 4em;
}
.site-header::after { background: rgba(255, 255, 255, 0.5); position: absolute; display: block; content: ''; top: 0; right: 0; bottom: 0; left: 0; z-index: 4;
}
.site-title, .site-menu { position: absolute; top: 50%; -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); left: 1em; font-weight: bold; clear: none; display: inline-block; vertical-align: bottom; width: intrinsic; z-index: 5;
}
.site-title { font-size: 1.3em;
}
.site-menu { left: auto; right: 1em; font-weight: normal;
}
.site-menu a { font-size: .75em; color: #444; text-decoration: none; padding: .25em .5em;
}
.site-content { position: relative; z-index: 1;
}
.article-header { position: relative;
}
.article-title { position: absolute; top: 50%; left: 0; right: 0; -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); font-size: 4.5em; line-height: 1; color: #fff; text-shadow: 0 2px 3px rgba(0, 0, 0, 0.75); text-align: center;
}
.article-content { padding: 1em; max-width: 30em; margin: 0 auto;
}
.article-content p { margin-bottom: 1em;
}

Content Blur under Fixed Header - Script Codes JS Codes

var content = $('.site-content'), header = $('.site-header');
$(content).clone().prependTo(header).addClass('blurred');
var blur = 'blur(.5em)';
$('.blurred').css({ 'background': '#fff', '-webkit-filter' : blur, '-moz-filter' : blur, '-mz-filter' : blur, '-o-filter' : blur, 'filter' : blur
});
$(document).scroll(function(){ var scroll = $(this).scrollTop(); $('.blurred').css({ '-webkit-transform' : 'translateY(-'+scroll+'px)', '-moz-transform' : 'translateY(-'+scroll+'px)', '-mz-transform' : 'translateY(-'+scroll+'px)', '-0-transform' : 'translateY(-'+scroll+'px)', 'transform' : 'translateY(-'+scroll+'px)' });
})
Content Blur under Fixed Header - Script Codes
Content Blur under Fixed Header - Script Codes
Home Page Home
Developer James Steinbach
Username jdsteinbach
Uploaded November 05, 2022
Rating 3.5
Size 3,818 Kb
Views 26,312
Do you need developer help for Content Blur under Fixed Header?

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!

James Steinbach (jdsteinbach) Script Codes
Name
A Pen by James Steinbach
FlexBox Gallery
CSS Variables
Using a gradient for a border
Swinging Door Menu
Animated Form Focus
LOTR-ish Ring
Moving Polygons
Parallax-ish Sliding Content
Slip-Scroll - No JS
Create amazing art & images 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!