Skip to content
skrollr-colors is a plugin for skrollr which allow you to use mixed colors formats in skrollr's keyframes.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist 1.0.2 #2 Jul 8, 2014
examples Update 1.html Sep 4, 2013
src Adding suport for hex short codes (like #F00) Jul 8, 2014 Updated demo to use Codepen Jul 8, 2014
bower.json Added bower.json Jul 8, 2014


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 -->

Now you can use codes like:

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


Demo on Codepen

Supported color formats

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

Supported formats:

  • HEX 3 digits: #F0F
  • HEX 6 digits: #FF00FF
  • RGB: rgb(0,0,0)
  • RGBA: rgba(0,0,0,0.5)
  • HSL: hsl(0,0%,0%)

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


  • Nothing?
You can’t perform that action at this time.