Permalink
Browse files

initial commit

  • Loading branch information...
botelho committed Jun 6, 2013
0 parents commit 036d1d995197988727199ace7eb75e4bd730dc4a
@@ -0,0 +1,10 @@
+
+On-Scroll Animated Header
+=========
+A fixed header that will animate its size on scroll. The inner elements will also adjust their size with a transition.
+
+[article on Codrops](http://tympanus.net/codrops/?p=15321)
+
+[demo](http://tympanus.net/Blueprints/AnimatedHeader/)
+
+[LICENSING & TERMS OF USE](http://tympanus.net/codrops/licensing/)
@@ -0,0 +1,128 @@
+.cbp-af-header {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ background: #f6f6f6;
+ z-index: 10000;
+ height: 230px;
+ overflow: hidden;
+ -webkit-transition: height 0.3s;
+ -moz-transition: height 0.3s;
+ transition: height 0.3s;
+}
+
+.cbp-af-header .cbp-af-inner {
+ width: 90%;
+ max-width: 69em;
+ margin: 0 auto;
+ padding: 0 1.875em;
+}
+
+.cbp-af-header h1,
+.cbp-af-header nav {
+ display: inline-block;
+ position: relative;
+}
+
+ /* We just have one-lined elements, so we'll center the elements with the line-height set to the height of the header */
+.cbp-af-header h1,
+.cbp-af-header nav a {
+ line-height: 230px;
+}
+
+.cbp-af-header h1 {
+ text-transform: uppercase;
+ color: #333;
+ letter-spacing: 4px;
+ font-size: 4em;
+ margin: 0;
+ float: left;
+}
+
+.cbp-af-header nav {
+ float: right;
+}
+
+.cbp-af-header nav a {
+ color: #aaa;
+ font-weight: 700;
+ margin: 0 0 0 20px;
+ font-size: 1.4em;
+}
+
+.cbp-af-header nav a:hover {
+ color: #333;
+}
+
+/* Transitions and class for reduced height */
+.cbp-af-header h1,
+.cbp-af-header nav a {
+ -webkit-transition: all 0.3s;
+ -moz-transition: all 0.3s;
+ transition: all 0.3s;
+}
+
+.cbp-af-header.cbp-af-header-shrink {
+ height: 90px;
+}
+
+.cbp-af-header.cbp-af-header-shrink h1,
+.cbp-af-header.cbp-af-header-shrink nav a {
+ line-height: 90px;
+}
+
+.cbp-af-header.cbp-af-header-shrink h1 {
+ font-size: 2em;
+}
+
+/* Example Media Queries */
+@media screen and (max-width: 55em) {
+
+ .cbp-af-header .cbp-af-inner {
+ width: 100%;
+ }
+
+ .cbp-af-header h1,
+ .cbp-af-header nav {
+ display: block;
+ margin: 0 auto;
+ text-align: center;
+ float: none;
+ }
+
+ .cbp-af-header h1,
+ .cbp-af-header nav a {
+ line-height: 115px;
+ }
+
+ .cbp-af-header nav a {
+ margin: 0 10px;
+ }
+
+ .cbp-af-header.cbp-af-header-shrink h1,
+ .cbp-af-header.cbp-af-header-shrink nav a {
+ line-height: 45px;
+ }
+
+ .cbp-af-header.cbp-af-header-shrink h1 {
+ font-size: 2em;
+ }
+
+ .cbp-af-header.cbp-af-header-shrink nav a {
+ font-size: 1em;
+ }
+}
+
+@media screen and (max-width: 32.25em) {
+ .cbp-af-header nav a {
+ font-size: 1em;
+ }
+}
+
+@media screen and (max-width: 24em) {
+ .cbp-af-header nav a,
+ .cbp-af-header.cbp-af-header-shrink nav a {
+ line-height: 1;
+ }
+}
@@ -0,0 +1,211 @@
+/* General Blueprint Style */
+@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
+@font-face {
+ font-family: 'bpicons';
+ src:url('../fonts/bpicons/bpicons.eot');
+ src:url('../fonts/bpicons/bpicons.eot?#iefix') format('embedded-opentype'),
+ url('../fonts/bpicons/bpicons.woff') format('woff'),
+ url('../fonts/bpicons/bpicons.ttf') format('truetype'),
+ url('../fonts/bpicons/bpicons.svg#bpicons') format('svg');
+ font-weight: normal;
+ font-style: normal;
+} /* Made with http://icomoon.io/ */
+
+*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
+body, html { font-size: 100%; padding: 0; margin: 0;}
+
+/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
+.clearfix:before, .clearfix:after { content: " "; display: table; }
+.clearfix:after { clear: both; }
+
+body {
+ font-family: 'Lato', Calibri, Arial, sans-serif;
+ color: #47a3da;
+}
+
+a {
+ color: #f0f0f0;
+ text-decoration: none;
+}
+
+a:hover {
+ color: #000;
+}
+
+.container {
+ position: relative;
+ margin-top: 15em;
+}
+
+.container > header,
+.main section > div {
+ width: 90%;
+ max-width: 69em;
+ margin: 0 auto;
+ padding: 2.875em 1.875em 1.875em;
+}
+
+.container > header h1 {
+ font-size: 2.125em;
+ line-height: 1.3;
+ margin: 0 0 0.6em 0;
+ float: left;
+ font-weight: 400;
+}
+
+.container > header > span {
+ display: block;
+ position: relative;
+ z-index: 9999;
+ font-weight: 700;
+ text-transform: uppercase;
+ letter-spacing: 0.5em;
+ padding: 0 0 0.6em 0.1em;
+}
+
+.container > header > span span:after {
+ width: 30px;
+ height: 30px;
+ left: -12px;
+ font-size: 50%;
+ top: -8px;
+ font-size: 75%;
+ position: relative;
+}
+
+.container > header > span span:hover:before {
+ content: attr(data-content);
+ text-transform: none;
+ text-indent: 0;
+ letter-spacing: 0;
+ font-weight: 300;
+ font-size: 110%;
+ padding: 0.8em 1em;
+ line-height: 1.2;
+ text-align: left;
+ left: auto;
+ margin-left: 4px;
+ position: absolute;
+ color: #fff;
+ background: #47a3da;
+}
+
+.container > header nav {
+ float: right;
+ text-align: center;
+}
+
+.container > header nav a {
+ display: inline-block;
+ position: relative;
+ text-align: left;
+ width: 2.5em;
+ height: 2.5em;
+ background: #fff;
+ border-radius: 50%;
+ margin: 0 0.1em;
+ border: 4px solid #47a3da;
+}
+
+.container > header nav a > span {
+ display: none;
+}
+
+.container > header nav a:hover:before {
+ content: attr(data-info);
+ color: #47a3da;
+ position: absolute;
+ width: 600%;
+ top: 120%;
+ text-align: right;
+ right: 0;
+ pointer-events: none;
+}
+
+.container > header nav a:hover {
+ background: #47a3da;
+}
+
+.bp-icon:after {
+ font-family: 'bpicons';
+ speak: none;
+ font-style: normal;
+ font-weight: normal;
+ font-variant: normal;
+ text-transform: none;
+ text-align: center;
+ color: #47a3da;
+ -webkit-font-smoothing: antialiased;
+}
+
+.container > header nav .bp-icon:after {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ line-height: 2;
+ text-indent: 0;
+}
+
+.container > header nav a:hover:after {
+ color: #fff;
+}
+
+.bp-icon-next:after {
+ content: "\e000";
+}
+.bp-icon-drop:after {
+ content: "\e001";
+}
+.bp-icon-archive:after {
+ content: "\e002";
+}
+.bp-icon-about:after {
+ content: "\e003";
+}
+.bp-icon-prev:after {
+ content: "\e004";
+}
+
+.main > section:nth-child(even) {
+ background: #87cef8;
+ color: #fff;
+}
+
+.main section:first-child > div {
+ padding-top: 0em;
+}
+
+.main section p {
+ margin: 0;
+ padding: 1em 0;
+ font-size: 1.8em;
+ line-height: 1.5;
+}
+
+@media screen and (max-width: 55em) {
+
+ .container > header h1,
+ .container > header nav {
+ float: none;
+ }
+
+ .container > header > span,
+ .container > header h1 {
+ text-align: center;
+ }
+
+ .container > header nav {
+ margin: 0 auto;
+ }
+
+ .container > header > span {
+ text-indent: 30px;
+ }
+
+ .main section p {
+ padding: 2em 5%;
+ font-size: 1.4em;
+ }
+}
Binary file not shown.
@@ -0,0 +1,24 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>
+This is a custom SVG font generated by IcoMoon.
+<iconset grid="14"></iconset>
+</metadata>
+<defs>
+<font id="bpicons" horiz-adv-x="448" >
+<font-face units-per-em="448" ascent="384" descent="-64" />
+<missing-glyph horiz-adv-x="448" />
+<glyph unicode="&#xe000;" d="M 368.00,144.00q0.00-13.50 -9.25-22.75l-162.75-162.75q-9.75-9.25 -22.75-9.25q-12.75,0.00 -22.50,9.25l-18.75,18.75q-9.50,9.50 -9.50,22.75t 9.50,22.75l 73.25,73.25l-176.00,0.00 q-13.00,0.00 -21.125,9.375t-8.125,22.625l0.00,32.00 q0.00,13.25 8.125,22.625t 21.125,9.375l 176.00,0.00 l-73.25,73.50q-9.50,9.00 -9.50,22.50t 9.50,22.50l 18.75,18.75q 9.50,9.50 22.50,9.50q 13.25,0.00 22.75-9.50l 162.75-162.75q 9.25-8.75 9.25-22.50z" horiz-adv-x="384" />
+<glyph unicode="&#xe001;" d="M 221.657,359.485 ,m0.00,0.00,c 0.00,0.00 -132.984-182.838 -132.205-286.236 0.515-68.522 61.089-123.688 135.314-123.218 74.202,0.479 133.943,56.421 133.428,124.943 C 357.414,178.368 221.657,359.485 221.657,359.485 z" />
+<glyph unicode="&#xe002;" d="M 407.273-23.273c0.00,0.00-325.818,0.00-366.545,0.00s-40.727,40.727-40.727,40.727l0.00,142.545 l 101.818,183.273l 244.364,0.00 l 101.818-183.273c0.00,0.00,0.00-101.818,0.00-142.545S 407.273-23.273, 407.273-23.273z M 325.818,302.545L 122.182,302.545
+ l-71.273-142.545L 142.545,160.00 c0.00,0.00, 40.727,0.00, 40.727-40.727l0.00-20.364 l 81.455,0.00 l0.00,20.364 c0.00,0.00,0.00,40.727, 40.727,40.727l 91.636,0.00 L 325.818,302.545z M 407.273,119.273l-96.911,0.00 C 307.532,113.917, 305.455,107.503, 305.455,98.909c0.00-40.727-40.727-40.727-40.727-40.727L 183.273,58.182 c0.00,0.00-40.727,0.00-40.727,40.727
+ c0.00,8.593-2.077,15.008-4.908,20.364L 40.727,119.273 l0.00-101.818 l 366.545,0.00 L 407.273,119.273 z M 132.364,221.091l 183.273,0.00 L 325.818,200.727L 122.182,200.727 L 132.364,221.091z M 152.727,261.818l 142.545,0.00 L 305.455,241.455L 142.545,241.455 L 152.727,261.818z" />
+<glyph unicode="&#xe003;" d="M 224.00-64.00C 100.291-64.00,0.00,36.291,0.00,160.00S 100.291,384.00, 224.00,384.00s 224.00-100.291, 224.00-224.00S 347.709-64.00, 224.00-64.00z
+ M 224.00,343.273c-101.228,0.00-183.273-82.045-183.273-183.273s 82.045-183.273, 183.273-183.273s 183.273,82.045, 183.273,183.273S 325.228,343.273, 224.00,343.273z M 244.364,122.164C 244.364,111.005, 244.364,98.909, 244.364,98.909l-40.727,0.00 c0.00,0.00,0.00,29.466,0.00,40.727
+ s 9.123,20.364, 20.364,20.364l0.00,0.00c 22.481,0.00, 40.727,18.246, 40.727,40.727s-18.246,40.727-40.727,40.727S 183.273,223.209, 183.273,200.727c0.00-7.453, 2.138-14.356, 5.641-20.364L 145.437,180.364 C 143.727,186.90, 142.545,193.661, 142.545,200.727
+ c0.00,44.983, 36.471,81.455, 81.455,81.455s 81.455-36.471, 81.455-81.455C 305.455,162.831, 279.45,131.247, 244.364,122.164z M 244.364,37.818l-40.727,0.00 l0.00,40.727 l 40.727,0.00 L 244.364,37.818 z" />
+<glyph unicode="&#xe004;" d="M 384.00,160.00l0.00-32.00 q0.00-13.25 -8.125-22.625t-21.125-9.375l-176.00,0.00 l 73.25-73.50q 9.50-9.00 9.50-22.50t-9.50-22.50l-18.75-19.00q-9.25-9.25 -22.50-9.25q-13.00,0.00 -22.75,9.25l-162.75,163.00q-9.25,9.25 -9.25,22.50q0.00,13.00 9.25,22.75l 162.75,162.50q 9.50,9.50 22.75,9.50q 13.00,0.00 22.50-9.50l 18.75-18.50q 9.50-9.50 9.50-22.75t-9.50-22.75l-73.25-73.25l 176.00,0.00 q 13.00,0.00 21.125-9.375 t 8.125-22.625z" horiz-adv-x="384" />
+<glyph unicode="&#x20;" horiz-adv-x="224" />
+<glyph class="hidden" unicode="&#xf000;" d="M0,384L 448 -64L0 -64 z" horiz-adv-x="0" />
+</font></defs></svg>
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,6 @@
+Icon Set: Font Awesome -- http://fortawesome.github.com/Font-Awesome/
+License: SIL -- http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL
+
+
+Icon Set: Eco Ico -- http://dribbble.com/shots/665585-Eco-Ico
+License: CC0 -- http://creativecommons.org/publicdomain/zero/1.0/
Oops, something went wrong.

0 comments on commit 036d1d9

Please sign in to comment.