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!!!