Si alguien puede formular esta pregunta mejor que yo, por favor avise y modificaré (o editaré usted mismo).
Aquí está mi jsfiddle actual: https://jsfiddle.net/5v7mzadu/
Mi HTML:
<div class="text-cycler"> WE <div class="c-text" id="ctext-1">CARE</div> <div class="c-text" id="ctext-2">THINK</div> <div class="c-text" id="ctext-3">SEE</div> <div class="c-text" id="ctext-1">KNOW</div> </div>Mi CSS:
.text-cycler { text-align:center; font-size:25px; } .c-text { display:inline-block }Mi JavaScript:
var divs = $('div[id^="ctext-"]').hide(), i = 0; (function cycle() { divs.eq(i).fadeIn(400) .delay(1000) .fadeOut(400, cycle); i = ++i % divs.length; })();Como puede ver, la segunda palabra aparece/desaparece gradualmente. Me gustaría agregar una transición suave al div, de modo que el ancho del contenedor div NO cambie abruptamente el tamaño del ancho. (para que el ancho "snap" sea más suave)
¿Alguien puede ayudar?
Creo que necesitabas la animación sobre el centro de alineación de contenido y texto. Y de hecho esto debe resolver su propósito.
He agregado span{white-space: nowrap; vertical-align: text-top;} para obligarlo a alinearse en una sola línea, y se agregó el método jQuery animate para animar el ancho del texto giratorio
Y aquí está el violín para que juegues
var divs = $('div[id^="ctext-"]').hide(), i = 0; (function cycle() { divs.eq(i) .animate(400, function(){ $('.x').animate({width: $(this).innerWidth()}); }) .fadeIn(400) .delay(1000) .fadeOut(400, cycle); i = ++i % divs.length; })(); .text-cycler { text-align:center; font-size:25px; } span{white-space: nowrap; vertical-align: text-top;} .c-text { display:inline-block; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="text-cycler"> <span> WE </span><span class="x"><div class="c-text" id="ctext-1">CARE</div><div class="c-text" id="ctext-2">THINK</div><div class="c-text" id="ctext-3">SEE</div><div class="c-text" id="ctext-1">KNOW</div></span>Ver este fragmento
var divs = $('div[id^="ctext-"]').hide(), i = 0; (function cycle() { divs.eq(i).fadeIn(400) .delay(1000) .fadeOut(400, cycle); i = ++i % divs.length; })(); .text-cycler { font-size:25px; position:fixed; /*added*/ padding-left:40% /*added*/ } .c-text { display:inline-block } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="text-cycler" align="center"> WE <div class="c-text" id="ctext-1">CARE</div><div class="c-text" id="ctext-2">THINK</div><div class="c-text" id="ctext-3">SEE</div><div class="c-text" id="ctext-1">KNOW</div> </div>JavascriptLess manera.
Si quieres ponerte funky. (No en serio, esta es más una solución funky que utilizable)
.text-cycler { width:75%; margin:auto; user-select: none; text-align:center; font-size:5vw; } .text-cycler:after { content:""; display:inline-block; animation: change; animation-duration: 10s; animation-iteration-count: infinite; } @keyframes change { 0% { content: "CARE"; opacity: 0; } 3% { opacity: 1; } 22% { opacity: 1; } 25% { content: "CARE"; opacity: 0; } 25.1% { content: "THINK"; } 28% { opacity: 1; } 47% { opacity: 1; } 50% { content: "THINK"; opacity: 0; } 50.1% { content: "SEE"; } 53% { opacity: 1; } 72% { opacity: 1; } 75% { content: "SEE"; opacity: 0; } 75.1% { content: "KNOW"; } 78% { opacity: 1; } 97% { opacity: 1; } 100% { content: "KNOW"; opacity: 0; } } <div class="text-cycler"> WE </div>