Author: | tflaspoehler |
---|---|
Views Total: | 288 views |
Official Page: | Go to website |
Last Update: | June 29, 2021 |
License: | MIT |
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>