Jump to content

Typewriter & delete effect? TypeIt or something similar

Recommended Posts

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

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 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
  • 2 months later...
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
  • 1 month later...
  • 3 weeks later...

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

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
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 by dnmddy
Link to comment
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 by dnmddy
Link to comment

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
  • 2 weeks later...
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
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?

Link to comment
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
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
  • 4 weeks later...
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

Create an account or sign in to comment

You need to be a member in order to leave a comment

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