Z-CAROUTEXT is

Z-caroutext is a javascript plugin that lets you create a text carousel very easily.

It was just an exercise for me to try implementing something complete with vanillaJs in object oriented programmation, and decided to share it because it can be interresting for some of you :-).

How To

This plugin is very simple. You just have to add a span with some parameters. For exemple :

<h1>
   Z-CAROUTEXT is 
   <span class="z-caroutext"
      data-texts='["awesome!", "really good.", "extremly beautiful.", "so badass!"]'
      data-timing="2000"
      data-pipe-color="#2a2">
   </span>
</h1>

• class: this is the classname that is used for each caroutext you want on the web-page. Must be "z-caroutext".
• data-texts: this is the array of texts you want to appear in the loop. It must be a JSON formatted array.
• data-timing: (Optional, Default : 2000) this is the pause duration when the text is fully visible.
• data-pipe-color: (Optional, Default : #000) this is the pipe color.

Like usual, here is the emmet snippet :

*** WARNING: the data-text has to be between single quotes, for example : ' [ "1" , "2" ] ' .
Otherwise it won't be valid json array!!!

h1>{SOME TEXT}+span.z-caroutext[data-texts=***][data-timing=2000][data-pipe-color=#000]

Examples

<span class="z-caroutext"
   data-texts='["No pipe"]'
   data-timing="1000"
   data-pipe-color="transparent">
</span>

<span class="z-caroutext"
   data-texts='["Minimal code"]'>
</span>

<span class="z-caroutext"
   data-texts='["Long timing", "named pipe color"]'
   data-timing="5000"
   data-pipe-color=lightblue">
</span>

<span class="z-caroutext"
   data-texts='["Short timing", "rgb pipe color"]'
   data-timing="10"
   data-pipe-color=rgb(200,60,60)">
</span>

Suggestions, issues, etc... are welcome, on the github issue section.