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

Rotating Text?

Question

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? 

Share this post


Link to post

3 answers to this question

Recommended Posts

  • 0

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

Edited by brandon

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

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

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)

Share this post


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