Any Element Rotator CSS Library – fillintheblank

Preview:

Description:

fillintheblank is a rotator/slider CSS library for rotating through a set of elements with 8 configurable slide effects.

How to use it:

1. Load the core stylesheet filler.css in the document.

<link rel="stylesheet" href="filler.css" />

2. Wrap a list of elements to the rotator container.

• blank-line-list: Required
• num-words-4: The number of items to rotate through

<div class="blank-line-list num-words-4">
  <div>jQuery</div>
  <div>JavaScript</div>
  <div>CSS</div>
  <div>HTML</div>
</div>

3. Config the animation speed with the list-speed-n (n= 1 to 9) class.

<div class="blank-line-list num-words-4 list-speed-3">
  <div>jQuery</div>
  <div>JavaScript</div>
  <div>CSS</div>
  <div>HTML</div>
</div>

4. Specify the animation type:

• slide-top
• slide-bottom
• slide-left
• slide-right
• slide-top-bottom
• slide-bottom-top
• slide-left-right
• slide-right-left

<div class="blank-line-list num-words-4 slide-left-right">
  <div>jQuery</div>
  <div>JavaScript</div>
  <div>CSS</div>
  <div>HTML</div>
</div>

5. Hide the blank line when needed.

<div class="blank-line-list num-words-4 underline-none">
  <div>jQuery</div>
  <div>JavaScript</div>
  <div>CSS</div>
  <div>HTML</div>
</div>