I'm a front-end beginner and I want to make an effect now!
When you click the button on the red card, let the red move down and fade out, while the blue card slides down from above.
When you click the blue button again, it turns blue and moves down to fade out, and the red card slides down from above.
But I only make the red card move down, and it has no effect when I want to click the button of the blue card.
I'm sorry that my whole logic is stuck, I hope I can ask for your help here, thank you in advance.
The effect I want to do is similar to this URL below
enter link description here
I made a screenshot as an example
let btn = document.querySelector('.btn');
let btn2 = document.querySelector('.btn2');
btn.addEventListener('click', function() {
$('.card1').addClass('active');
})
btn2.addEventListener('click', function() {
$('.card2').addClass('active');
})
body {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.wrap {
position: relative;
}
.wrap .card1 {
width: 500px;
height: 300px;
background-color: red;
border-radius: 20px;
display: flex;
justify-content: center;
align-items: flex-end;
}
.wrap .card1 .btn {
width: 100px;
height: 50px;
border-radius: 50px;
margin-bottom: 10px;
}
.wrap .card2 {
position: absolute;
top: 0px;
width: 500px;
height: 300px;
background-color: blue;
border-radius: 20px;
z-index: -1;
display: flex;
justify-content: center;
align-items: flex-end;
}
.wrap .card2 .btn2 {
width: 100px;
height: 50px;
border-radius: 50px;
margin-bottom: 10px;
}
.active {
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
-webkit-animation-name: moveup;
animation-name: moveup;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#-webkit-keyframes moveup {
from {
opacity: 1;
}
to {
transform: translatey(20px);
display: none;
opacity: 0;
}
}
#keyframes moveup {
from {
opacity: 1;
}
to {
transform: translatey(20px);
display: none;
opacity: 0;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
<div class="card1">
<input type="button" value="save" class="btn">
</div>
<div class="card2">
<input type="button" value="recalculate" class="btn2">
</div>
</div>
I made this code for you, hope you find it helpful, if you have any doubt I will be glad to help you out.
function card2Show() {
var card2 = document.getElementById('card2');
var card1 = document.getElementById('card1');
//card1 down transition
card1.style.transform = "translateY(131px)"; //this move the card down
card1.style.filter = "opacity(0)"; //this changes the opacity of the card to desapeare it
//this timeout is set to give time to the first animation to finish
setTimeout(() => {
card1.style.display = "none";
//here is the card2 animation to apear
card2.style.transform = "translateY(-131px)";
card2.style.filter = "opacity(0)";
card2.style.display = "block";
setTimeout(() => {
card2.style.filter = "opacity(1)";
card2.style.transform = "translateY(0)";
}, 60)
}, 450)
}
function card1Show() {
var card2 = document.getElementById('card2');
var card1 = document.getElementById('card1');
//card1 down transition
card2.style.transform = "translateY(-131px)"; //this move the card down
card2.style.filter = "opacity(0)"; //this changes the opacity of the card to desapeare it
//this timeout is set to give time to the first animation to finish
setTimeout(() => {
card2.style.display = "none";
//here is the card2 animation to apear
card1.style.transform = "translateY(131px)";
card1.style.filter = "opacity(0)";
card1.style.display = "block";
setTimeout(() => {
card1.style.filter = "opacity(1)";
card1.style.transform = "translateY(0)";
}, 60)
}, 450)
}
.cardsContainer {
background-color: red;
max-height: 180px;
min-height: 180px;
overflow: hidden;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
}
.card1 {
height: 100px;
transition: all .6s ease,filter .5s ease;
padding: 20px;
background-color:white;
}
.card2 {
display: none;
height: 100px;
padding: 20px;
background-color:white;
transition: all .6s ease;
}
<section>
<div class="col-12 cardsContainer">
<div class="col-8">
<div id="card1" class="card card1">
<div class="card-body">
<button onclick="card2Show()">Show card2</button>
</div>
</div>
<div id="card2" class="card card2">
<div class="card-body">
<button onclick="card1Show()">Show card1</button>
</div>
</div>
</div>
</div>
</section>
Related
Just like the above image or an idea or reference to achieve this design, I appreciate the help or suggestion given by community thank you
I have got reference of progress bar which is circular but not able find an approach to solve it.
const boxes = document.querySelectorAll(".box");
const colors = ['red', 'blue', 'green', 'yellow', 'orange', 'violet']
boxes.forEach((box) => {
const insideContent = box.innerText;
box.style.border = `6px solid ${colors[insideContent]}`
})
#app {
display: flex;
}
.box {
width: 50px;
height: 50px;
margin: 10px;
background-color: cyan;
display: flex;
justify-content: center;
align-items: center;
}
<div id="app">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
As per your question I think this is what you are trying to achieve.
First define a pseudo class root
:root {
--color-val: blue;
}
Note: In order to use the --color-val you need to write it as color: var(--color-var) in CSS
Second use JavaScript to update the variable --color-val
let colors =
var root = document.querySelector(':root');
const delay = ms => new Promise(res => setTimeout(res, ms));
const colorChange = async () => {
await delay(1000);
color = colors[Math.floor(Math.random() * colors.length)]
console.log(color)
root.style.setProperty('--color-val', color);
};
colorChange()
Note:
Add the color list you want to select from or go to CodePen for a list of 1000+ hex codes.
Promise are used for asynchronous function and can be skipped by using setTimeOut for a delayed loop or if used with another eventlistener.
I apologize if I misunderstood the question. Wrote in a hurry and without beautyful visualisation, if you disassemble the principle, you can customize it.
h1 {
display: block;
margin:0 auto;
text-align: center;
padding-top:20%;
}
.container {
display:flex;
width: 150px;
height: 150px;
border: 1px solid black;
z-index: 110;
margin:0;
margin: -10px;
}
.top {
display:block;
background-color: green;
height: 24px;
width: 150px; /* gorizontal top */
animation: top 1s linear;
animation-fill-mode: forwards;
}
#keyframes top {
0% {
width: 0px;
}
100% {
width: 150px;
}
}
.right {
background-color: green;
height: 0%;/* right */
width: 32px;
animation: right 1s linear;
animation-fill-mode: forwards;
animation-delay: 1s;
z-index: 10;
}
#keyframes right {
0% {
height: 0%;
}
100% {
height: 100%;
}
}
.box {
position: fixed;
top: 32.5px;
left: 32.5px;
width: 100px;
height: 100px;
border: 1px solid black;
margin: auto;
z-index: 120;
margin: -10px -10px;
}
.bottom {
position: absolute;
top: 123px;
left: 150px;
background-color: green;
width: 0px;
height: 27px;
z-index: 10;
animation: bottom 1s linear;
animation-fill-mode: forwards;
animation-delay: 2s;
/* animation-direction: reverse; */
}
#keyframes bottom {
0% {
transform: translate(0,0);
}
100% {
transform: translate(-250px,0);
-webkit-transform: translate(-250px,0); /** Safari & Chrome **/
-o-transform: translate(-250px,0); /** Opera **/
-moz-transform: translate(-250px,0); /** Firefox **/
width: 250px;
}
}
.left {
position: absolute;
top: 122px;
background-color: green;
width: 25px;
height: 0px;
animation: left 1s linear;
animation-fill-mode: forwards;
animation-delay: 3s;
}
#keyframes left {
0% {
transform: translate(0,0);
}
100% {
transform: translate(0,-250px);
-webkit-transform: translate(0,-250px); /** Safari & Chrome **/
-o-transform: translate(0,-250px); /** Opera **/
-moz-transform: translate(0,-250px); /** Firefox **/
height: 277px;
}
}
<div class='head'>
<div class='container'>
<div class='top'></div>
<div class='box'>
<h1 id='timer'>
1
</h1>
</div>
<div class='right'></div>
<div class='bottom'></div>
<div class='left'></div>
</div>
</div>
<script type="text/javascript">
init()
function init()
{
sec = 0;
setInterval(tick, 1000);
}
function tick()
{ if (sec<3) { sec++
document.getElementById("timer").
childNodes[0].nodeValue = sec;
} else {
clearInterval(0);
}
}
</script>
Also, instead of the SetInterval script, you can take values from your block width and height styles and output a mathematical calculation in h1 instead of a stopwatch.
upd: After your comment, I decided to do what I wrote about above. You can play with values and math, I add a snippet of another solution that changes the progress bar from the entered values within the entered range. (of course, it would be easier on react than on pure js)
function grade () {
let grade = +document.getElementById("grade").value;
let range = +document.getElementById("range").value;
document.getElementById("timer").innerHTML = `${grade}/${range}`;
progress(grade,range)
}
function progress (value, grade) {
document.getElementById('1').style.backgroundColor = `white`
document.getElementById("left").className = "noactive";
document.getElementById('top').style.width = `0%`
document.getElementById('right').style.height = `0%`
document.getElementById('bottom').style.width = `0%`
let GradeValuSide = grade/4;
if (value <= GradeValuSide) {
document.getElementById('top').style.width =
`${value/GradeValuSide*100}%`
} else if (value > GradeValuSide && value <= (GradeValuSide*2)) {
document.getElementById('top').style.width = `100%`
document.getElementById('right').style.height =
`${(value-GradeValuSide)/GradeValuSide*100}%`
} else if (value >= grade/2 && value < (grade/4)*3) {
document.getElementById('top').style.width = `100%`
document.getElementById('right').style.height = `100%`
document.getElementById('bottom').style.width =
`${((((value-(GradeValuSide*2)) / GradeValuSide) *100) / 100) *27}%`
} else if (value >= grade-(grade/4) /* && value < value + 1 */) {
document.getElementById('top').style.width = `100%`
document.getElementById('right').style.height = `100%`
document.getElementById('bottom').style.width = `100%`
document.getElementById('1').style.backgroundColor = `green`
document.getElementById("left").className = "left";
document.getElementById('left').style.height =
`${(40 - (40 * ((((value-(GradeValuSide*3)) * 100) / GradeValuSide)/ 100)))}%`
}
}
h1 {
font-size:20px;
position: absolute;
left: 40px;
display: block;
margin: 0 auto;
align-items: center;
padding-top:10%;
}
.container {
display:flex;
width: 150px;
height: 150px;
border: 1px solid black;
margin:0;
margin: -10px;
}
div.top {
display:block;
background-color: green;
height: 24px;
width: 0%; /* gorizontal top */
z-index:999;
}
div.right {
position:relative;
background-color: green;
height: 0%;/* right */
width: 32px;
z-index: 9999;
}
.box {
position: fixed;
top: 32.5px;
left: 32.5px;
background-color:white;
width: 100px;
height: 100px;
border: 1px solid black;
margin: auto;
z-index: 120;
margin: -10px -10px;
}
.wrap{
position: relative;
}
div.bottom {
position: absolute;
top: 123px;
background-color: green;
width: 0%; /* 27 = 100% */
height: 27px;
float: right;
right: 78vw;
z-index: 100;
}
div.left {
position: absolute;
background-color: white;
width: 23px;
height: 40%;
top: 23px;
bottom: 10px;
left: 0;
float: top;
}
div.noactive {
position: absolute;
background-color: white;
width: 23px;
height: 0%;
top: 23px;
bottom: 10px;
left: 0;
float: top;
}
.items {
margin-top: 50px;
text-align: center;
}
.grade,
.value {
height: 15px;
width: 50px;
align-items: center;
}
<div class='head'>
<div id='1' class='container'>
<div id='top' class='top'></div>
<div class='box'>
<h1 id='timer'>1</h1>
<div class='items'>
value<input id='grade' class='grade' type=number oninput="grade()"/>
range<input id='range' class='value' type=number oninput="grade()"/>
</div>
</div>
<div id='right' class='right'></div>
<div id='bottom' class='bottom'></div>
<div id='left' class='noactive'></div>
</div>
</div>
<script src='app.js'></script>
I'm trying to make a replica of the slider on top of this google page: https://www.google.com/doodles
If someone could make a replica of the image slider with the bars, that would be great! I've tried to on my own but can't figure it out. Here's my try if it's helpful!
JAVASCRIPT:
<script>
var imgArray = [
'images/img1.gif',
'images/img2.gif',
'images/img3.jpg',
'images/img4.jpg'],
curIndex = 0;
imgDuration = 3000;
function slideShow() {
document.getElementById('slider').className += "fadeOut";
setTimeout(function () {
document.getElementById('slider').src = imgArray[curIndex];
document.getElementById('slider').className = "";
}, 500);
curIndex++;
if (curIndex == imgArray.length) { curIndex = 0; }
}
</script>
HTML:
<img class="slidershow" id="slider" src="images/img1.gif" onmouseover="slideShow()">
<div id="navigation">
<label for="r1" class="bar" id="bar1"></label>
<label for="r2" class="bar" id="bar2"></label>
<label for="r3" class="bar" id="bar3"></label>
<label for="r4" class="bar" id="bar4"></label>
</div>
</div>
CSS: --> Honestly, I wrote so much CSS that I don't know which ones relate, so I might have left a few out. Need to clean that up - Apologize in advance
.nav_links {
list-style: none;
}
.nav_links li {
display: inline-block;
padding: 0px 20px;
}
.nav_links li a {
color: #009cdc;
transition: all 0.3s ease 0s;
}
.nav_links li:hover a {
color: #2772ff;
}
#top-content {
display: block;
}
latest-nav li#latest-nav-1 {
background-color: #fa4842;
}
#latest-nav li.off {
border-top: 15px solid #fff;
}
#latest-nav li.off {
height: 5px;
opacity: 0.35;
}
#latest-nav li {
cursor: pointer;
float: left;
height: 5px;
transition: opacity 0.15s ease,height 0.15s ease,border-top 0.15s ease;
-moz-transition: opacity 0.15s ease,height 0.15s ease,border-top 0.15s ease;
-webkit-transition: opacity 0.15s ease,height 0.15s ease,border-top 0.15s ease;
width: 16.6%;
}
.slidershow {
height: 400px;
overflow: hidden;
}
.middle {
position: absolute;
top: 50%;
left: 25%;
transform: translate(-50%,-50%);
}
#navigation {
position: absolute;
bottom: 35px;
left: 60%;
transform: translateX(-50%);
display: flex;
}
.bar {
border-top: 15px solid #fff;
width: 200px;
opacity: 0.35;
height: 5px;
cursor: pointer;
transition: 0.4s;
}
.slides {
width: 500%;
height: 100%;
display: flex;
margin-top: 30px;
}
.slide {
width: 20%;
transition: 0.6s;
}
.slide img {
display: block;
margin: auto;
max-height: 250px;
max-width: 600px;
width: auto;
}
latest .container img {
display: block;
margin: auto;
max-height: 250px;
max-width: 600px;
}
#bar1 {
background-color: #3875fc;
}
#bar2 {
background-color: #ff8809;
}
#bar3 {
background-color: #19be29;
}
#bar4 {
background-color: #fa4842;
}
Thanks so much!
I'm always happy to see newcomers devoting time to study. First of all, good job! Unfortunately I'm not a very good teacher, but I put together a little example of this slider you're working on. You can check it clicking here.
Basically what is going on is:
The HTML is divided into two sections: the slider & the navbar.
I hide all slides by default applying a display: none to them. They're only visible when I add an additional class.
Detect the hover method via javascript. Whenever the navbar item is hovered on, you will detect its position (I added a data attribute called data-position to find out which position it is) and show the correspondent slider.
So, if the navbar has the data-position of 2, I know that I must show the second slide. To do that, I use .slider .slider-item:nth-child(2).
As I mentioned I'm not the best at explaining, but I hope this helps you out a little bit. Keep studying and don't give up!
HTML:
<div class="wrapper">
<div class="slider">
<div class="slider-item slider-item--visible">
hello item 1
</div>
<div class="slider-item">
hello item 2
</div>
<div class="slider-item">
hello item 3
</div>
</div>
<nav class="navbar">
<span class="navbar-item navbar-item--selected" data-position="1"></span>
<span class="navbar-item" data-position="2"></span>
<span class="navbar-item" data-position="3"></span>
</nav>
</div>
CSS
.wrapper{
max-width: 1000px;
width: 100%;
margin: 0 auto;
display: block;
}
/* Slider */
.slider{
max-width: 100%;
width: 100%;
}
.slider-item{
display: none;
}
.slider-item--visible{
display: block;
}
/* Navbar */
.navbar{
max-width: 100%;
display: flex;
align-items: flex-end;
height: 8px;
}
.navbar-item{
max-width: 33.3%;
width: 100%;
display: block;
height: 5px;
cursor: pointer;
opacity: .5;
transition: all .32s ease;
}
.navbar-item--selected{
height: 8px;
opacity: 1;
}
/* Meaningless styles (colors) */
.navbar-item:nth-child(1){
background: salmon;
}
.navbar-item:nth-child(2){
background: lightblue;
}
.navbar-item:nth-child(3){
background: #19be29;
}
Javascript
const $navbars = document.querySelectorAll(`.navbar-item`);
function removeSelected(){
const $selected = document.querySelectorAll(`.navbar-item--selected, .slider-item--visible`);
if (!$selected){
return;
}
for (let each of $selected){
each.classList.remove("navbar-item--selected");
each.classList.remove("slider-item--visible");
}
}
for (let each of $navbars){
each.addEventListener("mouseover", function(){
removeSelected();
const position = each.getAttribute("data-position");
const $item = document.querySelector(`.slider .slider-item:nth-child(${position})`)
each.classList.add("navbar-item--selected")
$item.classList.add("slider-item--visible");
});
}
I want to create a messenger component that, when the function is called, will create a message and, when pressed or by a timer, will at first make it transparent -> after that, smoothly decrease the height of the wrapper ->, and after the end of the transition, delete the object
How can can I do that
My code is not working correctly
<template>
<div class="message" id="wrapper"></div>
</template>
<style lang="scss">
$height-block: 9vmin;
.message {
position: absolute;
z-index: 10;
right: 1vmin;
bottom: 1vmin;
width: 25vmin;
height: 50vmin;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: flex-end;
.wrapper {
* {
box-sizing: border-box;
}
flex-shrink: 0;
width: 100%;
position: relative;
transition: height 0.5s linear;
transition: margin 0.5s linear;
height: $height-block;
padding: 0.5vmin 0;
&__block {
background: rgba(42, 29, 29, 0.8);
height: 100%;
width: 100%;
font-size: 2vmin;
padding: 1vmin;
color: white;
display: flex;
align-items: center;
justify-content: center;
transition: opacity 0.5s linear;
}
}
}
</style>
<script>
export default {
name: "Messenger",
};
//eslint-disable-next-line no-unused-vars
window.msg = function msg(msg) {
let wrapper = document.createElement("div");
wrapper.classList.add("wrapper");
document.getElementById("wrapper").appendChild(wrapper);
let wrapper__block = document.createElement("div");
wrapper__block.classList.add("wrapper__block");
wrapper.appendChild(wrapper__block);
wrapper__block.innerHTML = msg;
setTimeout(() => {
wrapper__block.style.opacity = "0";
}, 1000);
wrapper__block.addEventListener("mousedown", () => {
wrapper__block.style.opacity = "0";
});
wrapper__block.addEventListener("transitionend", () => {
wrapper.parentElement.style.height = "0";
wrapper.parentElement.style.margin = "0";
});
wrapper.addEventListener("transitionend", () => {
wrapper.remove(wrapper__block);
});
};
</script>
I have a div where I want to change the image and text when I scroll on it. I have gotten some of the way but I cant figure out how to keep the "parallax-row" fixed, but act like its scrolling? I have a code pen link to help below.
MY GOAL : When you scroll anywhere in the parallax-window everything should stick, but the image and text changes. I have seen some cool image effects using parallax so thats why I am learning it.
codepen
<html>
<body>
<!---------PARALLAX------->
<div class="parallax-window">
<div class="parallax-container">
<div class="parallax-row">
<div class="parallax-image-container">
<img src="https://cdn.pixabay.com/photo/2016/11/18/19/07/happy-1836445_1280.jpg" alt="">
</div>
<div class="parallax-text">
<h1>Title 1</h1>
<h3>This is a description.
</h3>
<div class="mouseicon">
<div class="mousewheel"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
/*PARALLAX */
.parallax-container::-webkit-scrollbar {
display: none;
}
.parallax-window {
position: relative;
height: 400px;
width: 100vw;
overflow-y: scroll;
overflow-x: hidden;
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
.parallax-container {
display: flex;
align-items: center;
justify-content: flex-start;
flex-direction: column;
height: 1000px;
background-color: rgb(221, 221, 221);
}
.parallax-row {
display: flex;
justify-content: flex-start;
align-items: center;
height: 400px;
width: 100%;
}
.parallax-image-container {
display: block;
height: inherit;
}
.parallax-image-container img {
height: inherit;
}
.parallax-text {
height: inherit;
display: flex;
flex-direction: column;
align-items: left;
justify-content: center;
padding: 0em 4em;
}
.mouseicon {
margin: 1em;
display: flex;
justify-content: center;
width: 40px;
height: 65px;
border: solid 2px black;
border-radius: 50px;
}
.mousewheel {
width: 10px;
height: 20px;
background-color: black;
border-radius: 50px;
animation: scroll 1.5s infinite;
}
#keyframes scroll {
0% {
transform: translateY(0px);
opacity: 0.5;
}
100% {
transform: translateY(5px);
}
}
JS
//-------PARALLAX SCROLL-------- //
const parallaxContainer = document.querySelector(".parallax-window");
const parallaxImage = document.querySelector(".parallax-image-container img");
parallaxContainer.scrolltop = 0;
const parallaxText = document.querySelector(".parallax-text h1")
var scrollHandler = function () {
var newImageUrl = parallaxImage.src;
var scrollTopParallax =
parallaxContainer.scrollTop || parallaxContainer.scrollTop;
if (scrollTopParallax > 100) {
newImageUrl =
"https://cdn.pixabay.com/photo/2016/11/29/07/16/balancing-1868051__480.jpg";
parallaxText.innerHTML = "Title 2"
}
if (scrollTopParallax < 100) {
newImageUrl =
"https://cdn.pixabay.com/photo/2016/11/18/19/07/happy-1836445_1280.jpg";
parallaxText.innerHTML = "Title 1"
}
parallaxImage.src = newImageUrl;
console.log("new: " + parallaxImage.src);
};
parallaxContainer.addEventListener("scroll", scrollHandler);
I have updated my codepen with my own answer. essentially creating an overlay to scroll on and then changing the elements based on that invisible overlays scroll position. see link to codepen above.
I have a textbox that I would like to do a fancy text slide in/out effect on whenever I change the text in it. I am able to switch the text and trigger the animation and it even works multiple times, but there is a weird jumping into place/resizing of the container div that happens during the animation. I have tried animating the margins of the text elements along with the rest of the animation but that doesn't work. I can't have the div resize because it is contained in a flexbox with an image right below it that I don't want to be pushed out of the way. What can I do to fix this and make the animation smoother?
function textboxWriteAnimated(str) {
const newText = document.createElement('p');
const currentText = document.getElementById("centerText");
const textContainer = document.getElementById("centerTextContainer");
newText.className = "fadingin";
newText.innerHTML = str;
newText.id = "centerText";
currentText.classList.add(["fadingout"]);
textContainer.appendChild(newText);
setTimeout(() => {
textContainer.removeChild(currentText);
document.getElementById("centerText").classList.remove(["fadingin"]);
}, 500)
}
setTimeout(() => {
textboxWriteAnimated("Does it work?");
setTimeout(() => {
textboxWriteAnimated(":(");
}, 1500)
}, 1000)
body, html {
margin: 0;
padding: 0;
overflow: hidden;
}
#vert-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
}
#centerTextContainer {
font-size: 16px;
text-align: center;
line-height: 5px;
margin: 10px;
max-height: 37px;
min-height: 37px;
}
#img-container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 50vw;
}
#links-container img {
margin: 5px;
}
#keyframes fade-out {
from {
bottom: 0px;
opacity: 100%;
font-size: 16px;
}
to {
bottom: 25px;
opacity: 0%;
font-size: 4px;
}
}
#keyframes fade-in {
from {
top: 25px;
opacity: 0%;
font-size: 4px;
}
to {
top: 0px;
opacity: 100%;
font-size: 16px;
}
}
.fadingout {
animation-name: fade-out;
animation-duration: 500ms;
animation-fill-mode: forwards;
}
.fadingin {
animation-name: fade-in;
animation-duration: 500ms;
}
<div id="vert-container">
<div id="centerTextContainer">
<p id="centerText">Testing...</p>
</div>
<div id="img-container">
<img src="https://img.shields.io/badge/Test-Image-black.svg">
</div>
</div>
Try like this:
function textboxWriteAnimated(str) {
const newText = document.createElement('p');
const currentText = document.getElementById("centerText");
const textContainer = document.getElementById("centerTextContainer");
newText.className = "fadingin";
newText.innerHTML = str;
newText.id = "centerText";
currentText.classList.add(["fadingout"]);
textContainer.appendChild(newText);
setTimeout(() => {
textContainer.removeChild(currentText);
document.getElementById("centerText").classList.remove(["fadingin"]);
}, 500)
}
setTimeout(() => {
textboxWriteAnimated("Does it work?");
setTimeout(() => {
textboxWriteAnimated(":)");
}, 1500)
}, 1000)
body, html {
margin: 0;
padding: 0;
overflow: hidden;
}
#vert-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
}
#centerTextContainer {
font-size: 16px;
text-align: center;
line-height: 5px;
margin: 10px;
max-height: 37px;
min-height: 37px;
position: relative;
display:block;
width:100%;
}
#centerTextContainer > p {
position:absolute;
display:block;
width:100%;
left:0;
right:0;
}
#img-container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 50vw;
}
#links-container img {
margin: 5px;
}
#keyframes fade-out {
from {
bottom: 0px;
opacity: 100%;
font-size: 16px;
}
to {
bottom: 25px;
opacity: 0%;
font-size: 4px;
}
}
#keyframes fade-in {
from {
top: 25px;
opacity: 0%;
font-size: 4px;
}
to {
top: 0px;
opacity: 100%;
font-size: 16px;
}
}
.fadingout {
animation-name: fade-out;
animation-duration: 500ms;
animation-fill-mode: forwards;
}
.fadingin {
animation-name: fade-in;
animation-duration: 500ms;
}
<div id="vert-container">
<div id="centerTextContainer">
<p id="centerText">Testing...</p>
</div>
<div id="img-container">
<img src="https://img.shields.io/badge/Test-Image-black.svg">
</div>
</div>
The p elements in the animation need absolute positioning so that the top and bottom transitions will work as expected.