Created
September 13, 2013 11:51
-
-
Save stephenscaff/6549692 to your computer and use it in GitHub Desktop.
Fade hero title down + up on scroll with a touch of jquery and CSS keyframes. No keyframe support? Loser. But, no worries, just fade title in and out with animate opacity then.
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
| <!DOCTYPE html> | |
| <head> | |
| <!-- CSS | |
| ================================================== --> | |
| <style> | |
| *, *:before, *:after { | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box; | |
| } | |
| article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary {display: block;} | |
| audio,canvas,video { display: inline-block;} | |
| html{font-family: sans-serif;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;} | |
| html,body {font-size: 100%; } | |
| article,aside,details,figcaption,figure, | |
| footer,header,hgroup,menu,nav,section { display:block;} | |
| body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,p,blockquote,th,td{margin:0;padding:0;font-size:1rem} | |
| hr.sep { | |
| display: block; | |
| width: 40%; | |
| margin: 2.5em auto 1em; | |
| border: 2px solid #D9E4EA; | |
| } | |
| a{ | |
| color: #49bdda; | |
| text-decoration: none; | |
| line-height:inherit; | |
| -webkit-transition: color .6s ease-in; | |
| -moz-transition: color .6s ease-in; | |
| -o-transition: color .6s ease-in; | |
| transition: color .6s ease-in; | |
| } | |
| a:hover{ | |
| color: #0c1d31; | |
| text-decoration: none; | |
| } | |
| p{ | |
| color: #074b52; | |
| font-family:"helvetica neue", helvetica, arial, sans-serif; | |
| font-size:2em; | |
| line-height:2; | |
| letter-spacing: 1; | |
| margin-bottom:1.4em; | |
| } | |
| h1 { | |
| text-align: center; | |
| font-size: 5.5em; | |
| font-family: helvetica, arial, sans-serif; | |
| color: #fff; | |
| } | |
| h3{ | |
| text-align: center; | |
| font-size: 2.5em; | |
| color: #072528; | |
| text-transform: uppercase; | |
| } | |
| #mast{ | |
| background: #0ab; | |
| position: relative; | |
| top: 0; | |
| } | |
| #top-bar{ | |
| background: rgba(0,0,0,0.8); | |
| } | |
| #top-bar .name{ | |
| color: #fff; | |
| font-size: 1.3em; | |
| padding: .5em; | |
| font-family: helvetica, arial, sans-serif; | |
| } | |
| #hero{ | |
| padding: 5.5em 10% 10em; | |
| } | |
| #main{ | |
| padding: 3em 10%; | |
| } | |
| #main p{ | |
| text-align: center; | |
| padding: .5em; | |
| } | |
| footer{ | |
| background: #b8dce5; | |
| padding: 3em 10% .5em; | |
| } | |
| footer p{ | |
| text-align: center; | |
| font-size: 1.4em; | |
| } | |
| /* CSS Animations | |
| ==================================================== */ | |
| .fade-up{ | |
| -webkit-animation: fade-up ease-out 1s both; | |
| -moz-animation: fade-up ease-out 1s both; | |
| -ms-animation: fade-up ease-out 1s both; | |
| -o-animation: fade-up ease-out 1s both; | |
| animation: fade-up ease-out 1s both; | |
| visibility: visible; | |
| -webkit-backface-visibility: hidden; | |
| } | |
| @-webkit-keyframes fade-up{ | |
| 0%{filter:alpha(opacity=0);opacity:0;-webkit-transform:translateY(50%);} | |
| 100%{filter:alpha(opacity=100);opacity:1;-webkit-transform:translateY(0);}} | |
| @-moz-keyframes fade-up{ | |
| 0%{filter:alpha(opacity=0);opacity:0;-moz-transform:translateY(50%);} | |
| 100%{filter:alpha(opacity=100);opacity:1;-moz-transform:translateY(0);}} | |
| @-ms-keyframes fade-up{ | |
| 0%{filter:alpha(opacity=0);opacity:0;-ms-transform:translateY(50%);} | |
| 100%{filter:alpha(opacity=100);opacity:1;-ms-transform:translateY(0);}} | |
| @-o-keyframes fade-up{ | |
| 0%{filter:alpha(opacity=0);opacity:0;-o-transform:translateY(50%);} | |
| 100%{filter:alpha(opacity=100);opacity:1;-o-transform:translateY(0);}} | |
| @keyframes fade-up{ | |
| 0%{filter:alpha(opacity=0);opacity:0;transform:translateY(50%)} | |
| 100%{filter:alpha(opacity=100);opacity:1;transform:translateY(0)}} | |
| .fade-down{ | |
| -webkit-animation: fade-down ease-out 1s both; | |
| -moz-animation: fade-down ease-out 1s both; | |
| -ms-animation: fade-down ease-out 1s both; | |
| -o-animation: fade-down ease-out 1s both; | |
| animation: fade-down ease-out 1s both; | |
| visibility: visible; | |
| -webkit-backface-visibility: hidden; | |
| } | |
| @-webkit-keyframes fade-down{ | |
| 0%{filter:alpha(opacity=1);opacity:1;-webkit-transform:translateY(0);} | |
| 100%{filter:alpha(opacity=0);opacity:0;-webkit-transform:translateY(50%);}} | |
| @-moz-keyframes fade-down{ | |
| 0%{filter:alpha(opacity=1);opacity:1;-moz-transform:translateY(0);} | |
| 100%{filter:alpha(opacity=0);opacity:0;-moz-transform:translateY(50%);}} | |
| @-ms-keyframes fade-down{ | |
| 0%{filter:alpha(opacity=1);opacity:1;-ms-transform:translateY(0);} | |
| 100%{filter:alpha(opacity=0);opacity:0;-ms-transform:translateY(50%);}} | |
| @-o-keyframes fade-down{ | |
| 0%{filter:alpha(opacity=1);opacity:1;-o-transform:translateY(0);} | |
| 100%{filter:alpha(opacity=0);opacity:0;-o-transform:translateY(50%);}} | |
| @keyframes fade-down{ | |
| 0%{filter:alpha(opacity=1);opacity:1;transform:translateY(0)} | |
| 100%{filter:alpha(opacity=0);opacity:0;transform:translateY(50%)}} | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Header | |
| ================================================== --> | |
| <header id="mast"> | |
| <div id="top-bar"> | |
| <p class="name">Fade Down + Up</p> | |
| </div> | |
| <!-- Hero | |
| ================================================== --> | |
| <section id="hero" class="js-animated"> | |
| <h1 class="text-center fade-up">And I will strike down upon thee</h1> | |
| </section> | |
| </header> | |
| <!-- Main | |
| ================================================== --> | |
| <section id="main" class="light-blue-bg"> | |
| <h3>Jules Winnfield</h3> | |
| <hr class="sep"/> | |
| <p>There's a passage that I got memorized, seems appropiate for this situation: Ezekiel 25,17. "The path of the righteous man is beset of all sides by the iniquities of the selfish and the tyranny of evil me. Blessed is he who, in the name of the charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's keeper and the finder of lost children. And I will strike down upon thee with great vengeance and furious anger those who attempt to poison and destroy my brothers. And you will know my name is the Lord when I lay my vengeance upon thee.</p> | |
| </section> | |
| <!-- Footer | |
| ================================================== --> | |
| <footer> | |
| <p><a href="http://sosweetcreative.com">A SoSweet! joint</a></p> | |
| </footer> | |
| <!-- JS | |
| ================================================== --> | |
| <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> | |
| <script> | |
| $(function(){ | |
| // fancy animation - add class to fade hero header down and up | |
| $(window).scroll(function() { | |
| if ($(this).scrollTop() > 10) { | |
| // In case no css keyframe support, let's just fade via animate | |
| $('.js-animated').stop().animate({opacity: 0}, 600) | |
| .addClass('fade-down').removeClass('fade-up'); | |
| } | |
| if ($(this).scrollTop() < 20) { | |
| $('.js-animated').stop().animate({opacity: 1}, 500) | |
| .addClass('fade-up').removeClass('fade-down'); | |
| } | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment