Hello! I'm experimenting with creating something using javascript's createElement method. My goal is to achieve an effect similar to this image: https://i.stack.imgur.com/itKUK.gif
Currently, my code is functional, but the animation goes from top to bottom instead of bottom to top. Here's a snippet of my code:
function recal(color, user, content) {
var element = document.createElement("p");
element.className = "flyin";
var spanelement = document.createElement("span");
spanelement.appendChild(document.createTextNode(user + ': '));
element.appendChild(spanelement);
element.innerHTML = '<span style = "color:' + color+ ';font-weight:bold">' + user + ': </span>' + content;
var x = document.getElementById('messagecontainer');
x.appendChild(element);
setTimeout(function () {
element.classList.add('fade-out');
element.onanimationend = (e) => {
if (e.srcElement.classList.contains('fade-out')) {
element.parentNode.removeChild(element);
}
}
}, 10000)
;
}.fadeout {
opacity: 1;
-webkit-transition: opacity 1000ms linear;
transition: opacity 1000ms linear;
}
body {
font-family: Arial;
font-weight: bold;
margin: 0px;
}
#messagecontainer{
/* probably something here */
}
.flyin {
-webkit-animation: test1 .2s linear;
}
@-webkit-keyframes test1 {
0% {
-webkit-transform: translateX(75%);
}
100% {
-webkit-transform: translateX(0%);
}
}
.fade-out {
animation: fade 2s;
-webkit-animation: fade .5s;
-moz-animation: fade .5s;
}
@keyframes fade {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@-moz-keyframes fade {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@-webkit-keyframes fade {
from {
opacity: 1;
}
to {
opacity: 0;
}
}<button onclick='recal("blue","Komali","hello!")'>click me!</button><div id="messagecontainer"></div>Is there a way to make it animate from the bottom rather than the top? Any assistance would be greatly appreciated.