vzell Posted October 22, 2019 Share 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? Link to comment
brandon Posted October 22, 2019 Share Posted October 22, 2019 (edited) 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 October 22, 2019 by brandon If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' (top-left) Link to comment
vzell Posted October 22, 2019 Author Share 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. Link to comment
brandon Posted October 22, 2019 Share 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) Link to comment
annayuan Posted June 7, 2020 Share 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? Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment