Last active
February 18, 2020 15:24
-
-
Save leowebguy/5d109dc8a8f835f02d36a12ab3fc13fe to your computer and use it in GitHub Desktop.
This file contains hidden or 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 { | |
width: 100%; | |
overflow-x: hidden; | |
} | |
body { | |
width: 100%; | |
} | |
p { | |
margin: 0 0 20px 0; | |
} | |
p, | |
ul { | |
font-family: 'Open Sans Condensed', sans-serif; | |
font-size-adjust: 0.488; | |
font-weight: 200; | |
font-style: normal; | |
} | |
img { | |
border: 0; | |
width: 100%; | |
} | |
h1, | |
#pixels { | |
font-family: 'Open Sans Condensed', sans-serif; | |
font-size-adjust: 0.40; | |
font-weight: 700; | |
font-style: normal; | |
} | |
h2 { | |
font-family: 'Open Sans Condensed', sans-serif; | |
font-size-adjust: 0.531; | |
font-weight: 800; | |
font-style: normal; | |
font-size: 45px; | |
line-height: 52px; | |
} | |
#header h1, | |
#pixels { | |
color: #48941A; | |
} | |
.float-left { | |
float: left; | |
margin: 0 0 0 0px; | |
} | |
.float-right { | |
float: right; | |
margin: 0 0px 0 0; | |
} | |
.center { | |
font-size: 2.5em; | |
padding: 80px 0 0 0; | |
text-align: center; | |
} | |
#nav { | |
list-style: none; | |
position: fixed; | |
right: 20px; | |
} | |
#nav li { | |
margin: 0 0 15px 0; | |
} | |
#header, | |
#intro, | |
#second { | |
width: 100%; | |
} | |
#intro { | |
background: url(https://www.solodev.com/assets/Star%20Wars%20Parallax/starwars.jpg) 50% 0 no-repeat fixed; | |
background-size: cover; | |
color: white; | |
height: 600px; | |
margin: 0 auto; | |
padding: 0; | |
width: 100%; | |
} | |
#second { | |
background: url(https://www.solodev.com/assets/Star%20Wars%20Parallax/starwars1.jpg) 50% 0 no-repeat fixed; | |
background-size: cover; | |
color: white; | |
height: 1300px; | |
margin: 0 auto; | |
overflow: hidden; | |
padding: 0; | |
width: 100%; | |
} | |
#second .bg { | |
background: url(https://www.solodev.com/assets/Star%20Wars%20Parallax/deathstar-white.png) 50% 500px no-repeat fixed; | |
height: 1300px; | |
margin: 0 auto; | |
padding: 0; | |
position: absolute; | |
left: 0; | |
z-index: 200; | |
max-width: 1900px; | |
width: 100%; | |
overflow: hidden; | |
} | |
#third { | |
background: url(https://www.solodev.com/assets/Star%20Wars%20Parallax/starwars2.jpg) 50% 0 no-repeat fixed; | |
background-size: cover; | |
color: black; | |
height: 650px; | |
padding: 100px 0 0 0; | |
width: 100%; | |
overflow: hidden; | |
padding: 0; | |
color: #fff; | |
} | |
#fifth { | |
background: #ccc; | |
height: 400px; | |
margin: 0 auto; | |
padding: 40px 0 0 0; | |
} | |
.story { | |
margin: 0 auto; | |
max-width: 1170px; | |
overflow: hidden; | |
width: 100%; | |
height: 100%; | |
} | |
.story .float-left, | |
.story .float-right { | |
padding: 100px 0 0 0; | |
position: relative; | |
width: 350px; | |
min-width: 480px; | |
width: 33%; | |
background: rgba(0, 0, 0, 0.75); | |
height: 100%; | |
padding: 5% 50px; | |
z-index: 300; | |
} |
This file contains hidden or 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
<div id="intro"> | |
<div class="story"> | |
<div class="float-left"> | |
<h2>Star Wars: A New Parallax</h2> | |
<p>Em preparação para o próximo "Star Wars: Rogue One" a equipe Gauntē decidiu escrever um post | |
temático Star Wars sobre a adição de parallax usando jQuery ScollTo.</p> | |
</div> | |
</div> | |
<!--.story--> | |
</div> | |
<div id="second"> | |
<div class="story"> | |
<div class="bg"></div> | |
<div class="float-right"> | |
<h2>The Parallax Strikes Back</h2> | |
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nibh erat, sagittis sit | |
amet congue at, aliquam eu libero. Integer molestie, turpis vel ultrices facilisis, nisi | |
mauris sollicitudin mauris, volutpat elementum enim urna eget odio.</p> | |
</div> | |
</div> | |
<!--.story--> | |
</div> | |
<div id="third"> | |
<div class="story"> | |
<div class="float-left"> | |
<h2>The Return of Parallax</h2> | |
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nibh erat, sagittis sit amet | |
congue at, aliquam eu libero. Integer molestie, turpis vel ultrices facilisis, nisi mauris | |
sollicitudin mauris, volutpat elementum enim urna eget odio.</p> | |
</div> | |
</div> | |
<!--.story--> | |
</div> |
This file contains hidden or 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
$(document).ready(function(){ | |
$('#intro').parallax({offsetY:-150,speedFactor:0.2}); | |
$('#second').parallax({speedFactor:0.2}); | |
$('.bg').parallax({offsetX:"0%",offsetY:200,speedFactor:0.4}); | |
$('#third').parallax({speedFactor:0.4}); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment