Repository files navigation

Forked from a pen originally created on CodePen.io. Original URL:https://codepen.io/joupain/pen/gELbGZ.

Original MIT licenseORIGINAL_CODEPEN_LICENSE

• This repository is an evolution of an originaljoupaincodepen

Code is divided into two classes and one CSS file:

• xsplit-flap.js ->splitFlapElm:represents a single flap element
• xsplit-flap.js ->splitFlap:represents a set of flaps that works together (a display).You should instantiate this class to create a display.
• xsplit-flap.css:split-flap display styles

• Loop between two values (like original CodePen)

• Create instances.
• Specify options when creating the instance:
  • parent: HTMLElement (optional) - parent element
  • beginText: string (optional) - start text
  • endText: string (optional) - final text
  • loop: boolean (optional) - if loop or not
  • size: number (optional) - the number of elements of the display
  • changeTime: number: set the time in miliseconds between automatic text change (by default 3000ms)
• noloop: just show a text but don't change.
• setText: change from current text to new text.
• size (in constructor): sets the number of elements in the display. By default, the max size betweenbeginStr andendStr.
• roll: roll the text to left or right.
• setFlapsWidths: by the moment, you can set the flap elements width globally for all instances.
• changeTime (in constructor): set the time in miliseconds between automatic text change (by default 3000ms)
• setFlapsTextColor: by the moment, you can set the flap text color globally for all instances.