Jump to content

Rotating Text?

Recommended Posts

Posted

On my landing page, I have one word that I'd like to rotate in a loop. Right now it says "clear" but I'd like it to switch to "engaging" "understandable" etc. Is there a way to accomplish that? 

  • Replies 4
  • Views 5.8k
  • Created
  • Last Reply
Posted

Hi @vzell. This is a common visual feature (and was recently asked about on these forums), and it can be accomplished via custom JavaScript and CSS. There are a lot of code snippets and libraries out there that can help you accomplish it, though each will require consideration of your specific context and design (not to mention, whether there is animation associated with the word-change). You can try posting a link to your site (and the view-only password for sites in trial mode) and see if anyone here provides some specific example code. Otherwise, you may consider hiring a developer to accomplish it. I'd expect it to take a couple hours or less to implement well (depending on animation, and other desires).

If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left)

Posted

Thanks! My site is live, it's valeriezell.com. The word "clear" is the one that I'd like to rotate out with about 3 or 4 others.

Posted

Well, as I said there are many options. But here's a quickly-written example using typed.js that you can insert via footer code injection, and tweak the settings to your liking:

<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11"></script>
<script>
(function() {
  new Typed('.highlight1', {
    strings: ['', 'clear', 'engaging', 'understandable'],
    typeSpeed: 40,
    loop: true,
    loopCount: Infinity,
    backDelay: 2900,
    fadeOut: false,
    showCursor: false
  });
})();
</script>

You'll notice some additional adjustments you'll want to make, such as hyphenation/wrapping and line height.

Do let me know how it works for you.

-Brandon

If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left)

  • 7 months later...

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.