CODEWITHSUNDEEP
javascriptjquerycsscss-transitionstransition
LatentDenis
LatentDenis

Reputation: 2991

CSS: How to add smooth shift to div width upon text change?

If anyone can phrase this question better than I can, please advise and I will alter (or edit yourself).

Here's my current jsfiddle: https://jsfiddle.net/5v7mzadu/

My 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>

My CSS:

.text-cycler {
     text-align:center;
     font-size:25px;
}
.c-text {
    display:inline-block
}

My 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;

})();

As you can see the second word fades in/out,. I'd like to add a smooth transition to the div, so that the width of the div container does NOT abruptly change width size. (so that the width "snap" is more smooth)

Can anyone help?

Upvotes: 5

Views: 2386

Answers (3)

Saurabh Sharma
Saurabh Sharma

Reputation: 2462

I believe you needed the animation over the content and text alignment center. And indeed this must solve your purpose.

I have added span{white-space: nowrap; vertical-align: text-top;} to force it to align in single line, and added jQuery animate method to animate the width of the rotating text

And here's the fiddle for you to play around

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>
</div>

Upvotes: 3

Adam K.
Adam K.

Reputation: 912

JavascriptLess way.

If you want to get funky. (No seriously, this is more a funky solution than usable)

.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>

Upvotes: 0

Deep 3015
Deep 3015

Reputation: 10075

See this snippet

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>

Upvotes: 0

Related Questions