Homepage Text Effect

Text Slider

---

This text slider in Homepage 2 is using swiper plugin for the effect. This is the HTML code for it

<span class="text_slide">
    <span class="swiper-wrapper">
        <strong class="swiper-slide"><span>community</span></strong>
        <strong class="swiper-slide"><span>everyone</span></strong>
        <strong class="swiper-slide"><span>enthusiast</span></strong>
    </span>
</span>

To set the speed and more, you can set in script.js and find this code

/* text slider script on Home 2 (hero section)*/
const text_slide = new Swiper(".text_slide", {
    speed: 800,
    loop: true,
    simulateTouch: false,
    preventInteractionOnTransition: true,
    autoplay: {
        delay: 3000,
        disableOnInteraction: false
    },
    effect: 'fade',
    fadeEffect: {
        crossFade: true
    },
});

You can visit this plugin site for more setting and info.

Typing Words Effect

---

This is the HTML code for typing words effect

 <span class="typing-words typing-one" data-words='Professional|Amateur|Everyone'>
    <!-- typing words goes here -->
</span>

You can change the data-words with any words you like. But you must use | to seperate each word.

For the script.js setting you can find this code:

/* typing text effect script on home 4
The value/words is based on data-words inside the typing-words class*/
const typing = document.querySelector('.typing-one');
if (typing) {
    const typingWords = document.querySelector('.typing-words').getAttribute('data-words');
    const Wordlist = typingWords.split('|');
    //settings for typewriter
    const typewriter = new Typewriter(typing, {
        loop: true,
        delay: 75,
    });
    //insert the words value into loop and start the typewriter
    for (let index = 0; index < Wordlist.length; index++) {
        const words = Wordlist[index];
        typewriter.typeString(words)
            .pauseFor(2500)
            .deleteAll()
    }
    typewriter.start();
}

You can set the delay or pauseFor value with your own.

Visit this plugin site for more info.