html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<head>
<title>Bender of Futurama</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body>
<main class="wrapper">
<section class="text-container">
<p class="name">BENDER</p>
</section>
<section class="bender-head">
<article class="antenna"></article>
<article class="goggles">
<article class="box"></article>
<article class="left-eye">
<section class="left-lens"></section>
</article>
<article class="right-eye">
<section class="right-lens"></section>
</article>
</article>
<article class="mouth">
<article class="h-stripe"></article>
</article>
</section>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
body {
margin: 0;
background: #37474F;
}
.wrapper {
position: fixed;
height: 100%; width: 100%;
background: #37474F;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.text-container {
position: absolute;
height: 50px; width: 300px;
top: 20px; left: 0; right: 0;
margin: 0 auto;
background: transparent;
display: block;
transform: scale(20);
transition: 500ms ease-in;
z-index: 1;
}
.name {
position: relative;
margin: 0;
text-align: center;
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
window.onload = function() {
var mouth = document.getElementsByClassName('mouth'),
txtContainer = document.getElementsByClassName('text-container'),
motto = document.getElementsByClassName('motto-container');
for(var stripe = 0; stripe < 5; stripe++) {
var vElement = document.createElement('article');
vElement.setAttribute('class', 'v-stripe');
mouth[0].appendChild(vElement);
}
// Name Animation
setTimeout(function() {
txtContainer[0].style.transform = 'scale(1)';
}, 500);
setTimeout(function() {
motto[0].style.transform = 'scale(1)';
}, 1500);
};
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run