code block for sentence with revolving text

Site URL: http://lightly.me

> lightly.me

On landing you'll see "Connecting people & things, lightly."  I want the word lightly to revolve through other words. When I add the html to my codeblock, is doesn't express. What can I do to express this idea on Squarespace?  (I'm open to using to using different code that works with the platform better.) If it's possible to use the below code, how do I incorporate this into the SS platform? 

Here is some code: 

index.html

script.js

-----

Below is the code I wrote just to express the styled part that shows on landing (not incorporated into the example above)

<h1><center> Connecting people &<br> things <i>lightly.</center></i></h1>

Thank you in advance!!

Add this to Code Block

Connecting people & things <span id="word">lightly</span>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
  $(function () {
count = 0;
wordsArray = ["lightly", "with joy", "cleanly", "sustainably"];
setInterval(function () {
count++;
$("#word").fadeOut(500, function () {
$(this).text(wordsArray[count % wordsArray.length]).fadeIn(500);
});
}, 2000);
});
</script>

If it still doesn't work. Where did you get above code? Can you share link?

@tuanphan you are awesome! it works. thank you so much!

(lightly.me)

one last issue is that the word "things" is shifting in order to keep center with the rotating words. 

i slightly edited your code so the style would match up. any ideas of how to solve this? 

 
 

<h1><center>Connecting people & <br> things, <span id="word"><i>lightly</i></span></h1></center>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
  $(function () {
count = 0;
wordsArray = ["lightly", "with joy", "cleanly", "sustainably"];
setInterval(function () {
count++;
$("#word").fadeOut(500, function () {
$(this).text(wordsArray[count % wordsArray.length]).fadeIn(500);
});
}, 2000);
});
</script>

the words in the array should be italic but that is low-priority 

if @tuanphan or anyone can fill in - i would be so appreciative! thank you : )

How would I increase the time that each phrase is displayed? 

7 hours ago, pottedplant77 said:

How would I increase the time that each phrase is displayed? 

 

edit 500 & 2000