Code to make text change like a gif but it's text?

Site URL: https://chromatical.com.au/strategysauce

Hello, 

I'm wondering how to make text change words, so it keeps rotating through certain words repeatedly? Similar to a gif but it's actually flipping through words?

I've uploaded a screenshot of my header text. It has a list of examples in it. But instead of me listing all the people I help in such a long list like that, I wanted the list of words to rotate through making it interesting and short.

So instead of writing...

Business & Marketing strategies designed to help you make more money from your courses, memberships, programs, subscriptions, group coaching & workshops

It could be Business & Marketing strategies designed to help you make more money from your courses

(and the other words would rotate through where it says courses).

Looking forward to hearing from you.

You mean something like this effect?

https://codepen.io/Rathijit/pen/EbQqPd

1 hour ago, tuanphan said:

You mean something like this effect?

https://codepen.io/Rathijit/pen/EbQqPd

Ooooh yes that's EXACTLY it!! 
I understand HTML and CSS, but where do I put JavaScript? I haven't used it before. Thank you SOOO very much for your help

Add a Code Block > Paste this code

 <div class="word-wrapper">
        <h1>Hello, I am</h1>
        <div class="word-rotate-wrapper">
            <h2 class="show">An UI/UX Designer</h2>
            <h2>An UI Developer</h2>
            <h2>A Full Stack Designer</h2>
          <h2>Full time</h2>
        </div>
     <h1> I work as volunteer</h1>
   </div>

<style>
  @font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  font-stretch: normal;
  src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsiH0B4gaVc.ttf) format('truetype');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: normal;
  src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4gaVc.ttf) format('truetype');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: normal;
  src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsgH1x4gaVc.ttf) format('truetype');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: normal;
  src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsg-1x4gaVc.ttf) format('truetype');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 800;
  font-stretch: normal;
  src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgshZ1x4gaVc.ttf) format('truetype');
}
.open-sans-font {
  font-family: 'Open Sans', sans-serif;
}
.clear {
  clear: both !important;
  float: none !important;
  height: 0 !important;
  width: 0 !important;
}
.transition {
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
}
.mediumTransition {
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
}
.longTransition {
  transition: all 0.8s;
  -webkit-transition: all 0.8s;
}
.rel-wrapper {
  position: relative;
}
.block-element {
  display: block;
}
.no-underline {
  text-decoration: none;
}
.no-margin {
  margin: 0;
}
.inline-element {
  display: inline-block;
}
.text-align-center {
  text-align: center;
}
.text-align-left {
  text-align: left;
}
.small-font-size {
  font-size: 0.85rem;
}
.normal-font-size {
  font-size: 1rem;
}
.medium-font-size {
  font-size: 1.25rem;
}
.medium-font-size2 {
  font-size: 1.5rem;
}
.large-font-size {
  font-size: 1.8rem;
}
.large-font-size2 {
  font-size: 2rem;
}
.extra-large-font-size {
  font-size: 2.5rem;
}
.extra-large-font-size2 {
  font-size: 3rem;
}
.thin-font-weight {
  font-weight: 100;
}
.light-font-weight {
  font-weight: 300;
}
.normal-font-weight {
  font-weight: 400;
}
.medium-font-weight {
  font-weight: 500;
}
.semibold-font-weight {
  font-weight: 600;
}
.bold-font-weight {
  font-weight: 700;
}
.ultrabold-font-weight {
  font-weight: 900;
}
.white-color-font {
  color: #FFF;
}
.black-color-font {
  color: #231f20;
}
.black-color-background {
  background-color: #231f20;
}
.grey-color-font {
  color: #6d6e71;
}
.grey-color-background {
  background-color: #6d6e71;
}
.light-white-color-background {
  background-color: #F9F9F9;
}
ul {
  list-style: none;
}
.word-wrapper {
  text-align: center;
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  left: 0;
  right: 0;
  margin: 0 10%;
}
.word-wrapper h1 {
  margin: 0;
  font-family: 'Open Sans', sans-serif;
  font-size: 2rem;
  font-weight: 400;
  display: inline-block;
  color: #fff;
  vertical-align: bottom;
  margin-right: 0.5em;
  line-height: 1.65;
}
.word-rotate-wrapper {
  position: relative;
  display: inline-block;
  vertical-align: bottom;
  overflow: hidden;
  width: 50%;
  cursor: pointer;
}
.word-rotate-wrapper h2 {
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  font-size: 3rem;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  text-align: left;
  color: #fff;
  position: absolute;
  padding: 0.5rem;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  transform: translateY(4rem);
  -webkit-transform: translateY(4rem);
  -moz-transform: translateY(4rem);
  -ms-transform: translateY(4rem);
  -o-transform: translateY(4rem);
  opacity: 0;
  text-shadow: 0 0 0.8rem #6e9bff;
}
.word-rotate-wrapper h2:first-child {
  position: relative;
}
.word-rotate-wrapper h2.show {
  transform: translateY(0.6rem);
  -webkit-transform: translateY(0.6rem);
  -moz-transform: translateY(0.6rem);
  -ms-transform: translateY(0.6rem);
  -o-transform: translateY(0.6rem);
  opacity: 1;
}
@media screen and (max-width: 800px) {
  .word-rotate-wrapper {
    display: block;
    text-align: center;
    width: 100%;
  }
  .word-rotate-wrapper h2 {
    text-align: center;
  }
}

</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $(document).ready(function () {    
    timer = setInterval(function () {
        rotateWords();
    }, 2500);
  playPauseRotating();
});
var timer;
function rotateWords() {
    var ele, eleIndex, totalWordsToRotate;
    totalWordsToRotate = $('.word-rotate-wrapper h2').length;
    ele = $('.word-rotate-wrapper h2.show');
    eleIndex = ele.index() + 1;
    ele.removeClass('show');
    if (eleIndex == totalWordsToRotate) {
        eleIndex = 1;
        $('.word-rotate-wrapper h2:nth-child(' + eleIndex + ')').addClass('show');
    } else {
        $('.word-rotate-wrapper h2:nth-child(' + (eleIndex + 1) + ')').addClass('show');
    }
}
function playPauseRotating() {
    $(document).on('mouseover', '.word-rotate-wrapper', function () {
        clearInterval(timer);
    });
    $(document).on('mouseout', '.word-rotate-wrapper', function () {
        timer = setInterval(function () {
            rotateWords();
        }, 2500);
    });
}
</script>

This was incredibly helpful. How fun! Thank you so very much!!!

Hi tuanphan! Thank you so much for sharing this code. I do not get it to work on my website though... I want the first word to be the one changing and I want it in the font of my website. How should I change the code to allow for this? 

On 12/17/2023 at 6:05 AM, Tilda said:

Hi tuanphan! Thank you so much for sharing this code. I do not get it to work on my website though... I want the first word to be the one changing and I want it in the font of my website. How should I change the code to allow for this? 

Just remove this line

and remove all line: font-family in the code