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

 

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>

 

@tuanphanJust add these two to code blocks? Nothing to put into Code Injection or Custom CSS?

Link to post
  • 0
4 hours ago, Wanderdoll said:

Just add these two to code blocks? Nothing to put into Code Injection or Custom CSS?

Code blocks are just another place where CSS and Javascript can be stored. It just depends on the task at hand and how you want to organize your code.

Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Link to post
  • 0
8 hours ago, virtuallyadventurous said:

I was able to use the code but my page is not full width, I took out the piece of code the previous person said but it did not work. Any suggestions?  

Can you share link to page where you inserted the code? We can check with fullwidth problem.

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

I was having a similar issue with full width page being changed to not be full width.

I changed the .container name and it fixed the issue.

Thanks @tuanphan for the great solution to the original question.

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