Jump to content

Interchanging text custom CSS

Recommended Posts

Posted (edited)

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.

image0.gif

Edited by Beings
typo
Posted
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.

image0.gif

Hi. You mean this effect?

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

PW: test

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

  • 1 year later...
Posted
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.