Skrollr background transparency?

Question

I just installed the so called Skrollr plugin to my html. I want the background-color to start as transparent and end as rgb 80 80 80.

I can't make it work. This is what I've tried so far:

<div id="navigation" data-0="background-color:transparent;" data-380="background-color:rgb(80,80,80);">

Anyone who knows?

Thanks

Answer 1

The thing you want to animate on is not the color but the alpha channel. Try this:

<div id="navigation"
     data-0="  background-color:rgba(80,80,80,0);"
     data-380="background-color:rgba(80,80,80,1);">

Another approach would be to modify the opacity instead of the background-color. This would also work with images and not only with a solid fill.

<div id="navigation"
     data-0="opacity:0"
     data-380="opacity:1"
     style="background-color:rgb(80,80,80);">

Answer 2

Skrollr plugin basically converts RGB to HEX and applies inline style in HEX Color code (Alpha value gets ignored).

Better approach would be changing the class:

<div id="navigation" class="nav" data-0="@class:nav" data-380="@class:nav changed"></div>

In CSS:

.nav {
  background-color:rgba(80,80,80,0);
}
.nav.changed {
  background-color:rgba(80,80,80,1);
}