Skip to content

Commit bc269dc

Browse files
travisneilsontravisneilson
committed
Parallax Thumbnails
1 parent adf1206 commit bc269dc

File tree

7 files changed

+100
-68
lines changed

7 files changed

+100
-68
lines changed

‎css/layout1.sass‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,18 +73,43 @@ img
7373
// Model Grid
7474
7575
.clothes-pics
76+
margin-bottom: 100px
7677

7778
figure
7879
margin-bottom: 20px
7980
position: relative
8081
opacity: 0
8182
transform: translateX(20px)
8283
transition: all 0.3s ease-in-out
84+
overflow: hidden
85+
cursor: pointer
8386

8487
&.is-showing
8588
opacity: 1
8689
transform: translateX(0px)
8790

91+
img
92+
display: block
93+
transform: scale(1)
94+
transition: all 0.3s ease-in-out
95+
96+
&:hover
97+
figcaption
98+
left: 0%
99+
100+
img
101+
transform: scale(1.1)
102+
103+
figcaption
104+
position: absolute
105+
bottom: 10px
106+
left: -100%
107+
background: black
108+
color: white
109+
padding: 2px 8px
110+
font-size: 11px
111+
transition: all 0.3s ease-in-out
112+
88113

89114

90115
// large-window

‎css/style.css‎

Lines changed: 30 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -915,15 +915,36 @@ img {
915915
left: 50%;
916916
margin-left: -480px; }
917917

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); }
918+
.clothes-pics {
919+
margin-bottom: 100px; }
920+
.clothes-pics figure {
921+
margin-bottom: 20px;
922+
position: relative;
923+
opacity: 0;
924+
transform: translateX(20px);
925+
transition: all 0.3s ease-in-out;
926+
overflow: hidden;
927+
cursor: pointer; }
928+
.clothes-pics figure.is-showing {
929+
opacity: 1;
930+
transform: translateX(0px); }
931+
.clothes-pics figure img {
932+
display: block;
933+
transform: scale(1);
934+
transition: all 0.3s ease-in-out; }
935+
.clothes-pics figure:hover figcaption {
936+
left: 0%; }
937+
.clothes-pics figure:hover img {
938+
transform: scale(1.1); }
939+
.clothes-pics figcaption {
940+
position: absolute;
941+
bottom: 10px;
942+
left: -100%;
943+
background: black;
944+
color: white;
945+
padding: 2px 8px;
946+
font-size: 11px;
947+
transition: all 0.3s ease-in-out; }
927948

928949
.large-window {
929950
height: 640px;

‎index.html‎

Lines changed: 27 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -23,19 +23,37 @@ <h1>Clothing Store</h1>
2323
<hr>
2424
<div class="clothes-pics">
2525
<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>
26+
<figure class="columns four"><img src="/images/model1.jpg">
27+
<figcaption>BlackBird Sweater - <strong>$135</strong></figcaption>
28+
</figure>
29+
<figure class="columns four"><img src="/images/model2.jpg">
30+
<figcaption>BlackBird Trousers - <strong>$135</strong></figcaption>
31+
</figure>
32+
<figure class="columns four"><img src="/images/model3.jpg">
33+
<figcaption>BlackBird Jacket - <strong>$135</strong></figcaption>
34+
</figure>
2935
</div>
3036
<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>
37+
<figure class="columns four"><img src="/images/model2.jpg">
38+
<figcaption>BlackBird Trousers - <strong>$135</strong></figcaption>
39+
</figure>
40+
<figure class="columns four"><img src="/images/model3.jpg">
41+
<figcaption>BlackBird Jacket - <strong>$135</strong></figcaption>
42+
</figure>
43+
<figure class="columns four"><img src="/images/model1.jpg">
44+
<figcaption>BlackBird Sweater - <strong>$135</strong></figcaption>
45+
</figure>
3446
</div>
3547
<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>
48+
<figure class="columns four"><img src="/images/model3.jpg">
49+
<figcaption>BlackBird Jacket - <strong>$135</strong></figcaption>
50+
</figure>
51+
<figure class="columns four"><img src="/images/model1.jpg">
52+
<figcaption>BlackBird Sweater - <strong>$135</strong></figcaption>
53+
</figure>
54+
<figure class="columns four"><img src="/images/model2.jpg">
55+
<figcaption>BlackBird Trousers - <strong>$135</strong></figcaption>
56+
</figure>
3957
</div>
4058
</div>
4159
<h1>Clothing Store</h1>

‎index.jade‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,33 +34,42 @@ html(lang="en")
3434
.row.img-row
3535
figure.columns.four
3636
img(src="/images/model1.jpg")
37+
figcaption BlackBird Sweater - <strong>$135</strong>
3738

3839
figure.columns.four
3940
img(src="/images/model2.jpg")
41+
figcaption BlackBird Trousers - <strong>$135</strong>
4042

4143
figure.columns.four
4244
img(src="/images/model3.jpg")
45+
figcaption BlackBird Jacket - <strong>$135</strong>
4346

4447
.row.img-row
4548
figure.columns.four
4649
img(src="/images/model2.jpg")
50+
figcaption BlackBird Trousers - <strong>$135</strong>
4751

4852
figure.columns.four
4953
img(src="/images/model3.jpg")
54+
figcaption BlackBird Jacket - <strong>$135</strong>
5055

5156
figure.columns.four
5257
img(src="/images/model1.jpg")
58+
figcaption BlackBird Sweater - <strong>$135</strong>
5359

5460
.row.img-row
5561
figure.columns.four
5662
img(src="/images/model3.jpg")
63+
figcaption BlackBird Jacket - <strong>$135</strong>
5764

5865
figure.columns.four
5966
img(src="/images/model1.jpg")
67+
figcaption BlackBird Sweater - <strong>$135</strong>
6068

6169
figure.columns.four
6270
img(src="/images/model2.jpg")
63-
71+
figcaption BlackBird Trousers - <strong>$135</strong>
72+
6473

6574
h1 Clothing Store
6675

‎js/min/functions-min.js‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎readme.html‎

Lines changed: 0 additions & 48 deletions
This file was deleted.

‎readme.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,14 @@ Releases correspond to the videos. Visit the releases page on this repo to find
3838
- Grab the code we wrote in this video. [Get the code](https://github.com/DevTips/Parallax-on-the-Web-DevTips-/releases/tag/v0.3).
3939

4040

41+
42+
## Video 5 - "Parallax Thumbnails"
43+
44+
<a href="https://youtu.be/KzP7YXcHNcE"><img src="https://i.ytimg.com/vi/KzP7YXcHNcE/mqdefault.jpg"><br>Watch on YouTube</a>
45+
46+
- Grab the code we wrote in this video. [Get the code](https://github.com/DevTips/Parallax-on-the-Web-DevTips-/releases/tag/v0.4).
47+
48+
4149
---
4250

4351

0 commit comments

Comments
 (0)