Animasi Hujan Emote
<form action="#" data-js-emojiselect>
<input type="text" placeholder="Enter any Emoji 😄">
<input type="submit" value="Make it Rain! 🌧">
</form>
<stylee>
html, body {
height: 100vh;
width: 100vw;
background: #222;
}
html, body, * {
margin: 0;
padding: 0;
}
form {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
text-align: center;
input {
display: block;
font-size: 2rem;
color: white;
margin: 1rem 0;
padding: 0.5rem 0.75rem;
cursor: pointer;
width: auto;
&[type="text"] {
background: transparent;
border: none;
border-bottom: 2px solid white;
}
&[type="submit"] {
background: transparent;
border: 2px solid white;
}
}
}
.raindrop {
color: white;
position: absolute;
animation-name: fall;
animation-duration: 5s;
}
@keyframes fall {
0% {
margin-top: -20vh;
transform: translateX(0px) scale(1);
}
20% {
transform: translateX(20px) scale(1.5);
}
40% {
transform: translateX(-15px) scale(1.3);
}
60% {
transform: translateX(23px) scale(1.7);
}
80% {
transform: translateX(12px) scale(0.8);
}
100% {
margin-top: 120vh;
transform: translateX(0px) scale(1.2);
}
}
</style>
<script>
const Util = {
getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min)) + min;
},
removeElm(elm) {
elm.parentNode.removeChild(elm);
}
}
const Rain = {
char: '🍆',
container: undefined,
init: function(char) {
this.char = char;
this.container = document.body;
this.fall();
},
fall: function() {
console.log('Rainfall');
const elm = this.createRaindrop();
document.body.appendChild(elm);
setTimeout(() => Rain.fall(), 100);
setTimeout(() => Util.removeElm(elm), 5000);
},
createRaindrop: function() {
const elm = document.createElement('div');
elm.classList.add('raindrop');
elm.appendChild(document.createTextNode(this.char));
const fontSize = Util.getRandomInt(24, 56);
elm.style.fontSize = `${fontSize}px`;
const left = Util.getRandomInt(0, window.innerWidth);
elm.style.left = `${left}px`;
return elm;
},
}
Form = {
init() {
const form = document.querySelector('[data-js-emojiselect]');
form.addEventListener('submit', function(e) {
e.preventDefault();
const char = form.querySelector('input[type="text"]').value;
Util.removeElm(form);
Rain.init(char);
});
}
}
Form.init();
</script>
0 komentar: