Any Element Rotator CSS Library – fillintheblank

Category: CSS & CSS3 , Slider | June 29, 2021
Author:tflaspoehler
Views Total:337 views
Official Page:Go to website
Last Update:June 29, 2021
License:MIT

Preview:

Any Element Rotator CSS Library – fillintheblank

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>

You Might Be Interested In:


Leave a Reply