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

Typewriter & delete effect? TypeIt or something similar


SheriM

Question

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 post
  • Answers 31
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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 cla

@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 befor

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 en

Recommended Posts

  • 0

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

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

Link to post
  • 0
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 post
  • 0
31 minutes ago, kristianne said:

Hi, is there a CSS version for this? On a Personal Plan.. 

Can't be done with just CSS

Link to post
  • 1

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

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

Link to post
  • 0
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 post
  • 0
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 post
  • 0

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 post
  • 0

@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 post
  • 0
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?

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

Link to post
  • 0
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 post
  • 0
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.

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

Link to post
  • 0

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 post
  • 0
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

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

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