Skip to content

Commit dd04ee1

Browse files
travisneilsontravisneilson
committed
End of Video 2 - Parallax Header
1 parent 1b79e90 commit dd04ee1

File tree

6 files changed

+131
-2
lines changed

6 files changed

+131
-2
lines changed

‎css/layout1.sass‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,3 +23,47 @@ img
2323

2424

2525
// Parallax
26+
27+
.bird-box
28+
position: relative
29+
height: 600px
30+
background:
31+
image: url(/images/bird-bg.jpg)
32+
size: auto 600px
33+
position: top center
34+
attachment: fixed
35+
overflow: hidden
36+
37+
.logo
38+
height: 100px
39+
width: 100%
40+
background:
41+
image: url(/images/black-bird-logo.svg)
42+
position: center
43+
repeat: no-repeat
44+
position: absolute
45+
top: 50%
46+
margin-top: -50px
47+
48+
.fore-bird
49+
width: 960px
50+
height: 733px
51+
background:
52+
image: url(/images/fore-bird.png)
53+
repeat: no-repeat
54+
position: right bottom
55+
position: absolute
56+
left: 50%
57+
margin-left: -480px
58+
top: 380px
59+
60+
.back-bird
61+
width: 960px
62+
height: 298px
63+
background:
64+
image: url(/images/back-bird.png)
65+
repeat: no-repeat
66+
position: top left
67+
position: absolute
68+
left: 50%
69+
margin-left: -480px

‎css/style.css‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -874,3 +874,43 @@ figure {
874874

875875
img {
876876
max-width: 100%; }
877+
878+
.bird-box {
879+
position: relative;
880+
height: 600px;
881+
background-image: url(/images/bird-bg.jpg);
882+
background-size: auto 600px;
883+
background-position: top center;
884+
background-attachment: fixed;
885+
overflow: hidden; }
886+
887+
.logo {
888+
height: 100px;
889+
width: 100%;
890+
background-image: url(/images/black-bird-logo.svg);
891+
background-position: center;
892+
background-repeat: no-repeat;
893+
position: absolute;
894+
top: 50%;
895+
margin-top: -50px; }
896+
897+
.fore-bird {
898+
width: 960px;
899+
height: 733px;
900+
background-image: url(/images/fore-bird.png);
901+
background-repeat: no-repeat;
902+
background-position: right bottom;
903+
position: absolute;
904+
left: 50%;
905+
margin-left: -480px;
906+
top: 380px; }
907+
908+
.back-bird {
909+
width: 960px;
910+
height: 298px;
911+
background-image: url(/images/back-bird.png);
912+
background-repeat: no-repeat;
913+
background-position: top left;
914+
position: absolute;
915+
left: 50%;
916+
margin-left: -480px; }

‎index.html‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,11 @@
1010
<link rel="icon" type="image/png" href="images/favicon.png">
1111
</head>
1212
<body>
13+
<header class="bird-box">
14+
<div class="back-bird"></div>
15+
<div class="logo"></div>
16+
<div class="fore-bird"></div>
17+
</header>
1318
<section class="content">
1419
<article>
1520
<h1>Clothing Store</h1>

‎index.jade‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,13 @@ html(lang="en")
1010
link(rel="icon", type="image/png", href="images/favicon.png")
1111

1212
body
13+
14+
header.bird-box
15+
.back-bird
16+
.logo
17+
.fore-bird
1318

14-
15-
19+
1620
section.content
1721

1822
article

‎js/functions.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
$(window).scroll(function(){
2+
3+
var wScroll = $(this).scrollTop();
4+
5+
$('.logo').css({
6+
'transform' : 'translate(0px, '+ wScroll /2 +'%)'
7+
});
8+
9+
$('.back-bird').css({
10+
'transform' : 'translate(0px, '+ wScroll /4 +'%)'
11+
});
12+
13+
$('.fore-bird').css({
14+
'transform' : 'translate(0px, -'+ wScroll /40 +'%)'
15+
});
16+
17+
});

‎js/min/functions-min.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
$(window).scroll(function(){
2+
3+
var wScroll = $(this).scrollTop();
4+
5+
$('.logo').css({
6+
'transform' : 'translate(0px, '+ wScroll /2 +'%)'
7+
});
8+
9+
$('.back-bird').css({
10+
'transform' : 'translate(0px, '+ wScroll /4 +'%)'
11+
});
12+
13+
$('.fore-bird').css({
14+
'transform' : 'translate(0px, -'+ wScroll /40 +'%)'
15+
});
16+
17+
});
18+
19+

0 commit comments

Comments
 (0)