Jump to content

code block for sentence with revolving text

Recommended Posts

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 comment
  • Replies 5
  • Created
  • Last Reply

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?

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

Link to comment

@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 

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.