Skip to content

Commit 5716845

Browse files
travisneilsontravisneilson
committed
code for video number 7
1 parent 51919fb commit 5716845

File tree

10 files changed

+188
-4
lines changed

10 files changed

+188
-4
lines changed

‎css/layout1.sass‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -122,6 +122,7 @@ img
122122
repeat: repeat-y
123123
attachment: fixed
124124
margin-top: 100px
125+
margin-bottom: 100px
125126
border-radius: 50%
126127
position: relative
127128

@@ -167,3 +168,24 @@ img
167168
&:hover
168169
background: white
169170
color: black
171+
172+
173+
// posts
174+
175+
.blog-posts
176+
margin-top: 100px
177+
178+
.post
179+
border: 1px solid #e1e1e1
180+
padding: 20px 20px 0
181+
background: white
182+
position: relative
183+
184+
.post-1
185+
transform: translate(100px, 20px)
186+
187+
.post-2
188+
z-index: 2
189+
190+
.post-3
191+
transform: translate(-100px, 20px)

‎css/style.css‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -953,6 +953,7 @@ img {
953953
background-repeat: repeat-y;
954954
background-attachment: fixed;
955955
margin-top: 100px;
956+
margin-bottom: 100px;
956957
border-radius: 50%;
957958
position: relative; }
958959
.large-window .window-tint {
@@ -990,3 +991,17 @@ img {
990991
.large-window .promo-text .window-cta:hover {
991992
background: white;
992993
color: black; }
994+
995+
.blog-posts {
996+
margin-top: 100px; }
997+
.blog-posts .post {
998+
border: 1px solid #e1e1e1;
999+
padding: 20px 20px 0;
1000+
background: white;
1001+
position: relative; }
1002+
.blog-posts .post-1 {
1003+
transform: translate(100px, 20px); }
1004+
.blog-posts .post-2 {
1005+
z-index: 2; }
1006+
.blog-posts .post-3 {
1007+
transform: translate(-100px, 20px); }

‎images/posts/one.jpg‎

21.7 KB
Loading

‎images/posts/three.jpg‎

16.9 KB
Loading

‎images/posts/two.jpg‎

13.3 KB
Loading

‎index.html‎

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
</header>
1818
<section class="content">
1919
<article>
20-
<h1>Clothing Store</h1>
20+
<h1>Unique Style</h1>
2121
<hr>
2222
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa.</p>
2323
<hr>
@@ -56,7 +56,7 @@ <h1>Clothing Store</h1>
5656
</figure>
5757
</div>
5858
</div>
59-
<h1>Clothing Store</h1>
59+
<h1>Fine Tayloring</h1>
6060
<hr>
6161
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa.</p>
6262
<hr>
@@ -65,6 +65,27 @@ <h1>Clothing Store</h1>
6565
<div class="promo-text">Fall Suits<strong><span>from</span> $99</strong><a href="" class="window-cta">Shop Now</a></div>
6666
</div>
6767
</div>
68+
<h1>Rich History</h1>
69+
<hr>
70+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa.</p>
71+
<hr>
72+
<div class="blog-posts row">
73+
<div class="post columns four post-1">
74+
<h5>Post Title</h5><img src="/images/posts/one.jpg">
75+
<p>Incididunt ut labore et dolore magna.</p>
76+
<p><a href="" class="button">Read More</a></p>
77+
</div>
78+
<div class="post columns four post-2">
79+
<h5>Post Title</h5><img src="/images/posts/two.jpg">
80+
<p>Lorem ipsum dolor sit amet.</p>
81+
<p><a href="" class="button">Read More</a></p>
82+
</div>
83+
<div class="post columns four post-3">
84+
<h5>Post Title</h5><img src="/images/posts/three.jpg">
85+
<p>Duis aute irure dolor in reprehenderit.</p>
86+
<p><a href="" class="button">Read More</a></p>
87+
</div>
88+
</div>
6889
</article>
6990
<div style="height: 2000px"></div>
7091
</section>

‎index.jade‎

Lines changed: 32 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ html(lang="en")
2121

2222
article
2323

24-
h1 Clothing Store
24+
h1 Unique Style
2525

2626
hr
2727

@@ -71,7 +71,7 @@ html(lang="en")
7171
figcaption BlackBird Trousers - <strong>$135</strong>
7272

7373

74-
h1 Clothing Store
74+
h1 Fine Tayloring
7575

7676
hr
7777

@@ -86,6 +86,36 @@ html(lang="en")
8686
a(href="").window-cta Shop Now
8787

8888

89+
90+
h1 Rich History
91+
92+
hr
93+
94+
p Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa.
95+
96+
hr
97+
98+
99+
.blog-posts.row
100+
101+
.post.columns.four.post-1
102+
h5 Post Title
103+
img(src="/images/posts/one.jpg")
104+
p Incididunt ut labore et dolore magna.
105+
p: a.button(href="") Read More
106+
107+
.post.columns.four.post-2
108+
h5 Post Title
109+
img(src="/images/posts/two.jpg")
110+
p Lorem ipsum dolor sit amet.
111+
p: a.button(href="") Read More
112+
113+
.post.columns.four.post-3
114+
h5 Post Title
115+
img(src="/images/posts/three.jpg")
116+
p Duis aute irure dolor in reprehenderit.
117+
p: a.button(href="") Read More
118+
89119
div(style="height: 2000px")
90120

91121
script(src="/js/jquery-2.1.3.min.js")

‎js/functions.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,4 +35,14 @@ $(window).scroll(function(){
3535

3636
}
3737

38+
if(wScroll > $('.blog-posts').offset().top - $(window).height()){
39+
40+
var offset = Math.min(0, wScroll - $('.blog-posts').offset().top +$(window).height() - 350);
41+
42+
$('.post-1').css({'transform': 'translate('+ offset +'px, '+ Math.abs(offset * 0.2) +'px)'});
43+
44+
$('.post-3').css({'transform': 'translate('+ Math.abs(offset) +'px, '+ Math.abs(offset * 0.2) +'px)'});
45+
46+
}
47+
3848
});

‎readme.html‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8"/>
5+
</head>
6+
<body>
7+
<h1 id="parallaxontheweb-projectfiles">Parallax On The Web - Project Files</h1>
8+
9+
<p>Video Series <a href="https://www.youtube.com/playlist?list=PLqGj3iMvMa4IyCbhul-PdeiDqmh4ooJzk"> for free on YouTube</a> on the <a href="https://www.youtube.com/user/DevTipsForDesigners">DevTips</a> Channel</p>
10+
11+
<h2 id="releases">Releases</h2>
12+
13+
<p>Releases correspond to the videos. Visit the releases page on this repo to find the specific state of the code base. In other words; if you are watching video 2 and want to grab the code form that point. You will want to look for that <a href="https://github.com/DevTips/Parallax-on-the-Web-DevTips-/releases">here</a>, or below.</p>
14+
15+
<h2 id="video1-introtoparallaxontheweb">Video 1 - &#8220;Intro to Parallax on the Web&#8221;</h2>
16+
17+
<p><a href="https://youtu.be/STwoa-9jxi0"><img src="https://i.ytimg.com/vi/STwoa-9jxi0/mqdefault.jpg"><br>Watch on YouTube</a></p>
18+
19+
<ul>
20+
<li>There is no code for this video, it&#8217;s an introductory video</li>
21+
</ul>
22+
23+
<h2 id="video2-parallaxheader">Video 2 - &#8220;Parallax Header&#8221;</h2>
24+
25+
<p><a href="https://youtu.be/WTZpNAbz3jg"><img src="https://i.ytimg.com/vi/WTZpNAbz3jg/mqdefault.jpg"><br>Watch on YouTube</a></p>
26+
27+
<ul>
28+
<li>This is where the project starts. <a href="https://github.com/DevTips/Parallax-on-the-Web-DevTips-/releases/tag/v0.0">Get the code</a>.</li>
29+
<li>This is where the project stops at the end of this video. <a href="https://github.com/DevTips/Parallax-on-the-Web-DevTips-/releases/tag/v0.1">Get the code</a>.</li>
30+
</ul>
31+
32+
<h2 id="video3-landingelements">Video 3 - &#8220;Landing Elements&#8221;</h2>
33+
34+
<p><a href="https://youtu.be/-iOdDz2LnEk"><img src="https://i.ytimg.com/vi/-iOdDz2LnEk/mqdefault.jpg"><br>Watch on YouTube</a></p>
35+
36+
<ul>
37+
<li>Grab the code we wrote in this video. <a href="https://github.com/DevTips/Parallax-on-the-Web-DevTips-/releases/tag/v0.2">Get the code</a>.</li>
38+
</ul>
39+
40+
<h2 id="video4-theperiscope">Video 4 - &#8220;The Periscope&#8221;</h2>
41+
42+
<p><a href="https://youtu.be/uYPdA_SFSDw"><img src="https://i.ytimg.com/vi/uYPdA_SFSDw/mqdefault.jpg"><br>Watch on YouTube</a></p>
43+
44+
<ul>
45+
<li>Grab the code we wrote in this video. <a href="https://github.com/DevTips/Parallax-on-the-Web-DevTips-/releases/tag/v0.3">Get the code</a>.</li>
46+
</ul>
47+
48+
<h2 id="video5-zoomingthumbnails">Video 5 - &#8220;Zooming Thumbnails&#8221;</h2>
49+
50+
<p><a href="https://youtu.be/KzP7YXcHNcE"><img src="https://i.ytimg.com/vi/KzP7YXcHNcE/mqdefault.jpg"><br>Watch on YouTube</a></p>
51+
52+
<ul>
53+
<li>Grab the code we wrote in this video. <a href="https://github.com/DevTips/Parallax-on-the-Web-DevTips-/releases/tag/v0.4">Get the code</a>.</li>
54+
</ul>
55+
56+
<h2 id="video6-promo-scope">Video 6 - &#8220;Promo-Scope&#8221;</h2>
57+
58+
<p><a href="https://youtu.be/zEXubVd_y_M"><img src="https://i.ytimg.com/vi/zEXubVd_y_M/mqdefault.jpg"><br>Watch on YouTube</a></p>
59+
60+
<ul>
61+
<li>Grab the code we wrote in this video. <a href="https://github.com/DevTips/Parallax-on-the-Web-DevTips-/releases/tag/v0.5">Get the code</a>.</li>
62+
</ul>
63+
64+
<h2 id="video7-floatingelements">Video 7 - &#8220;Floating Elements&#8221;</h2>
65+
66+
<p><a href="https://youtu.be/LoouHSB0BMM"><img src="https://i.ytimg.com/vi/LoouHSB0BMM/mqdefault.jpg"><br>Watch on YouTube</a></p>
67+
68+
<ul>
69+
<li>Grab the code we wrote in this video. <a href="https://github.com/DevTips/Parallax-on-the-Web-DevTips-/releases/tag/v0.6">Get the code</a>.</li>
70+
</ul>
71+
72+
<hr />
73+
74+
<p><em>If this stuff is helpful, consider subscribing to my <a href="https://www.youtube.com/user/DevTipsForDesigners">YouTube Channel</a></em></p>
75+
76+
</body>
77+
</html>

‎readme.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,15 @@ Releases correspond to the videos. Visit the releases page on this repo to find
5353

5454
- Grab the code we wrote in this video. [Get the code](https://github.com/DevTips/Parallax-on-the-Web-DevTips-/releases/tag/v0.5).
5555

56+
57+
58+
## Video 7 - "Floating Elements"
59+
60+
<a href="https://youtu.be/LoouHSB0BMM"><img src="https://i.ytimg.com/vi/LoouHSB0BMM/mqdefault.jpg"><br>Watch on YouTube</a>
61+
62+
- Grab the code we wrote in this video. [Get the code](https://github.com/DevTips/Parallax-on-the-Web-DevTips-/releases/tag/v0.6).
63+
64+
5665
---
5766

5867

0 commit comments

Comments
 (0)