Question 232665 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – how can I preserve the word spacing on display inline-block element

I want to achieve the next animation
enter image description here

So I decided to split every single letter into an element.
Then I displayed every as a inline-block element to translate vertically them as in the example.
PROBLEM: When I displayed every span as a inline-block, the word spacing is not showing. How can I solve this?

Also, having more than one text to animate, I have some doubts about how to code the progressive delay on JS.

Thanks in advance

$('.splitSpan').each(function (index) {
  var characters = $(this).text().split("");
    $this = $(this);
    $this.empty();
    $.each(characters, function (i, el) {
      $this.append('<span class="letter-' + i + '">' + el + '</span>');
    });
});
.splitSpan span{
  display:inline-block;
}

@keyframes down {
  from {transform:translateY(4px);}
  to {transform:translateY(0px);}
}
@keyframes up {
  from {transform:translateY(-4px);}
  to {transform:translateY(0px);}
}

.splitSpan span:nth-child(even){
  animation-name: down;
  animation-duration: 1s;
  
}
.splitSpan span:nth-child(odd){
  animation-name: up;
  animation-duration: 1s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="splitSpan">HELLO WORLD<p>

<p class="splitSpan">SECOND SENTENCE</p>
Tags:

2

Answers


  1. 0

    You can add &nbsp; for space in your code

    Working example:

    $('.splitSpan').each(function (index) {
  var characters = $(this).text().split("");
    $this = $(this);
    $this.empty();
    $.each(characters, function (i, el) {
      $this.append('<span class="letter-' + i + '">' + (el.indexOf(' ') === -1 ? el: '&nbsp;') + '</span>');
    });
});
    .splitSpan span{
  display:inline-block;
}

@keyframes down {
  from {transform:translateY(4px);}
  to {transform:translateY(0px);}
}
@keyframes up {
  from {transform:translateY(-4px);}
  to {transform:translateY(0px);}
}

.splitSpan span:nth-child(even){
  animation-name: down;
  animation-duration: 1s;
  
}
.splitSpan span:nth-child(odd){
  animation-name: up;
  animation-duration: 1s;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="splitSpan">HELLO WORLD<p>

<p class="splitSpan">SECOND SENTENCE</p>
    Login or Signup to reply.
  2. 0

    As Reyno commented, add white-space-collapse: preserve

    .splitSpan span{
  display:inline-block;
  white-space-collapse: preserve;
}

    You could use animation-delay to delay the animation of the second sentence

    .second span {
  animation-delay: 1s;
}

    $('.splitSpan').each(function (index) {
  var characters = $(this).text().split("");
    $this = $(this);
    $this.empty();
    $.each(characters, function (i, el) {
      $this.append('<span class="letter-' + i + '">' + el + '</span>');
    });
});
    .splitSpan span{
  display:inline-block;
  white-space-collapse: preserve;
}

@keyframes down {
  from {transform:translateY(4px);}
  to {transform:translateY(0px);}
}
@keyframes up {
  from {transform:translateY(-4px);}
  to {transform:translateY(0px);}
}

.splitSpan span:nth-child(even){
  animation-name: down;
  animation-duration: 1s;
  
}
.splitSpan span:nth-child(odd){
  animation-name: up;
  animation-duration: 1s;
}

.second span {
  animation-delay: 1s;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="splitSpan">HELLO WORLD<p>

<p class="splitSpan second">SECOND SENTENCE</p>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search