A Pen by foleyatwork on CodePen.
Created
May 19, 2014 21:37
-
-
Save ginirsss/8cfadbfda5d1f6fe0c58 to your computer and use it in GitHub Desktop.
A Pen by foleyatwork.
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
<link href='http://fonts.googleapis.com/css?family=Merriweather:400,300' rel='stylesheet' type='text/css'> | |
<div id="scroll-pos"></div> | |
<div class="background" id="background"> | |
<img src="http://37.media.tumblr.com/896656ef638e8bc5db3f6c148d70d9d5/tumblr_n5e5qd8BB81st5lhmo1_1280.jpg"> | |
</div> | |
<header> | |
<svg><path d="M62.146,49.999L92.364,19.78c1.159-1.159,1.159-3.037,0-4.195l-7.95-7.95c-1.158-1.158-3.036-1.158-4.195,0L50,37.854 L19.781,7.635c-1.158-1.158-3.037-1.158-4.196,0l-7.95,7.95c-1.159,1.158-1.159,3.036,0,4.195l30.219,30.219L7.636,80.219 c-1.16,1.159-1.16,3.037,0,4.195l7.949,7.95c1.159,1.159,3.038,1.159,4.196,0L50,62.146l30.218,30.218 c1.159,1.159,3.037,1.159,4.195,0l7.95-7.95c1.159-1.158,1.159-3.036,0-4.195L62.146,49.999z"></path></svg> | |
</header> | |
<main> | |
<article> | |
<h1>Odd Future street art hoodie readymade.</h1> | |
<p>Ethical pug hella church-key forage seitan, cred American Apparel typewriter Tumblr fap fixie. Etsy synth meh raw denim lomo seitan. Thundercats kale chips swag, aesthetic Pitchfork readymade flannel slow-carb Cosby sweater authentic food truck.</p> | |
</article> | |
</main> | |
<main> | |
<article> | |
<h1>High Life Bushwick hoodie occupy letterpress direct trade +1.</h1> | |
<p>Raw denim leggings Shoreditch freegan, banh mi Echo Park Wes Anderson brunch sartorial. Blue Bottle Schlitz pour-over direct trade irony, literally gastropub next level mustache Cosby sweater tote bag viral locavore.</p> | |
</article> | |
</main> |
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
(function () { | |
var img = document.getElementById('background'), opacity; | |
var min = 0.15; | |
function setBackgroundOpacity () { | |
opacity = 1 - window.scrollY / (screen.height + 100); | |
img.style.opacity = opacity > min ? opacity : min; | |
} | |
window.addEventListener('scroll', setBackgroundOpacity); | |
})(); |
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
html, body | |
height: 100% | |
body | |
background-color: #222 | |
color: #bbb | |
font-family: Merriweather | |
font-size: .9em | |
line-height: 1.8em | |
margin: 0 | |
padding: 30px | |
h1 | |
color: white | |
.background, header | |
height: 100% | |
overflow: hidden | |
width: 100% | |
.background | |
position: fixed | |
top: 0 | |
left: 0 | |
transform: translatez(0) | |
.background img | |
min-width: 100% | |
min-height: 100% | |
svg | |
position: absolute | |
top: 50% | |
left: 50% | |
margin-left: -50px | |
margin-top: -50px | |
width: 100px | |
height: 100px | |
path | |
fill: white | |
opacity: 0.7 | |
main | |
display: table | |
height: 100% | |
width: 100% | |
article | |
display: table-cell | |
position: relative | |
vertical-align: middle | |
h1, p | |
max-width: 500px | |
margin-left: auto | |
margin-right: auto |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment