Display text side by side-CodePudding

Hello I have the following code:

(function() {

  var quotes = $(".quotes");
  var quoteIndex = -1;

  function showNextQuote() {
      quoteIndex;
    quotes.eq(quoteIndex % quotes.length)
      .fadeIn(2000)
      .delay(2000)
      .fadeOut(2000, showNextQuote);
  }

  showNextQuote();

})();

.quotes {
  display: none;
}

#hero h1 {
 margin: 0;
  font-size: 64px;
  font-weight: 700;
  line-height: 56px;
  color: transparent;
   background: url("https://wallpaperaccess.com/full/2492815.jpg") repeat;
  background-clip: text;
  -webkit-background-clip: text;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id = "hero">
<h1 style="margin-bottom: 16px">Sample
  <div >
    <h1> Text</h1>
  </div>
  <div >
    <h1> Change</h1>
  </div>
</h1>
</section>

The only problem is that the text is aligned on different lines, I want the text to be on the same line or beside each other with some margin in between. How can I fix that?

Also, how can I make it so the text stops alternating when it reaches the word change? Basically, it should only alternate between the text once and just stop at the word change

CodePudding user response：

(function() {

  var quotes = $(".quotes");
  var quoteIndex = -1;

  function showNextQuote() {
      quoteIndex;
    quotes.eq(quoteIndex % quotes.length)
      .fadeIn(2000)
      .delay(2000)
      .fadeOut(2000, showNextQuote);
  }

  showNextQuote();

})();

.quotes {
  display: none;
}

#hero h1 {
 display: flex;
 margin: 0;
  font-size: 64px;
  font-weight: 700;
  line-height: 56px;
  color: transparent;
   background: url("https://wallpaperaccess.com/full/2492815.jpg") repeat;
  background-clip: text;
  -webkit-background-clip: text;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id = "hero">
<h1 style="margin-bottom: 16px">Sample
  <div >
    <h1> Text</h1>
  </div>
  <div >
    <h1> Change</h1>
  </div>
</h1>
</section>

Just add display: flex property to your h1 tag by default div's are block scoped so they occupy the whole row.

CodePudding user response：

You can put the changing text into an inline element like a span instead of a block element like div.

Then only do the fadeIn for the last quote, thus not calling showNextQuote again.

(function() {

  var quotes = $(".quotes");
  var quoteIndex = -1;

  function showNextQuote() {
      quoteIndex;
    if (quoteIndex == quotes.length-1) {
      quotes.eq(quoteIndex % quotes.length)
        .fadeIn(2000);
    } else {
      quotes.eq(quoteIndex % quotes.length)
        .fadeIn(2000)
        .delay(2000)
        .fadeOut(2000, showNextQuote);
    }
  }

  showNextQuote();

})();

.quotes {
  display: none;
}

#hero h1 {
 margin: 0;
  font-size: 64px;
  font-weight: 700;
  line-height: 56px;
  color: transparent;
   background: url("https://wallpaperaccess.com/full/2492815.jpg") repeat;
  background-clip: text;
  -webkit-background-clip: text;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id = "hero">
<h1 style="margin-bottom: 16px">Sample
  <span > Text</span>
  <span > Change</span>
</h1>
</section>