Interchanging text custom CSS

Site URL: https://www.evyanwhitney.com/

Would anyone know how to interchange words, like I have in my example? I'd like to achieve this by using HTML/CSS instead of uploading a video or GIF.

I'd also like the "sensual/powerful" descriptive words to be in H2 and the rest of the sentence in H1, as shown in the example.

On 8/2/2021 at 4:49 AM, Beings said:

Site URL: https://www.evyanwhitney.com/

Would anyone know how to interchange words, like I have in my example? I'd like to achieve this by using HTML/CSS instead of uploading a video or GIF.

I'd also like the "sensual/powerful" descriptive words to be in H2 and the rest of the sentence in H1, as shown in the example.

Hi. You mean this effect?

Site URL: https://orb-platinum-kx6m.squarespace.com?password=test

PW: test

1. 13 hours ago, tuanphan said:

   Hi. You mean this effect?

   Site URL: https://orb-platinum-kx6m.squarespace.com?password=test

   PW: test

   Yes! Is there anyway the words can flash between each other and not be typed out like in your example?

@Beings This site is BEAUTIFUL!  Looks like you find a solution? Would you be willing to share? I'd love to do the same thing on a site I'm working on. Thank you!

18 hours ago, angelaw said:

@Beings This site is BEAUTIFUL!  Looks like you find a solution? Would you be willing to share? I'd love to do the same thing on a site I'm working on. Thank you!

Add a Code Block > Use this code

<h1>
  I want to make you feel
  <div class="rotating-words">
    <span class="word" style="">safe</span>
    <span>free</span>
    <span>enough</span>
    <span>safe</span>
    <span>embodied</span>
    <span>good</span>
    <span>soft</span>
  </div>
</h1>
<style>
  .rotating-words .word {
    border-bottom: 2px solid #000;
    font-style: italic
}

.rotating-words {
    display: unset
}

.rotating-words span:not(:first-child) {
    display: none
}

</style>
<script>
setTimeout(function(){
  $('.rotating-words').each(function(){
    var rotatingWord = $(this).children().first(), words = [], i = 0;
    $(this).children('span').each(function(){words.push($(this).text());});
     setInterval(function(){
      rotatingWord.fadeOut(100, function(){
        $(this).html(words[i=(i+1)%words.length]).fadeIn(100);
      });
    }, 3000);
  });}, 1000);
</script>

Demo: https://thung.squarespace.com/rotate-words2?noredirect

Pass: abc