vzell Posted October 22, 2019 Posted October 22, 2019 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?
brandon Posted October 22, 2019 Posted October 22, 2019 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' (top-left)
vzell Posted October 22, 2019 Author Posted October 22, 2019 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.
brandon Posted October 22, 2019 Posted October 22, 2019 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' (top-left)
annayuan Posted June 7, 2020 Posted June 7, 2020 @vzell this is exactly what I would like to implement for the landing page header text. Your site looks awesome, how did you achieve that?
Recommended Posts
Archived
This topic is now archived and is closed to further replies.