Skip to content

Commit e385767

Browse files
travisneilsontravisneilson
committed
End of Video 3 - Landing Elements
1 parent fc1aac4 commit e385767

File tree

8 files changed

+136
-19
lines changed

8 files changed

+136
-19
lines changed

‎css/layout1.sass‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,3 +67,20 @@ img
6767
position: absolute
6868
left: 50%
6969
margin-left: -480px
70+
71+
72+
73+
// Model Grid
74+
75+
.clothes-pics
76+
77+
figure
78+
margin-bottom: 20px
79+
position: relative
80+
opacity: 0
81+
transform: translateX(20px)
82+
transition: all 0.3s ease-in-out
83+
84+
&.is-showing
85+
opacity: 1
86+
transform: translateX(0px)

‎css/style.css‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -914,3 +914,13 @@ img {
914914
position: absolute;
915915
left: 50%;
916916
margin-left: -480px; }
917+
918+
.clothes-pics figure {
919+
margin-bottom: 20px;
920+
position: relative;
921+
opacity: 0;
922+
transform: translateX(20px);
923+
transition: all 0.3s ease-in-out; }
924+
.clothes-pics figure.is-showing {
925+
opacity: 1;
926+
transform: translateX(0px); }

‎index.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,23 @@ <h1>Clothing Store</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>
24+
<div class="clothes-pics">
25+
<div class="row img-row">
26+
<figure class="columns four"><img src="/images/model1.jpg"></figure>
27+
<figure class="columns four"><img src="/images/model2.jpg"></figure>
28+
<figure class="columns four"><img src="/images/model3.jpg"></figure>
29+
</div>
30+
<div class="row img-row">
31+
<figure class="columns four"><img src="/images/model2.jpg"></figure>
32+
<figure class="columns four"><img src="/images/model3.jpg"></figure>
33+
<figure class="columns four"><img src="/images/model1.jpg"></figure>
34+
</div>
35+
<div class="row img-row">
36+
<figure class="columns four"><img src="/images/model3.jpg"></figure>
37+
<figure class="columns four"><img src="/images/model1.jpg"></figure>
38+
<figure class="columns four"><img src="/images/model2.jpg"></figure>
39+
</div>
40+
</div>
2441
</article>
2542
<div style="height: 2000px"></div>
2643
</section>

‎index.jade‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,39 @@ html(lang="en")
2929

3030
hr
3131

32+
.clothes-pics
33+
34+
.row.img-row
35+
figure.columns.four
36+
img(src="/images/model1.jpg")
37+
38+
figure.columns.four
39+
img(src="/images/model2.jpg")
40+
41+
figure.columns.four
42+
img(src="/images/model3.jpg")
43+
44+
.row.img-row
45+
figure.columns.four
46+
img(src="/images/model2.jpg")
47+
48+
figure.columns.four
49+
img(src="/images/model3.jpg")
50+
51+
figure.columns.four
52+
img(src="/images/model1.jpg")
53+
54+
.row.img-row
55+
figure.columns.four
56+
img(src="/images/model3.jpg")
57+
58+
figure.columns.four
59+
img(src="/images/model1.jpg")
60+
61+
figure.columns.four
62+
img(src="/images/model2.jpg")
63+
64+
3265

3366
div(style="height: 2000px")
3467

‎js/functions.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,4 +14,15 @@ $(window).scroll(function(){
1414
'transform' : 'translate(0px, -'+ wScroll /40 +'%)'
1515
});
1616

17+
if(wScroll > $('.clothes-pics').offset().top - ($(window).height() / 1.2)) {
18+
19+
$('.clothes-pics figure').each(function(i){
20+
21+
setTimeout(function(){
22+
$('.clothes-pics figure').eq(i).addClass('is-showing');
23+
}, 150 * (i+1));
24+
});
25+
26+
}
27+
1728
});

‎js/min/functions-min.js‎

Lines changed: 1 addition & 19 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎readme.html‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<h1>Parallax On The Web - Project Files</h1>
2+
3+
<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>
4+
5+
<h2>Releases</h2>
6+
7+
<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>
8+
9+
<h2>Video 1 - &ldquo;Intro to Parallax on the Web&rdquo;</h2>
10+
11+
<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>
12+
13+
<ul>
14+
<li>There is no code for this video, it&rsquo;s an introductory video</li>
15+
</ul>
16+
17+
18+
<h2>Video 2 - &ldquo;Parallax Header&rdquo;</h2>
19+
20+
<p><a href="https://youtu.be/WTZpNAbz3jg"><img src="https://i.ytimg.com/vi/WTZpNAbz3jg/mqdefault.jpg"><br>Watch on YouTube</a></p>
21+
22+
<ul>
23+
<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>
24+
<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>
25+
</ul>
26+
27+
28+
<h2>Video 3 - &ldquo;Landing Elements&rdquo;</h2>
29+
30+
<p><a href="https://youtu.be/-iOdDz2LnEk"><img src="https://i.ytimg.com/vi/-iOdDz2LnEk/mqdefault.jpg"><br>Watch on YouTube</a></p>
31+
32+
<ul>
33+
<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>
34+
</ul>
35+
36+
37+
<hr />
38+
39+
<p><em>If this stuff is helpful, consider subscribing to my <a href="https://www.youtube.com/user/DevTipsForDesigners">YouTube Channel</a></em></p>

‎readme.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,14 @@ Releases correspond to the videos. Visit the releases page on this repo to find
2121
- This is where the project starts. [Get the code](https://github.com/DevTips/Parallax-on-the-Web-DevTips-/releases/tag/v0.0).
2222
- This is where the project stops at the end of this video. [Get the code](https://github.com/DevTips/Parallax-on-the-Web-DevTips-/releases/tag/v0.1).
2323

24+
25+
26+
## Video 3 - "Landing Elements"
27+
28+
<a href="https://youtu.be/-iOdDz2LnEk"><img src="https://i.ytimg.com/vi/-iOdDz2LnEk/mqdefault.jpg"><br>Watch on YouTube</a>
29+
30+
- Grab the code we wrote in this video. [Get the code](https://github.com/DevTips/Parallax-on-the-Web-DevTips-/releases/tag/v0.2).
31+
2432
---
2533

2634
_If this stuff is helpful, consider subscribing to my [YouTube Channel](https://www.youtube.com/user/DevTipsForDesigners)_

0 commit comments

Comments
 (0)