0
268
Views¿Por qué no hay suficiente espacio para que quepan las palabras en esta animación?
Estoy tratando de mostrar una animación de texto que pasa en la página de inicio de mi sitio web.
Hay dos textos que deben aparecer. "has venido al lugar correcto" y "nos preocupamos por ti", junto al texto de bienvenida.
Por alguna razón, así es como se ve: 
¡Quiero la bienvenida! el texto aparecerá seguido rápidamente por la primera cita, después de unos segundos, la bienvenida y la primera cita debería desaparecer y la segunda cita debería aparecer.
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)
·
Juan Pablo Isaza
2 answers
Answer question0
Intente agregar una clase inactive y establezca el ancho en 455 (en la revelación de @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>
·
Juan Pablo Isaza
Report
0
hacer algunos cambios
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>
·
Juan Pablo Isaza
Report
Answer question