Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

code block for sentence with revolving text


Xoi

Question

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

Connecting people &amp; things <span id="word">lightly</span>

script.js

 

$(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);
});

-----

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

 

 

 

Link to post
  • Answers 5
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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&g

5 answers to this question

Recommended Posts

  • 1

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?

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

Link to post
  • 0
Posted (edited)

@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 

Edited by Xoi
Link to post

Create an account or sign in to comment

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


×
×
  • Create New...