<!--Copyright to Shen Huang, you can reach me out at shenhuang@live.ca-->
<!DOCTYPE html>
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
<html>
<head>
<title>LANTERN DEMO</title>
<style>
body {
background-color : #190f00;
}
</style>
</head>
<body>
<input id = "wordBox"
class = "wordInput"
type = "text"
maxlength = "5"
value = "LOVE"
onkeypress = "return (event.charCode > 64 && event.charCode < 91)"
>
</body>
<script>
</script>
</html>
@keyframes fadein {
0% {
opacity : 0.0;
}
100% {
opacity : 1.0;
}
}
@keyframes fadeout {
0% {
opacity : 1.0;
}
50% {
opacity : 0.0;
}
100% {
opacity : 0.0;
}
}
.wordInput, .fakeInput{
position : absolute;
bottom : 25px;
left : 25px;
}
.wordInput {
height : 30px;
width : 100px;
color : #a88600;
font-size : 25px;
font-family : Arial;
text-align : center;
border : 3px;
border-radius : 15px;
border-style : solid;
background-color : #fff9e5;
border-color : #fff9e5;
animation : fadein 1s ease-in;
}
.wordInput:hover, .wordInput:focus{
border-color : #a88600;
}
.fakeInput {
height : 30px;
width : 100px;
color : #a88600;
font-size : 25px;
font-family : Arial;
text-align : center;
border : 3px;
border-radius : 15px;
border-style : solid;
background-color : #fff9e5;
border-color : #fff9e5;
animation : fadeout 2s ease-out;
}
var brd = document.createElement("DIV");
document.body.insertBefore(brd, document.getElementById("board"));
var wordBox = document.getElementById("wordBox");
var word = "";
wordBox.addEventListener("focusout", wordBoxFocusOut);
function wordBoxFocusOut()
{
word = wordBox.value;
var fakeBox = document.createElement("DIV");
fakeBox.setAttribute('class', 'fakeInput');
fakeBox.textContent = word;
wordBox.style.display = "none";
brd.appendChild(fakeBox);
setTimeout(function(){
fakeBox.parentNode.removeChild(fakeBox);
}, 2000);
arrangeLanterns(word);
wordBox.addEventListener("focusout", wordBoxFocusOut);
}
window.onkeydown = function(e)
{
key = e.keyCode;
if(key == 13)
{
wordBox.blur();
}
};
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.