Home

Awesome

skrollr-colors

Parses data- tags and converts different colors formats to HSLA to allow transitions in skrollr.
It will parse every color in data- attributes, even in CSS gradients.

How to use:

Include the plugin before skrollr.js and enjoy.

<script src="js/skroll-colors.min.js"></script>
<!-- skrollr.js code -->
</body>

Now you can use codes like:

<div 
    data-0="background-color: #000;"
    data-400="background-color: hsl(100,80%,90%);"
    data-top="background-color: rgba(255,255,255,1);"
>
    WHOOT
</div>

Example:

Demo on Codepen

Supported color formats

skrollr-colors detects even if there are spaces between values and commas and is case-insensitive.

Supported formats:

HSLA is not parsed at all, seen skrollr-colors aims to convert everything to HSLA.

ToDo