Skip to content

Commit f50ca27

Browse files
author
Miguel Bautista
committed
flex panels done!
1 parent 5add70d commit f50ca27

File tree

3 files changed

+113
-76
lines changed

3 files changed

+113
-76
lines changed

‎05 - Flex Panel Gallery/entry.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
let panels = document.querySelectorAll('.panel');
2+
function toggleOpen(){
3+
this.classList.toggle('open');
4+
}
5+
6+
function toggleActive(e){
7+
8+
if (e.propertyName.includes('flex')){
9+
this.classList.toggle('open-active');
10+
}
11+
}
12+
13+
panels.forEach(panel => panel.addEventListener('click', toggleOpen));
14+
panels.forEach(panel => panel.addEventListener('transitionend',
15+
toggleActive));

‎05 - Flex Panel Gallery/index-START.html‎

Lines changed: 2 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -4,80 +4,9 @@
44
<meta charset="UTF-8">
55
<title>Flex Panels 💪</title>
66
<link href='https://fonts.googleapis.com/css?family=Amatic+SC' rel='stylesheet' type='text/css'>
7+
<link rel="stylesheet" href="style.css">
78
</head>
89
<body>
9-
<style>
10-
html {
11-
box-sizing: border-box;
12-
background:#ffc600;
13-
font-family:'helvetica neue';
14-
font-size: 20px;
15-
font-weight: 200;
16-
}
17-
body {
18-
margin: 0;
19-
}
20-
*, *:before, *:after {
21-
box-sizing: inherit;
22-
}
23-
24-
.panels {
25-
min-height:100vh;
26-
overflow: hidden;
27-
}
28-
29-
.panel {
30-
background:#6B0F9C;
31-
box-shadow:inset 0 0 0 5px rgba(255,255,255,0.1);
32-
color:white;
33-
text-align: center;
34-
align-items:center;
35-
/* Safari transitionend event.propertyName === flex */
36-
/* Chrome + FF transitionend event.propertyName === flex-grow */
37-
transition:
38-
font-size 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),
39-
flex 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),
40-
background 0.2s;
41-
font-size: 20px;
42-
background-size:cover;
43-
background-position:center;
44-
}
45-
46-
47-
.panel1 { background-image:url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500); }
48-
.panel2 { background-image:url(https://source.unsplash.com/1CD3fd8kHnE/1500x1500); }
49-
.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); }
50-
.panel4 { background-image:url(https://source.unsplash.com/ITjiVXcwVng/1500x1500); }
51-
.panel5 { background-image:url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500); }
52-
53-
.panel > * {
54-
margin:0;
55-
width: 100%;
56-
transition:transform 0.5s;
57-
}
58-
59-
.panel p {
60-
text-transform: uppercase;
61-
font-family: 'Amatic SC', cursive;
62-
text-shadow:0 0 4px rgba(0, 0, 0, 0.72), 0 0 14px rgba(0, 0, 0, 0.45);
63-
font-size: 2em;
64-
}
65-
.panel p:nth-child(2) {
66-
font-size: 4em;
67-
}
68-
69-
.panel.open {
70-
font-size:40px;
71-
}
72-
73-
.cta {
74-
color:white;
75-
text-decoration: none;
76-
}
77-
78-
</style>
79-
80-
8110
<div class="panels">
8211
<div class="panel panel1">
8312
<p>Hey</p>
@@ -105,10 +34,7 @@
10534
<p>Motion</p>
10635
</div>
10736
</div>
108-
109-
<script>
110-
111-
</script>
37+
<script type="text/javascript" src="entry.js"></script>
11238

11339

11440

‎05 - Flex Panel Gallery/style.css‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
html {
2+
box-sizing: border-box;
3+
background:#ffc600;
4+
font-family:'helvetica neue';
5+
font-size: 20px;
6+
font-weight: 200;
7+
}
8+
body {
9+
margin: 0;
10+
}
11+
*, *:before, *:after {
12+
box-sizing: inherit;
13+
}
14+
15+
.panels {
16+
min-height:100vh;
17+
overflow: hidden;
18+
display: flex;
19+
}
20+
21+
.panel {
22+
background:#6B0F9C;
23+
box-shadow:inset 0 0 0 5px rgba(255,255,255,0.1);
24+
color:white;
25+
text-align: center;
26+
align-items:center;
27+
/* Safari transitionend event.propertyName === flex */
28+
/* Chrome + FF transitionend event.propertyName === flex-grow */
29+
transition:
30+
font-size 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),
31+
flex 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),
32+
background 0.2s;
33+
font-size: 20px;
34+
background-size:cover;
35+
background-position:center;
36+
flex: 1;
37+
display: flex;
38+
justify-content: center;
39+
align-items: center;
40+
flex-direction: column;
41+
42+
/*evenly distribute among panels*/
43+
}
44+
45+
46+
.panel1 { background-image:url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500); }
47+
.panel2 { background-image:url(https://source.unsplash.com/1CD3fd8kHnE/1500x1500); }
48+
.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); }
49+
.panel4 { background-image:url(https://source.unsplash.com/ITjiVXcwVng/1500x1500); }
50+
.panel5 { background-image:url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500); }
51+
52+
.panel > * {
53+
margin:0;
54+
width: 100%;
55+
transition:transform 0.5s;
56+
/*border: 1px solid red;*/
57+
flex: 1 0 auto;
58+
display: flex;
59+
justify-content: center;
60+
align-items: center;
61+
}
62+
63+
.panel > *:first-child{
64+
transform: translateY(-100%);
65+
}
66+
.panel > *:last-child{
67+
transform: translateY(100%);
68+
}
69+
70+
.panel.open-active > *:first-child{
71+
transform: translateY(0);
72+
}
73+
.panel.open-active > *:last-child{
74+
transform: translateY(0);
75+
}
76+
77+
.panel p {
78+
text-transform: uppercase;
79+
font-family: 'Amatic SC', cursive;
80+
text-shadow:0 0 4px rgba(0, 0, 0, 0.72), 0 0 14px rgba(0, 0, 0, 0.45);
81+
font-size: 2em;
82+
}
83+
.panel p:nth-child(2) {
84+
font-size: 4em;
85+
}
86+
87+
.panel.open {
88+
flex: 5;
89+
/*will consume 5 times the room*/
90+
font-size:40px;
91+
}
92+
93+
.cta {
94+
color:white;
95+
text-decoration: none;
96+
}

0 commit comments

Comments
 (0)