[DEMO] textBobber v3 (minimal)

by HT ✨

HTML

<script src="https://cdn.jsdelivr.net/gh/ht-devx/textBobber/v3/init.min.js"></script>
<script>
textBobber({
    wrapper: ".speech-container",

    initialDelay: "0.4s",

    textContainer: ".all-texts",
    textSelectors: ".one-text",
    textSelectorsFadeSpeed: "0.3s",

    characterDelay: "0.06s",
    characterAnimationSpeed: "0.15s",

    nextButton: ".next-arrow",
    nextButtonAnimationSpeed: "0.3s",

    height: "compact",
    loop: false
})
</script>

<div class="speech-container">
    <div class="all-texts">
        <div class="one-text">
            One for the money.
        </div>
        
        <div class="one-text">
            Two for the show.
        </div>
        
        <div class="one-text">
            Three to make ready.
        </div>        
        
        <div class="one-text">
            Four to go.
        </div>
    </div>
    
    <div class="next-arrow">(next.)</div>
</div>

CSS

.speech-container {
	display:none;
}

.speech-container.ready {
	display:block;
}

/*------- DISABLING ANIMATIONS FOR ACCESSIBILITY OPTIONS -------*/
@media(prefers-reduced-motion: reduce){
    [text-bobber], [text-bobber-chara]{
        transition:none!important;
    }
}

JavaScript

// NOTE:
// this is the MINIMAL amount of code you need for textBobber to work! you are free to include as much additional styling as you wish.