CODEWITHSUNDEEP
htmlcsssassslim-lang
mcshakes
mcshakes

Reputation: 146

CSS only solution to make a word appear naturally within sentence

So I have an html.slim sentence that looks like this:

 p 
  | Log in to 
  span.word-shapeshift.text-center
    span.word Explore
    span.word Engage
    span.word Conquer
    span.word Defeat 
  | the members of the outer realm

I'm trying to make it so those words appear naturally within the sentence like so:

"Log in to Conquer the members of the outer realm". However, my CSS code makes it so the word appears behind the sentence. CSS code below:

$speed: 12s;
$wordCount: 4;

.word-shapeshift {
  color: #ecf0f1;  
  white-space: nowrap;
  position: relative;
  color: #fff;
  filter: contrast(25) blur(1px);

  .word {
    position: absolute;
    display: inline-block;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    animation: rotateWord $speed infinite ease-in-out;
  
    @for $i from 0 to $wordCount {
      &:nth-child(#{$i + 1}) {
        animation-delay: ($speed / ($wordCount + 1) * $i) - $speed;
      }
    }
  
    @keyframes rotateWord {
      0%, 5%, 100% { filter: blur(0px); opacity: 1; }        
      20%, 80% { filter: blur(1em); opacity: 0; }        
    }
  }
  
  
}

What am I doing wrong here?

Upvotes: 0

Views: 58

Answers (1)

A Haworth
A Haworth

Reputation: 36426

This snippet has 'translated' the given code into pure CSS/HTML as I found that easier to see what was going on.

To reserve enough space for the words in the sentence, the longest word (in terms of space needed) is put at the end of the sequence. The other rotating words remain position: absolute, but this 4th one has position relative so it reserves space.

Note: the color being set to #fff makes it disappear in this simple example so color settings have been removed. As color/filter/blur were not part of the problem in the question I haven't altered them further. Ditto the timing, though the timing given results in a small gap when no word shows. This can of course be altered by looking at the animation/keyframe settings.

.word-shapeshift {
  /*color: #ecf0f1;*/
  white-space: nowrap;
  position: relative;
  /*color: #fff;*/
  filter: contrast(25) blur(1px);
  --speed: 12s;
  --wordCount: 4;
  width: fit-content;
  display: inline-block;
  .word {
    display: inline-block;
    position: absolute;
    animation: rotateWord var(--speed) infinite ease-in-out;
    animation-delay: calc(var(--speed) / (var(--wordCount) + 1) * var(--n) - var(--speed));
    left: 50%;
    transform: translateX(-50%);
    &:nth-child(1) {
      --n: 1;
    }
    &:nth-child(2) {
      --n: 2;
    }
    &:nth-child(3) {
      --n: 3;
    }
    &:nth-child(4) {
      --n: 4;
      position: relative;
    }
  }
}

@keyframes rotateWord {
  0%,
  5%,
  100% {
    filter: blur(0px);
    opacity: 1;
  }
  20%,
  80% {
    filter: blur(1em);
    opacity: 0;
  }
}
<div>Log in to <span class="word-shapeshift">
    <span class="word">Explore</span>
  <span class="word">Engage</span>
  <span class="word">Defeat</span>
  <span class="word">Conquer</span></span> the members of the outer realm</div>

Upvotes: 0

Related Questions