Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
0 parents
commit 036d1d9
Showing
13 changed files
with
593 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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/) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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.