What is this?
Colorfilljs is a lightweight text fill animation tool using the power of javascript. It automatically generates your css on whatever pages you wish to include it. Use colorfill on links, titles, or randomly throughout your web app to make your text stand out.
You could definitely use css directly in a file, however having the program do the animations based on different configurations on every page would require lots of different css files. Colorfill allows you to have full control over these styles on any given page.
Installation
npm i colorfilljs --save
Then add your html & js...
<h1 class="colorfill-text"><span class="colorfill" data-content="colorfill" aria-hidden="true"></span>colorfill</h1>
import { colorfilljs } from 'colorfilljs';
colorfilljs({
textColor: '#3778cd',
fillColor: '#5e01e9',
cursor: 'pointer',
positionOne: 'translateY(100%)',
positionTwo: 'translateY(-100%)',
positionThree: 'translateY(0)',
duration: '1s',
timing: 'ease-in-out'
})
or set as default
colorfilljs('')
Use it on any page and render entirely different fill animations
<h1 class="colorfill-text"><span class="colorfill" data-content="colorfill" aria-hidden="true"></span>colorfill</h1>
<script src="/linktoyourcolorfillfile"></script>
<script>
colorfilljs({
textColor: '#27285D',
fillColor: '#D13D78',
cursor: 'pointer',
positionOne: 'translateY(100%)',
positionTwo: 'translateY(-100%)',
positionThree: 'translateY(0)',
duration: '1s',
timing: 'ease-in-out'
})
</script>
Then, for example...
parcel index.html
Configuration
You can configure your own colorfill at the colorfill codepen
Colorfilljs takes a maximum of 8 arguments (all mentioned in the above example). If any are left blank, it will use defaults.