Guest Posted August 6, 2020 Share Posted August 6, 2020 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 & 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
tuanphan Posted August 7, 2020 Share Posted August 7, 2020 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
Guest Posted August 7, 2020 Share Posted August 7, 2020 @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
Guest Posted August 8, 2020 Share Posted August 8, 2020 if @tuanphan or anyone can fill in - i would be so appreciative! thank you : ) Link to comment
pottedplant77 Posted August 10, 2020 Share Posted August 10, 2020 How would I increase the time that each phrase is displayed? Link to comment
tuanphan Posted August 10, 2020 Share Posted August 10, 2020 7 hours ago, pottedplant77 said: How would I increase the time that each phrase is displayed? edit 500 & 2000 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
Recommended Posts
Archived
This topic is now archived and is closed to further replies.