Skip to content

Commit ac58711

Browse files
author
manz
committed
Day 22
1 parent f3d2790 commit ac58711

File tree

6 files changed

+280
-0
lines changed

6 files changed

+280
-0
lines changed

‎README.md

+1
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ Here, my 30 creative experiments:
2727
| **Day 19** | 🐟 Ocean | [Pen](https://codepen.io/manz/pen/pdpGPz) / [GitHub](https://manzdev.github.io/codevember2017/day-19/) | Animation, Blend, Canvas, JS | 🎵 [JJayBerthume](https://soundcloud.com/jjayberthume/ocean-side-8-bit) | |
2828
| **Day 20** | 😎 Swag | [Pen](https://codepen.io/manz/pen/yPvopx) / [GitHub](https://manzdev.github.io/codevember2017/day-20/) | Animation, JS, Howler.js | 🎵 [Janyork](https://soundcloud.com/janyork) | ⭐🕹 |
2929
| **Day 21** | 🥊 Fight | [Pen](https://codepen.io/manz/pen/vWRZGa) / [GitHub](https://manzdev.github.io/codevember2017/day-21/) | Animation, Emoji, JS, Howler.js | 🎵 [PeachyPixel8](https://soundcloud.com/peachypixel8/eye-of-the-tiger-8bit-demake) | ⭐ |
30+
| **Day 22** | 🌑 Planet | [Pen](https://codepen.io/manz/pen/eergPg) / [GitHub](https://manzdev.github.io/codevember2017/day-22/) | SVG, Animation | 🎵 [Plastiware](https://soundcloud.com/plastiware/futurama-crapcom-mix) | |
3031

3132
<small>* HTML5 and CSS3 always used</small>
3233

‎day-22/README.txt

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
A Pen created at CodePen.io. You can find this one at https://codepen.io/manz/pen/eergPg.
2+
3+
Day 22: Planet
4+
5+
HTML5, SVG
6+
CSS3 (Animations)
7+
¡No JS!
8+
9+
Credits: Plastiware (Futurama Theme)

‎day-22/css/style.css

+200
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,200 @@
1+
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,600,800|Gloria+Hallelujah');
2+
3+
html {
4+
background:#000;
5+
overflow:hidden;
6+
}
7+
8+
.data {
9+
position:relative;
10+
z-index:1;
11+
text-align:center;
12+
width:400px;
13+
margin:auto;
14+
padding:20px;
15+
background:RGBA(0,0,0, .75);
16+
}
17+
18+
h1, h2, .ghost {
19+
font-family:Montserrat;
20+
font-weight:600;
21+
margin:0;
22+
}
23+
24+
h1 {
25+
font-weight:800;
26+
letter-spacing:-2px;
27+
font-size:64px;
28+
color:#444;
29+
}
30+
31+
.data span {
32+
font-family:'Gloria Hallelujah';
33+
font-size:24px;
34+
position:absolute;
35+
top:35px;
36+
-webkit-transform:translate(35px, 20px) rotate(-10deg);
37+
transform:translate(35px, 20px) rotate(-10deg);
38+
color:#78d8a0;
39+
}
40+
41+
h2 {
42+
font-size:24px;
43+
color:#888;
44+
}
45+
46+
.ghost {
47+
font-weight:400;
48+
font-size:15px;
49+
color:#CCC;
50+
display:inline-block;
51+
margin:8px 2px;
52+
padding:8px;
53+
border:1px solid #CCC;
54+
text-decoration:none;
55+
}
56+
57+
a.ghost:hover {
58+
-webkit-transition:all .5s linear;
59+
transition:all .5s linear;
60+
background:rgba(50,50,50, .2);
61+
border-color:#f2ea00;
62+
color:#f2ea00;
63+
}
64+
65+
#screen {
66+
position:absolute;
67+
top:0;
68+
left:0;
69+
width:100vw;
70+
height:100vh;
71+
}
72+
73+
/* Codevember */
74+
75+
#chars {
76+
max-width:90%;
77+
margin:auto;
78+
margin-top:200px;
79+
text-align:center;
80+
}
81+
82+
#chars svg {
83+
display:inline-block;
84+
}
85+
86+
svg {
87+
width:225px;
88+
height:275px;
89+
display:block;
90+
}
91+
92+
.bender { width:200px }
93+
.leela { width:350px }
94+
.amy { width:300px }
95+
96+
svg path {
97+
stroke-width:4px;
98+
stroke:#FFF;
99+
fill:transparent;
100+
stroke-dasharray: 2000px 2000px;
101+
stroke-dashoffset: 2000px;
102+
-webkit-transform-origin:50% 50%;
103+
transform-origin:50% 50%;
104+
-webkit-animation:anim 4s linear 1 forwards,
105+
color 2s linear 1 forwards,
106+
dance 2s ease infinite;
107+
animation:anim 4s linear 1 forwards,
108+
color 2s linear 1 forwards,
109+
dance 2s ease infinite;
110+
}
111+
112+
@-webkit-keyframes anim {
113+
0% { stroke-dashoffset: 2000px }
114+
100% { stroke-dashoffset: 0 }
115+
}
116+
117+
@keyframes anim {
118+
0% { stroke-dashoffset: 2000px }
119+
100% { stroke-dashoffset: 0 }
120+
}
121+
122+
.fry path { -webkit-animation-delay:0s,2s,22s; animation-delay:0s,2s,22s }
123+
.bender path { -webkit-animation-delay:4s,6s,22s; animation-delay:4s,6s,22s }
124+
.leela path { -webkit-animation-delay:8s,12s,22s; animation-delay:8s,12s,22s }
125+
.zoidberg path { -webkit-animation-delay:12s,14s,22s; animation-delay:12s,14s,22s }
126+
.amy path { -webkit-animation-delay:18s,20s,22s; animation-delay:18s,20s,22s }
127+
128+
.fry path { --charColor:#d27e41 }
129+
.bender path { --charColor:#6f6f6f }
130+
.leela path { --charColor:#80497f }
131+
.zoidberg path { --charColor:#bf2b28 }
132+
.amy path { --charColor:#d683ac }
133+
134+
@-webkit-keyframes color {
135+
0% { fill:transparent }
136+
100% { fill:var(--charColor); }
137+
}
138+
139+
@keyframes color {
140+
0% { fill:transparent }
141+
100% { fill:var(--charColor); }
142+
}
143+
144+
@-webkit-keyframes dance {
145+
25% { -webkit-transform:rotate(-10deg); transform:rotate(-10deg) }
146+
0%, 50% { -webkit-transform:rotate(0); transform:rotate(0) }
147+
75% { -webkit-transform:rotate(10deg); transform:rotate(10deg) }
148+
}
149+
150+
@keyframes dance {
151+
25% { -webkit-transform:rotate(-10deg); transform:rotate(-10deg) }
152+
0%, 50% { -webkit-transform:rotate(0); transform:rotate(0) }
153+
75% { -webkit-transform:rotate(10deg); transform:rotate(10deg) }
154+
}
155+
156+
.ship {
157+
position:absolute;
158+
top:0px;
159+
width:240px;
160+
height:160px;
161+
background:url(https://cdn.rawgit.com/ManzDev/codevember2017/master/assets/planet-express.png);
162+
background-position:0 0;
163+
-webkit-animation:ship .2s steps(3) infinite,
164+
navigate 34s linear 1 forwards,
165+
navigateback 1.5s linear 1 30s;
166+
animation:ship .2s steps(3) infinite,
167+
navigate 34s linear 1 forwards,
168+
navigateback 1.5s linear 1 30s;
169+
z-index:-3;
170+
}
171+
172+
@-webkit-keyframes ship {
173+
0% { background-position:0 0 }
174+
100% { background-position:0 480px }
175+
}
176+
177+
@keyframes ship {
178+
0% { background-position:0 0 }
179+
100% { background-position:0 480px }
180+
}
181+
182+
@-webkit-keyframes navigate {
183+
0% { -webkit-transform:translateX(-500px); transform:translateX(-500px) }
184+
100% { -webkit-transform:translateX(150vw); transform:translateX(150vw) }
185+
}
186+
187+
@keyframes navigate {
188+
0% { -webkit-transform:translateX(-500px); transform:translateX(-500px) }
189+
100% { -webkit-transform:translateX(150vw); transform:translateX(150vw) }
190+
}
191+
192+
@-webkit-keyframes navigateback {
193+
0% { -webkit-transform:translate(150vw, 150px) scale(-6, 6); transform:translate(150vw, 150px) scale(-6, 6); z-index:10 }
194+
100% { -webkit-transform:translate(-1500px, 150px) scale(-6, 6); transform:translate(-1500px, 150px) scale(-6, 6); z-index:10 }
195+
}
196+
197+
@keyframes navigateback {
198+
0% { -webkit-transform:translate(150vw, 150px) scale(-6, 6); transform:translate(150vw, 150px) scale(-6, 6); z-index:10 }
199+
100% { -webkit-transform:translate(-1500px, 150px) scale(-6, 6); transform:translate(-1500px, 150px) scale(-6, 6); z-index:10 }
200+
}

‎day-22/index.html

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<!DOCTYPE html>
2+
<html lang="en" >
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>#codevember - Day 22: Planet</title>
6+
7+
8+
9+
<link rel="stylesheet" href="css/style.css">
10+
11+
12+
</head>
13+
14+
<body>
15+
<div class="page">
16+
<div class="data">
17+
<h1>Planet</h1>
18+
<span>Express</span>
19+
<h2>#Codevember</h2>
20+
<a class="ghost" href="https://twitter.com/Manz" target="_blank">Code by Manz</a>
21+
<a class="ghost" href="https://soundcloud.com/plastiware/futurama-crapcom-mix" target="_blank">Music by Plastiware</a>
22+
</div>
23+
24+
<div id="screen">
25+
26+
<div id="chars">
27+
<svg class="fry" data-color="#ff6a00">
28+
<path d="m84.5 224c0.9-10 1.9-20 1.9-31 0-7-4.2-10-11.5-12-8-2-8.4-15-15.8-16-9.9-2-18.6-8-24-17-4.3-7-2.3-16-1.6-24 0.5-6 8.3-13-1.2-18-3.8-2-14.8-5-6.7-9.4 4.5-2.7 19-4.4 13.5-9.9-3.8-3.8-5.6-15.9 2.9-12.2 5 2.2 8.6 10.2 15.1 2.8 7.1-8.1 17.8-11.9 28-14.3 7.8-1.8 15.9-1.9 23.9 0.6 4 1.2 8 5 9-2.2 1-7-5-13.2-3-20 1-3.4-6-13.8 0-8.7 10 8.4 19 17.8 27 28.8 2 2.9 5 10.2 4 2.1-1-6.4 0-12.7-2-19.1-1-2.9-5-10.3-4-9.4 5 6.2 11 11.3 15 18.6 3 5.8 10 8.6 13 15.1 5 9.3 9 22.4 3 32.2-3 5-14 0-15 6-1 7 9 11 9 17 0 4 8 3 10 9s3 13-3 17c-3 2-8 7 0 7 9 0-5 9-1 15 5 8 17 12 18 21 1 7-9 9-14 9-4 0-2 3-11 5-8 2-13 10-19 16s-12 13-12 22"/>
29+
</svg>
30+
<svg class="bender">
31+
<path d="M67 238c16 7 34 7 51 7 13 1 25 0 37-7 11-6 6-20 7-31 2-20 3-40 1-60-1-14 3-29 0-43-2-12-7-25-22-28s-15-20-17-32c-2-9-4-13 1-23 5-11-11-19-15-7-3 10 4 11 3 24-2 12 3 29-12 34-12 4-26 5-34 17-7 10 4 28-6 36s-23 9-33 17c-9 7-9 18-6 28 3 13 21 10 30 16 6 4-3 16 9 15 11-1 16 17 8 24-4 3-2 9-2 13z"/>
32+
</svg>
33+
<svg class="leela">
34+
<path d="M265 240c1-13 0-24 10-34 7-7 32 5 30-18-1-8-9-28 8-23 12 4 9 1 6-10-4-15-1-30 3-44 5-18 5-40-10-49-16-9 17 2 4-8-9-7-21-18-31-14-14 7 12-6-5-6s-32 5-49 12c-12 4-29 31-31 11-2-19-24-13-35-22-6-5-18-6-27-8-14-3-28 3-42 7l-8 3c-15 7-27 20-36 35-3 6 28-15 25-9-9 12-18 25-20 40-4 20-1 41 1 62 1 17 5 38-7 51a59 59 0 0 1-34 20c-13 3 13 18 20 17 15-4 33 8 45 0 16-10 37-8 45-30 5-16 8-35 4-52-4-16-3-31-2-47 0-19 18-27 28-42 7-12 40-6 26 7-10 9-20 28-10 39 9 9 27 37 27 30v11m0 0c1 13 8 1 15 15 7 13 10 37-1 46s18 14 26 13c8 0 18 2 25-3"/>
35+
</svg>
36+
<svg class="zoidberg">
37+
<path d="M155 212c0-12 4-24 10-35 6-10 8-20 12-30 4-11 10-20 16-30 7-11 11-22 12-34 1-22-13-40-31-52a73 73 0 0 0-68-3c-12 5-28 10-33 21S55 62 46 68c-7 6 0 18-4 20-11 9-2 23-2 38 0 7 1 17-10 22-12 5-14 17-18 28-5 13-8 30 3 38 7 5 18-5 15 2-4 11 14 6 13 8-4 12 2 15 14 19 13 4 26-1 40 2 13 2 25-3 38-6 12-2 18-16 20-27z"/>
38+
</svg>
39+
<svg class="amy">
40+
<path d="M184 195c6-2 14-3 13-15-1-10 12-6 16-17 4-10 20-5 11-19-3-6-21-15-3-14 14 1 21 20 35 5 8-8 31-24 21-31-10-6-38-19-29-22 12-5 40 12 37 6-6-12 2-32-13-38-13-6-28-7-42-12-17-6-35-4-52-5-15-1-27 8-41 12-16 5-27-7-42-8s-30-1-45 4c-16 4-28 14-39 26-6 7 17 0 22 1 6 1 31-2 13 2-13 2-31 13-27 27 3 10-3 29 8 32 13 4 37-27 34-15-2 13 13 22 3 29s8 15 4 25l-10 26c-3 11 12 19 22 18 14-1 28 7 36 20 5 9-7 12 11 19 14 4 25 2 38-5 9-6 14-1 16-14s-1-25 3-37z"/>
41+
</svg>
42+
</div>
43+
44+
<div class="ship"></div>
45+
</div>
46+
47+
</div>
48+
49+
<audio autoplay>
50+
<source src="https://cdn.rawgit.com/ManzDev/codevember2017/master/assets/futurama-by-plastiware.mp3">
51+
<source src="https://cdn.rawgit.com/ManzDev/codevember2017/master/assets/futurama-by-plastiware.ogg">
52+
</audio>
53+
54+
<script src="js/index.js"></script>
55+
56+
</body>
57+
</html>

‎day-22/js/index.js

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/* Look, mom!! Without Javascript! */

‎day-22/license.txt

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
2+
3+
<!--
4+
Copyright (c) 2017 by Manz (https://codepen.io/manz/pen/eergPg)
5+
6+
7+
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
8+
9+
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
10+
11+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
12+
-->

0 commit comments

Comments
 (0)