colorfilljs

    1.0.4 • Public • Published

    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.

    Install

    npm i colorfilljs

    DownloadsWeekly Downloads

    8

    Version

    1.0.4

    License

    MIT

    Unpacked Size

    4.25 kB

    Total Files

    3

    Last publish

    Collaborators

    • christianbmartinez