Skip to content

Commit df26f0a

Browse files
wwags33wwags33
committed
Flex Panel (5) complete
1 parent c54cb9d commit df26f0a

File tree

3 files changed

+97
-20
lines changed

3 files changed

+97
-20
lines changed

Diff for: ‎05 - Flex Panel Gallery/index-START.html

+61-20
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
45
<meta charset="UTF-8">
56
<title>Flex Panels 💪</title>
67
<link href='https://fonts.googleapis.com/css?family=Amatic+SC' rel='stylesheet' type='text/css'>
78
</head>
9+
810
<body>
911
<style>
1012
html {
@@ -14,48 +16,90 @@
1416
font-size: 20px;
1517
font-weight: 200;
1618
}
17-
19+
1820
body {
1921
margin: 0;
2022
}
21-
22-
*, *:before, *:after {
23+
24+
*,
25+
*:before,
26+
*:after {
2327
box-sizing: inherit;
2428
}
2529

2630
.panels {
2731
min-height: 100vh;
2832
overflow: hidden;
33+
display: flex;
2934
}
3035

3136
.panel {
3237
background: #6B0F9C;
33-
box-shadow: inset 0 0 0 5px rgba(255,255,255,0.1);
38+
box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.1);
3439
color: white;
3540
text-align: center;
3641
align-items: center;
3742
/* Safari transitionend event.propertyName === flex */
3843
/* Chrome + FF transitionend event.propertyName === flex-grow */
3944
transition:
40-
font-size 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),
41-
flex 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),
45+
font-size 0.7s cubic-bezier(0.61, -0.19, 0.7, -0.11),
46+
flex 0.7s cubic-bezier(0.61, -0.19, 0.7, -0.11),
4247
background 0.2s;
4348
font-size: 20px;
4449
background-size: cover;
4550
background-position: center;
51+
flex: 1;
52+
justify-content: center;
53+
align-items: center;
54+
display: flex;
55+
flex-direction: column;
56+
}
57+
58+
.panel1 {
59+
background-image: url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500);
4660
}
4761

48-
.panel1 { background-image:url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500); }
49-
.panel2 { background-image:url(https://source.unsplash.com/rFKUFzjPYiQ/1500x1500); }
50-
.panel3 { background-image:url(https://images.unsplash.com/photo-1465188162913-8fb5709d6d57?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&w=1500&h=1500&fit=crop&s=967e8a713a4e395260793fc8c802901d); }
51-
.panel4 { background-image:url(https://source.unsplash.com/ITjiVXcwVng/1500x1500); }
52-
.panel5 { background-image:url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500); }
62+
.panel2 {
63+
background-image: url(https://source.unsplash.com/rFKUFzjPYiQ/1500x1500);
64+
}
65+
66+
.panel3 {
67+
background-image: url(https://images.unsplash.com/photo-1465188162913-8fb5709d6d57?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&w=1500&h=1500&fit=crop&s=967e8a713a4e395260793fc8c802901d);
68+
}
69+
70+
.panel4 {
71+
background-image: url(https://source.unsplash.com/ITjiVXcwVng/1500x1500);
72+
}
73+
74+
.panel5 {
75+
background-image: url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500);
76+
}
5377

5478
/* Flex Children */
55-
.panel > * {
79+
.panel>* {
5680
margin: 0;
5781
width: 100%;
5882
transition: transform 0.5s;
83+
flex: 1 0 auto;
84+
display: flex;
85+
justify-content: center;
86+
align-items: center;
87+
}
88+
89+
.panel>*:first-child {
90+
transform: translateY(-100%);
91+
}
92+
93+
.panel.open-active>*:first-child {
94+
transform: translateY(0);
95+
}
96+
97+
.panel>*:last-child {
98+
transform: translateY(100%);
99+
}
100+
101+
.panel.open-active>*:last-child {
102+
transform: translateY(0);
59103
}
60104

61105
.panel p {
@@ -64,15 +108,15 @@
64108
text-shadow: 0 0 4px rgba(0, 0, 0, 0.72), 0 0 14px rgba(0, 0, 0, 0.45);
65109
font-size: 2em;
66110
}
67-
111+
68112
.panel p:nth-child(2) {
69113
font-size: 4em;
70114
}
71115

72116
.panel.open {
117+
flex: 5;
73118
font-size: 40px;
74119
}
75-
76120
</style>
77121

78122

@@ -104,11 +148,8 @@
104148
</div>
105149
</div>
106150

107-
<script>
108-
109-
</script>
110-
111-
151+
<script src="typescripts.js"></script>
112152

113153
</body>
114-
</html>
154+
155+
</html>

Diff for: ‎05 - Flex Panel Gallery/typescripts.js

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
var panels = document.querySelectorAll('.panel');
2+
function toggleOpen() {
3+
this.classList.toggle('open');
4+
}
5+
function toggleActive(e) {
6+
if (e.propertyName.includes('flex')) {
7+
this.classList.toggle('open-active');
8+
}
9+
}
10+
panels.forEach(function (panel) { return panel.addEventListener('click', toggleOpen); });
11+
panels.forEach(function (panel) { return panel.addEventListener('transitionend', toggleActive); });

Diff for: ‎05 - Flex Panel Gallery/typescripts.ts

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
/**
2+
* JavaScript30 by Wes Bos, https://javascript30.com/
3+
* TypeScript implementation by Will Wager
4+
* Project: Flex Panel Gallery
5+
* Concepts: Flexbox
6+
* Key takeaways: Leaning on CSS, nesting flexboxes, , using classList.toggle
7+
* Sidenotes:
8+
* Exaggerated cubic bezier transition can add a nice touch.
9+
* TransitionEndEvent.propertyName can be used to determine which transition triggered the event.
10+
*/
11+
12+
const panels = document.querySelectorAll('.panel');
13+
14+
function toggleOpen() {
15+
this.classList.toggle('open');
16+
}
17+
18+
function toggleActive(e) {
19+
if (e.propertyName.includes('flex')) {
20+
this.classList.toggle('open-active');
21+
}
22+
}
23+
24+
panels.forEach(panel => panel.addEventListener('click', toggleOpen));
25+
panels.forEach(panel => panel.addEventListener('transitionend', toggleActive));

0 commit comments

Comments
 (0)