Does anyone knows how to change the "motion" between messages i want to do something like this https://twitter.com/sieusui/status/...jeXvnjhofwEhSlp3AkKW-iycRzAqwVAJJmW4GsmMUNUNY
An this is the one im trying to edit:
https://www.youtube.com/watch?v=IaHkOEiiOqU
This is the html and css code:
An this is the one im trying to edit:
https://www.youtube.com/watch?v=IaHkOEiiOqU
This is the html and css code:
HTML:
------- html---------
<div class="top-degrade"></div>
<!-- Imported animations -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
<!-- item will be appened to this layout -->
<div id="log" class="sl__chat__layout"></div>
<!-- chat item -->
<script type="text/template" id="chatlist_item">
<div data-from="{from}" data-id="{messageId}">
<div class="meta" style="background-color: {color};">
<span class="badges"></span>
<span class="name">{from}</span>
</div>
<div class="message">
<div class="container-message">
{message}
</div>
</div>
</div>
</script>
<div class="bottom-degrade"></div>
CSS:
------- CSS---------
/* CHANGE FONT HERE */
@font-face {font-family: "Leles scribadoo";
src: url("https://db.onlinewebfonts.com/t/5d1d278fc0fcd071acfd4ea880f1bcf6.eot");
src: url("https://db.onlinewebfonts.com/t/5d1d278fc0fcd071acfd4ea880f1bcf6.eot?#iefix") format("embedded-opentype"),
url("https://db.onlinewebfonts.com/t/5d1d278fc0fcd071acfd4ea880f1bcf6.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/5d1d278fc0fcd071acfd4ea880f1bcf6.woff") format("woff"),
url("https://db.onlinewebfonts.com/t/5d1d278fc0fcd071acfd4ea880f1bcf6.ttf") format("truetype"),
url("https://db.onlinewebfonts.com/t/5d1d278fc0fcd071acfd4ea880f1bcf6.svg#Lele's scribadoo") format("svg");
}
/* END */
html, body {
height: 100%;
overflow: hidden;
}
body {
color: #916E56 !important; /* CHANGE FONT COLOR */
text-shadow: 0 0 1px rgba(0, 0, 0, 0.6), 0 0 2px rgba(0, 0, 0, 0.6); /* TEXT SHADOW */
font-family: 'Leles scribadoo', sans-serif !important; /* CHANGE THIS IF YOU CHANGED THE FONT */
}
#log>div { position: relative; padding-top: 21px; margin-bottom: 10px; }
/* ===== ANIMATION AND DURATION ===== */
/*IMPORTANT!! PUT THIS CODE IN THE HTML TO GET ACCESS TO ALL THE ANIMATIONS*/
/*<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/> */
/*ANIMATIONS: https://animate.style/ */
#log>div { animation: slideInUp 1s ease forwards, slideInUp 1s ease 5s forwards;} /*<-----changue animations and durations here*/
.colon { display: none; }
#log {position: absolute; width: 100%; bottom: 0; left: 0; padding: 0 10px 10px;}
/* CUSTOMIZE MESSAGE */
#log .message {
font-size: 72px; /* CHANGE MESSAGE FONT SIZE */
margin: none;
padding: 0px;
}
/* CUSTOMIZE NAME */
#log .name {
font-size: 56px; /* CHANGE USERNAME FONT SIZE */
color: #916E56; /* CHANGE NAME FONT COLOR */
}
/* TRY NOT TO CHANGE ANY OF THESE UNLESS YOU KNOW WHAT YOU'RE DOING */
/* YOU CAN ALWAYS GO BACK TO THE PASTEBIN TO START OVER. */
#log {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
box-sizing: border-box;
overflow: hidden;
}
#log>div { position: relative; padding-top: 21px; margin-bottom: 10px; }
/* ===== ANIMATION AND DURATION ===== */
/*IMPORTANT!! PUT THIS CODE IN THE HTML TO GET ACCESS TO ALL THE ANIMATIONS*/
/*<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/> */
/*ANIMATIONS: https://animate.style/ */
#log>div { animation: slideInUp 1s ease forwards, slideInUp 1s ease 15s forwards;} /*<-----changue animations and durations here*/
#log>div.deleted {
visibility: hidden;
}
.meta {
display: block;
}
.colon {
display: none;
}
.badge {
float: right;
padding-left: 5px;
height: 1em;
}
#log .emote {
background-repeat: no-repeat;
background-position: center;
padding: 0.1em;
background-size: contain;
}
#log .emote img {
display: inline-block;
height: 1em;
opacity: 0;
vertical-align: top;
}