Skip to content
Find file
036d1d9
executable file 76 lines (73 sloc) 8.28 KB
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blueprint: On-Scroll Animated Header</title>
<meta name="description" content="Blueprint: On-Scroll Animated Header" />
<meta name="keywords" content="fixed header, animatied header, javascript, wed design, template, on scroll" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/default.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />
<script src="js/modernizr.custom.js"></script>
</head>
<body>
<div class="container">
<div class="cbp-af-header">
<div class="cbp-af-inner">
<h1>Fixed</h1>
<nav>
<a href="#">Broccoli</a>
<a href="#">Almonds</a>
<a href="#">Pears</a>
<a href="#">Oranges</a>
</nav>
</div>
</div>
<header class="clearfix">
<span>Blueprint <span class="bp-icon bp-icon-about" data-content="The Blueprints are a collection of basic and minimal website concepts, components, plugins and layouts with minimal style for easy adaption and usage, or simply for inspiration."></span></span>
<h1>On-Scroll Animated Header</h1>
<nav>
<a href="http://tympanus.net/Blueprints/ResponsiveMultiColumnForm" class="bp-icon bp-icon-prev" data-info="previous Blueprint"><span>Previous Blueprint</span></a>
<!--a href="" class="bp-icon bp-icon-next" data-info="next Blueprint"><span>Next Blueprint</span></a-->
<a href="http://tympanus.net/codrops/?p=15321" class="bp-icon bp-icon-drop" data-info="back to the Codrops article"><span>back to the Codrops article</span></a>
<a href="http://tympanus.net/codrops/category/blueprints/" class="bp-icon bp-icon-archive" data-info="Blueprints archive"><span>Go to the archive</span></a>
</nav>
</header>
<div class="main">
<section>
<div><p>Dreamcatcher american apparel typewriter polaroid, Pinterest hoodie tousled vegan pickled gastropub iPhone VHS sartorial. Fanny pack vinyl fingerstache whatever, raw denim Carles literally next level fashion axe photo booth pour-over Echo Park.</p></div>
</section>
<section>
<div><p>Raw denim selvage typewriter, thundercats viral craft beer beard keffiyeh meh. 3 wolf moon american apparel mlkshk street art single-origin coffee. Semiotics art party tote bag, wayfarers banh mi messenger bag Odd Future seitan photo booth. Twee vinyl fingerstache, freegan narwhal semiotics irony sustainable vegan 3 wolf moon ethnic selfies fixie kale chips. Odd Future chillwave twee Tonx kale chips, quinoa disrupt selfies art party Williamsburg Vice. Asymmetrical narwhal Godard, artisan single-origin coffee Bushwick hashtag semiotics literally disrupt pork belly trust fund fashion axe typewriter +1. Master cleanse raw denim trust fund bitters, gluten-free farm-to-table tousled plaid biodiesel actually pork belly roof party polaroid.</p></div>
</section>
<section>
<div><p>Cardigan gluten-free photo booth pug, occupy ethnic bicycle rights disrupt ennui jean shorts art party raw denim Carles Tonx artisan. Freegan aesthetic skateboard, forage iPhone ugh umami tumblr McSweeney's chillwave biodiesel vinyl pitchfork gentrify asymmetrical. Sartorial synth wayfarers, freegan pork belly post-ironic ennui salvia direct trade shoreditch Wes Anderson pitchfork. Mumblecore Truffaut american apparel, Austin single-origin coffee post-ironic tofu retro Vice fanny pack narwhal Neutra skateboard 90's. Kogi sartorial post-ironic gentrify helvetica McSweeney's Schlitz, mustache 8-bit polaroid hella flexitarian viral kale chips tote bag. Banh mi PBR typewriter Banksy. Beard messenger bag deep v, keffiyeh lo-fi umami four loko vinyl lomo hoodie wolf banh mi.</p></div>
</section>
<section>
<div><p>Artisan thundercats blog, VHS asymmetrical Schlitz whatever High Life chambray semiotics synth. Mustache flannel McSweeney's Carles gastropub put a bird on it. Occupy Pinterest try-hard PBR Schlitz, biodiesel disrupt forage. +1 pop-up Tonx, Echo Park thundercats authentic try-hard. Mlkshk pork belly artisan messenger bag raw denim cardigan Austin Portland, bicycle rights tumblr blog you probably haven't heard of them. Single-origin coffee seitan blog Williamsburg mlkshk, leggings cred meggings selvage synth next level McSweeney's pug 90's. Intelligentsia skateboard wolf, pour-over cred gastropub bespoke kogi DIY synth 8-bit hella dreamcatcher blog.</p></div>
</section>
<section>
<div><p>Farm-to-table four loko narwhal tattooed salvia Etsy. Odd Future craft beer pop-up, sustainable synth wayfarers helvetica lomo forage freegan Banksy. Typewriter Williamsburg direct trade, forage banh mi asymmetrical thundercats street art you probably haven't heard of them actually freegan cred chillwave mustache. Actually Pinterest gluten-free, roof party gastropub you probably haven't heard of them blog. Pinterest Odd Future post-ironic, Echo Park selfies narwhal bespoke dreamcatcher american apparel iPhone raw denim. Selvage hella mixtape, Neutra Etsy before they sold out YOLO art party leggings Wes Anderson bespoke. Austin letterpress plaid kale chips biodiesel Pinterest gastropub banjo ugh.</p></div>
</section>
<section>
<div><p>Put a bird on it Schlitz tousled, pitchfork Odd Future tote bag shabby chic vegan dreamcatcher Cosby sweater forage cliche. IPhone locavore 8-bit photo booth wayfarers direct trade blue bottle typewriter street art, trust fund pour-over cred biodiesel tote bag. Banjo artisan lo-fi, photo booth disrupt pitchfork banh mi hella wayfarers skateboard. Cardigan irony Williamsburg pitchfork small batch put a bird on it Terry Richardson Schlitz. Helvetica flannel banh mi hella, food truck Pinterest freegan tofu post-ironic. Banksy Vice four loko stumptown pour-over 8-bit biodiesel farm-to-table scenester, keytar ethical tofu seitan craft beer trust fund. Skateboard ennui cliche YOLO, art party Banksy 90's.</p></div>
</section>
<section>
<div><p>Single-origin coffee vegan stumptown, cardigan selvage plaid locavore fashion axe Neutra Echo Park. 90's thundercats swag Odd Future ethical. Gastropub Wes Anderson next level ugh, hella Schlitz Austin mixtape PBR pop-up master cleanse bicycle rights tattooed kale chips Bushwick. Dreamcatcher pork belly literally banh mi, blog vinyl food truck tattooed cornhole +1 pop-up. DIY hashtag fingerstache, thundercats master cleanse Portland squid dreamcatcher keytar vinyl narwhal lomo cred Neutra. Wolf 3 wolf moon plaid, craft beer YOLO Tonx literally mlkshk selvage tumblr trust fund Godard seitan Carles chambray. Tofu leggings intelligentsia tumblr, single-origin coffee squid typewriter pork belly wayfarers hoodie Bushwick shabby chic meh.</p></div>
</section>
<section>
<div><p>90's banh mi small batch helvetica authentic, vegan wayfarers vinyl meh hashtag. Pickled Tonx keffiyeh flannel gastropub, locavore salvia art party literally try-hard blog. High Life seitan banh mi Neutra, leggings swag you probably haven't heard of them pug bicycle rights pour-over retro fixie wayfarers Echo Park. Tofu vinyl pork belly, seitan kale chips bitters fingerstache put a bird on it butcher church-key occupy aesthetic DIY yr. Banjo dreamcatcher tumblr, actually Carles typewriter roof party. Pug thundercats DIY, 90's chambray gastropub actually intelligentsia Williamsburg Carles disrupt shabby chic. Butcher Schlitz fanny pack 8-bit, fingerstache occupy hoodie pug intelligentsia Carles letterpress umami organic irony.</p></div>
</section>
<section>
<div><p>Food truck fap next level Odd Future sartorial craft beer selvage 90's. Asymmetrical Schlitz hoodie street art jean shorts squid. Locavore street art retro skateboard banjo, post-ironic small batch keffiyeh yr +1. Selfies cardigan sriracha Terry Richardson. Godard brunch kale chips, bespoke photo booth retro Bushwick deep v farm-to-table polaroid Williamsburg. Kogi biodiesel vinyl next level intelligentsia. Skateboard Carles viral, Godard helvetica PBR butcher.</p></div>
</section>
</div>
</div>
<!-- classie.js by @desandro: https://github.com/desandro/classie -->
<script src="js/classie.js"></script>
<script src="js/cbpAnimatedHeader.min.js"></script>
</body>
</html>
Something went wrong with that request. Please try again.