A pure Javascript "Split Flap" board-like animation for your text (with no dependencies).
See it in action at https://masteryder.github.io/splitflap/
Provides a "splitflap" function that can be used on a dom element.
Works best if you use mono-spaced fonts like the one used in the project.
| parameter | type | description |
|---|---|---|
domElement | DOM Element | the DOM element that will be targeted for replacement |
texts | String[] | Array of texts we will cycle through |
options | Object | An object containing animation options |
| option | type | description |
|---|---|---|
timeOut | number | the number of milliseconds the texts stays put after being animated |
tickTimeOut | number | the number of milliseconds for a character to transition into a different one |
nbJumpIterations | number | the number of characters that are skipped when going from a character to a different one |
timeOut : 2000
tickTimeOut : 60
nbJumpIterations : 4
import{splitFlap}from"./splitflap.js";constexample_texts=["Geneva 23","Oporto 16","Zurich 21","Las Vegas 03",];letdomElement=document.querySelector('#splitflap');splitFlap(domElement,example_texts,{'timeOut' : 3000,'tickTimeOut' : 60,'nbJumpIterations' : 10,});If you want to quickly test the example that is provided. You can host a local http server with:
python -m SimpleHTTPServer 8080 (python 2)
or
python3 -m http.server (python 3)