SheriM Posted April 3, 2020 Share Posted April 3, 2020 Hello! I'd like to install a typewriter effect on my website like the one you'll find on this site: https://www.januarymade.co.nz/ (also a sqs site, so I know it can be done). I'm struggling to find something that'll work, everything I come across seems to require javascript, CSS & HTML (all three) but I don't know how to get that to work on sqs... I'm a relative novice to this so any help would be appreciated! Thank you 🙂 Link to comment
tuanphan Posted April 4, 2020 Share Posted April 4, 2020 (edited) Add to Code Block <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/jquery.typeit/4.4.0/typeit.min.js"></script> <script> $('#ssforum).typeIt({ strings: ["Small businesses.","Entrepreneurs.","Go-getters." ,"Visionaries." ,"Creatives."], speed: 150, breakLines: false, autoStart: false, loop: true, startDelay: 250, loopDelay: 750, startDelete: false, }); </script> <h1 id="ssforum" class="type2"> <i class="ti-placeholder" style="display:inline-block;width:0;line-height:0;overflow:hidden;">.</i> <span style="display:inline;position:relative;font:inherit;color:inherit;" class="ti-container">Small businesses</span> <span style="display: inline; position: relative; font: inherit; color: inherit; opacity: 0.993343;" class="ti-cursor">|</span> </h1> Edited April 4, 2020 by tuanphan add jquery & typeIT library 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
cterra13 Posted June 18, 2020 Share Posted June 18, 2020 On 4/4/2020 at 12:45 AM, tuanphan said: Add to Code Block <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/jquery.typeit/4.4.0/typeit.min.js"></script> <script> $('#ssforum).typeIt({ strings: ["Small businesses.","Entrepreneurs.","Go-getters." ,"Visionaries." ,"Creatives."], speed: 150, breakLines: false, autoStart: false, loop: true, startDelay: 250, loopDelay: 750, startDelete: false, }); </script> <h1 id="ssforum" class="type2"> <i class="ti-placeholder" style="display:inline-block;width:0;line-height:0;overflow:hidden;">.</i> <span style="display:inline;position:relative;font:inherit;color:inherit;" class="ti-container">Small businesses</span> <span style="display: inline; position: relative; font: inherit; color: inherit; opacity: 0.993343;" class="ti-cursor">|</span> </h1> Hi, has anyone had any luck with this? I want to create a type-and-delete effect too but have had no luck. The above code didn't work for me. 😕 I'm on Brine. Thanks! Link to comment
kristianne Posted July 20, 2020 Share Posted July 20, 2020 Hi, is there a CSS version for this? On a Personal Plan.. Link to comment
rwp Posted July 20, 2020 Share Posted July 20, 2020 31 minutes ago, kristianne said: Hi, is there a CSS version for this? On a Personal Plan.. Can't be done with just CSS zehrajaffrey12 1 Link to comment
AlexSantos Posted July 20, 2020 Share Posted July 20, 2020 I know I used typed with BetterCandy.pl If you want the code I can share it. Link to comment
tuanphan Posted August 5, 2020 Share Posted August 5, 2020 Just solved for 3 members. Add all to Code Block <div class="container"> <h1> typewriter01 | <!-- The words that we want to have typerwriter effect --> <span class="txt-type" data-wait="3000" data-words='["consultancy", "food", "creative tech", "ranj"]'></span> </h1> </div> <style> /* CSS RESET */ /* ALIGN CONTENT */ .container { display: flex; /* Remove horizontal 'justify-content' center if you want the base text not to move */ justify-content: center; align-items: center; } /* ADD CURSOR */ .txt-type > .txt { border-right: 0.08rem solid #fff; padding-right: 2px; /* Animating the cursor */ animation: blink 0.6s infinite; } /* ANIMATION */ @keyframes blink { 0% { border-right: 0.08rem solid rgba(255, 255, 255, 1); } 100% { border-right: 0.08rem solid rgba(255, 255, 255, 0.2); } } #page .section-background {background: white;} #page section * {color: black !important;} #page .content { width: 100%; } </style> <script> class TypeWriter { constructor(txtElement, words, wait = 3000) { this.txtElement = txtElement; this.words = words; this.txt = ""; this.wordIndex = 0; this.wait = parseInt(wait, 10); this.type(); this.isDeleting = false; } type() { // Current index of word const current = this.wordIndex % this.words.length; // Get full text of current word const fullTxt = this.words[current]; // Check if deleting if (this.isDeleting) { // Remove characters this.txt = fullTxt.substring(0, this.txt.length - 1); } else { // Add charaters this.txt = fullTxt.substring(0, this.txt.length + 1); } // Insert txt into element this.txtElement.innerHTML = `<span class="txt">${this.txt}</span>`; // Initial Type Speed let typeSpeed = 50; if (this.isDeleting) { // Increase speed by half when deleting typeSpeed /= 2; } // If word is complete if (!this.isDeleting && this.txt === fullTxt) { // Make pause at end typeSpeed = this.wait; // Set delete to true this.isDeleting = true; } else if (this.isDeleting && this.txt === "") { this.isDeleting = false; // Move to next word this.wordIndex++; // Pause before start typing typeSpeed = 500; } setTimeout(() => this.type(), typeSpeed); } } // Init On DOM Load document.addEventListener("DOMContentLoaded", init); // Init App function init() { const txtElement = document.querySelector(".txt-type"); const words = JSON.parse(txtElement.getAttribute("data-words")); const wait = txtElement.getAttribute("data-wait"); // Init TypeWriter new TypeWriter(txtElement, words, wait); } </script> Notes: Haven't tested with SS 7.0 sayreambrosio, capturecollect, BrandonH and 7 others 6 1 3 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
dnmddy Posted August 11, 2020 Share Posted August 11, 2020 (edited) On 8/5/2020 at 11:14 AM, tuanphan said: Just solved for 3 members. Add all to Code Block <div class="container"> <h1> typewriter01 | <!-- The words that we want to have typerwriter effect --> <span class="txt-type" data-wait="3000" data-words='["consultancy", "food", "creative tech", "ranj"]'></span> </h1> </div> <style> /* CSS RESET */ /* ALIGN CONTENT */ .container { display: flex; /* Remove horizontal 'justify-content' center if you want the base text not to move */ justify-content: center; align-items: center; } /* ADD CURSOR */ .txt-type > .txt { border-right: 0.08rem solid #fff; padding-right: 2px; /* Animating the cursor */ animation: blink 0.6s infinite; } /* ANIMATION */ @keyframes blink { 0% { border-right: 0.08rem solid rgba(255, 255, 255, 1); } 100% { border-right: 0.08rem solid rgba(255, 255, 255, 0.2); } } #page .section-background {background: white;} #page section * {color: black !important;} #page .content { width: 100%; } </style> <script> class TypeWriter { constructor(txtElement, words, wait = 3000) { this.txtElement = txtElement; this.words = words; this.txt = ""; this.wordIndex = 0; this.wait = parseInt(wait, 10); this.type(); this.isDeleting = false; } type() { // Current index of word const current = this.wordIndex % this.words.length; // Get full text of current word const fullTxt = this.words[current]; // Check if deleting if (this.isDeleting) { // Remove characters this.txt = fullTxt.substring(0, this.txt.length - 1); } else { // Add charaters this.txt = fullTxt.substring(0, this.txt.length + 1); } // Insert txt into element this.txtElement.innerHTML = `<span class="txt">${this.txt}</span>`; // Initial Type Speed let typeSpeed = 50; if (this.isDeleting) { // Increase speed by half when deleting typeSpeed /= 2; } // If word is complete if (!this.isDeleting && this.txt === fullTxt) { // Make pause at end typeSpeed = this.wait; // Set delete to true this.isDeleting = true; } else if (this.isDeleting && this.txt === "") { this.isDeleting = false; // Move to next word this.wordIndex++; // Pause before start typing typeSpeed = 500; } setTimeout(() => this.type(), typeSpeed); } } // Init On DOM Load document.addEventListener("DOMContentLoaded", init); // Init App function init() { const txtElement = document.querySelector(".txt-type"); const words = JSON.parse(txtElement.getAttribute("data-words")); const wait = txtElement.getAttribute("data-wait"); // Init TypeWriter new TypeWriter(txtElement, words, wait); } </script> Notes: Haven't tested with SS 7.0 This broke the full width background on my site and made it fixed, but the the text part works so well...! Edited August 11, 2020 by dnmddy madi-od 1 Link to comment
dnmddy Posted August 11, 2020 Share Posted August 11, 2020 (edited) 15 minutes ago, dnmddy said: This broke the full width background on my site and made it fixed, but the the text part works so well...! removing this resolved it #page .section-background {background: white;} #page section * {color: black !important;} #page .content { width: 100%; } Is there a way to change how long it pauses when it finished, before repeating? Edited August 11, 2020 by dnmddy melody495 1 Link to comment
tuanphan Posted August 12, 2020 Share Posted August 12, 2020 edit number 3000 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
dnmddy Posted August 12, 2020 Share Posted August 12, 2020 That seems to change the time after each line, not only the final one. Link to comment
RyanDejaegher Posted August 12, 2020 Share Posted August 12, 2020 @dnmddy Try adjusting this line. All the numbers you're seeing are in milliseconds (500ms = 0.5s) so try setting high to see if it works (3000-4000) should be a good test // Pause before start typing typeSpeed = 500; dnmddy 1 Philadelphia, PA 👉 Squarespace Tutorials Chat/Message on FB Messenger for quickest response: https://m.me/dejaegherryan Link to comment
dnmddy Posted August 12, 2020 Share Posted August 12, 2020 Thanks @RyanDejaegher for the suggestion. That's not the desired effect either. I'm good with the speed the phrases type out at and the pause between the phrases, what I want to do is increase the pause when all the phrases have been typed out and when the string repeats from the beginning again. Testing the implementation here: https://pumpkin-fish-ycls.squarespace.com/ pw: notyet So after the final phrase, "we church", completes, I want there to be a dramatic pause before starting over again with "we pray". I don't have a great understanding of javascript (obviously!) but I can't see where in the code that particular timing is called out. Link to comment
RyanDejaegher Posted August 12, 2020 Share Posted August 12, 2020 Hmm yeah based on what i'm seeing it doesn't appear to have any code that's specific to when it finishes going through all the words, that would require adding some more code to account for when it ends and cycles again dnmddy 1 Philadelphia, PA 👉 Squarespace Tutorials Chat/Message on FB Messenger for quickest response: https://m.me/dejaegherryan Link to comment
dnmddy Posted August 12, 2020 Share Posted August 12, 2020 @tuanphan is that a simple update to the code you would be able to provide? As always, so appreciate your generous help! Link to comment
PP2020 Posted August 25, 2020 Share Posted August 25, 2020 @tuanphan is there any way to change the colour of the text that is animated? I want to keep the static test black and change the colour of the animated text to #f3ca22. Thanks in advance for your help. Link to comment
tuanphan Posted August 25, 2020 Share Posted August 25, 2020 3 minutes ago, PP2020 said: @tuanphan is there any way to change the colour of the text that is animated? I want to keep the static test black and change the colour of the animated text to #f3ca22. Thanks in advance for your help. Can you share link to page where you inserted typwriter code? 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
rohantheboat Posted September 1, 2020 Share Posted September 1, 2020 On 8/12/2020 at 7:06 AM, dnmddy said: removing this resolved it #page .section-background {background: white;} #page section * {color: black !important;} #page .content { width: 100%; } Is there a way to change how long it pauses when it finished, before repeating? The code is amazing, thank you tuanphan. I'm also having problems with code breaking my full width background. I tried deleting the parts dnmddy suggested but that didn't work. Is there something else I can try? maybe I have placed the code in the wrong way? madi-od 1 Link to comment
tuanphan Posted September 1, 2020 Share Posted September 1, 2020 2 hours ago, rohantheboat said: The code is amazing, thank you tuanphan. I'm also having problems with code breaking my full width background. I tried deleting the parts dnmddy suggested but that didn't work. Is there something else I can try? maybe I have placed the code in the wrong way? Can you share link to page where you inserted the code? We can check easier. 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
JennieFage Posted September 2, 2020 Share Posted September 2, 2020 @tuanphan is there a way we can use this but just so it types one line and doesn't delete just stays on screen? Also need it to show properly on mobile view. Thanks, Link to comment
tuanphan Posted September 3, 2020 Share Posted September 3, 2020 11 hours ago, JennieFage said: @tuanphan is there a way we can use this but just so it types one line and doesn't delete just stays on screen? Also need it to show properly on mobile view. Thanks, Can you describe in detail? 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
JennieFage Posted September 3, 2020 Share Posted September 3, 2020 @tuanphan Yes of course so on the home page banner I just want the typewriter effect tot type the sentence When daytime feels like playtime! Then stay on screen. If we could have a coloured highlight as it types too that would be fab. Link to site below. https://bassoon-bamboo-bnmy.squarespace.com Password - Paw Link to comment
martelil Posted September 26, 2020 Share Posted September 26, 2020 Thanks for a great code @tuanphan, the animation is beautiful! However, I also have trouble with it breaking the full width of the background image, and deleting part of the code only prevents the code from interfering with the text color. Any clues is appreciated! Link to comment
IXStudio Posted September 26, 2020 Share Posted September 26, 2020 (edited) Hi @Wanderdoll @JennieFage You can try this Typewriter extension. Check this demo page. Install from here. Do this installation guide. Please use the like button if it helps you! Best, Leopold Edited October 11, 2020 by IXStudio martelil 1 Ninja Kit Extension: Upgrade your Squarespace website without coding.YouTube Preview - FREE DOWNLOAD Link to comment
tuanphan Posted September 27, 2020 Share Posted September 27, 2020 8 hours ago, martelil said: Thanks for a great code @tuanphan, the animation is beautiful! However, I also have trouble with it breaking the full width of the background image, and deleting part of the code only prevents the code from interfering with the text color. Any clues is appreciated! Can you share link to page where you inserted typewriter 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
Create an account or sign in to comment
You need to be a member in order to leave a comment