Question

0

264

Vistas

Why is there not enough space for the words to fit in, in this animation?

I am trying to display a passing text animation in the homepage of my website.

There are two texts that needs to show up. "you've come to the right place" and " we care about you", next to the welcome text.

For some reason, this is how it looks like:

I want the welcome! text to appear followed quickly by the first quote, after a few seconds, the welcome and the first quote should dissapear and the second quote should appear.

CSS

/* animation  welcome text styling  */

.intro{
  display: inline-block;
  white-space:nowrap;
  overflow: hidden;

}

.intro1 {  
  animation: showup 7s infinite;
  font-family: Arial, Helvetica, sans-serif;
  font-size:35px;
  color: purple;

}

.intro2 {

 font-size:30px;
  animation: reveal 7s infinite;
  width:400px;


}

.sub-head {
  margin-left:-355px;
  animation: slidein 7s infinite;
  font-size:30px;
  font-family:Arial, Helvetica, sans-serif;
  width: 100px;
  background-color: darkolivegreen;
}

@keyframes showup {
    0% {opacity:0;}
    20% {opacity:1;}
    80% {opacity:1;}
    100% {opacity:0;}
}

@keyframes slidein {
    0% { margin-left:-800px; }
    20% { margin-left:-600px; }
    35% { margin-left:0px; }
    100% { margin-left:0px; }
}

@keyframes reveal {
    0% {opacity:0;width:0px;}
    20% {opacity:1;width:0px;}
    30% {width:355px;}
    80% {opacity:1;}
    100% {opacity:0;width:355px;}
}


/* end of text animation */

HTML:

<div class= "first-box"> 


<!-- a welcome text is placed here to grasp the users' attention to the website. -->

 <div class="intro intro1">Welcome!</div>
  <div class="intro intro2">
    <span class="sub-head "> You've come to the right place</span>
    <span class="sub-head inactive">We care about you </span>
  
  </div>



 

  </div>

JS:

// sets the interval for which the function will run, in this case 8 seconds, (8000)
setInterval(function() {
  // grab all elements with class 'sub-head' and stores it in the elems const. 
  const elems = document.querySelectorAll('.sub-head')


  elems.forEach(e => {
     // check if the element has a class 'inactive', if there is one, remove it
    if (e.classList.contains('inactive')) e.classList.remove('inactive')
    // if not, add it. This is how it creates a loop. 
    else e.classList.add('inactive');
  });
}, 8000)

about 4 years ago · Juan Pablo Isaza

2 Respuestas

Responde la pregunta

0

Try to add inactive class and set width to 455 (at @keyframes reveal):

setInterval(function() {
  const elems = document.querySelectorAll('.sub-head')
  elems.forEach(e => {
    if (e.classList.contains('inactive')) e.classList.remove('inactive')
    else e.classList.add('inactive');
  });
}, 8000)

.intro{
  display: inline-block;
  white-space:nowrap;
  overflow: hidden;
}

.intro1 {  
  animation: showup 7s infinite;
  font-family: Arial, Helvetica, sans-serif;
  font-size:35px;
  color: purple;
}

.intro2 {
  font-size:30px;
  animation: reveal 7s infinite;
  width:400px;
}

.inactive {
  display: none;
}
.sub-head {
  margin-left:-5px;
  animation: slidein 7s infinite;
  font-size:30px;
  font-family:Arial, Helvetica, sans-serif;
  width: 200px;
  background-color: darkolivegreen;
}

@keyframes showup {
  0% {opacity:0;}
  20% {opacity:1;}
  80% {opacity:1;}
  100% {opacity:0;}
}

@keyframes slidein {
  0% { margin-left:-800px; }
  20% { margin-left:-600px; }
  35% { margin-left:0px; }
  100% { margin-left:0px; }
}

@keyframes reveal {
  0% {opacity:0;width:0px;}
  20% {opacity:1;width:0px;}
  30% {width:455px;}
  80% {opacity:1;}
  100% {opacity:0;width:455px;}
}

<div class= "first-box"> 
  <div class="intro intro1">Welcome!</div>
  <div class="intro intro2">
    <span class="sub-head "> You've come to the right place</span>
    <span class="sub-head inactive">We care about you </span>
  </div>
</div>

about 4 years ago · Juan Pablo Isaza Denunciar

0

Responde la pregunta

Encuentra empleos remotos

Accepted Answer · 2022-07-13T10:53:59.261Z

make some changes

const timeout = 15000
const elems = document.querySelectorAll('.sub-head')
//for each slide make equal times
const forEachSlide = timeout / elems.length
const intro1 = document.querySelector('.intro1')
const intro2 = document.querySelector('.intro2')

//change timeouts of intros (also can set in the css file)
intro1.style.animationDuration = `${timeout}ms`
intro1.style.animationIterationCount = 'infinite'
intro2.style.animationDuration = `${timeout/2}ms`
intro2.style.animationIterationCount = 'infinite'

//timeout of each '.inactive'changes
  let showId = setTimeout(function blockShow(){
    elems.forEach(e => {
      if (e.classList.contains('inactive')) {
        e.classList.remove('inactive')  
      } else e.classList.add('inactive');
  });
    showId = setTimeout(blockShow, forEachSlide)
  }, forEachSlide)

.intro{
  display: inline-block;
  white-space:nowrap;
  overflow: hidden;
}

.intro1 {  
  animation-name: showup;
  font-family: Arial, Helvetica, sans-serif;
  font-size:35px;
  color: purple;
}

.intro2 {
 font-size:30px;
 animation-name: reveal;
 /*width auto makes the block size of this content so all words fit in it*/
  width:auto;
  /*max-width makes maximum width of block where words can be placed*/
  max-width: 1000px;
}

.sub-head{
  display: none;
}

.sub-head.inactive {
  display: inline-block;
  margin-left:-355px;
  animation: slidein 7s infinite;
  font-size:30px;
  font-family:Arial, Helvetica, sans-serif;
  width: 100%;
}

@keyframes showup {
    0% {opacity:0;}
    20% {opacity:1;}
    80% {opacity:1;}
    100% {opacity:0;}
}

@keyframes slidein {
    0% { margin-left:-800px; }
    20% { margin-left:-600px; }
    35% { margin-left:0px; }
    100% { margin-left:0px; }
}

@keyframes reveal {
    0% {opacity:0;width:0px;}
    20% {opacity:1;width:0px;}
    30% {width:auto;}
    80% {opacity:1;}
    100% {opacity:0;width:auto;}
}

<div class= "first-box"> 

 <div class="intro intro1">Welcome!</div>
  <div class="intro intro2">
    <span class="sub-head "> You've come to the right place</span>
    <span class="sub-head inactive">We care about you </span>
  
  </div>
  </div>

0

264

Why is there not enough space for the words to fit in, in this animation?

2 Respuestas

0

0

Encuentra empleos remotos

Andres GPT