Prototype scriptaculous background-color: RGBA color animations

Question

Is something like this http://pioupioum.fr/sandbox/jquery-color/ for Prototype and scriptaculous?

I want to periodical animate RGBA for my website background to get something sexy and fancy...

Answer 1

rgba is pretty recent and only supported by the newest browsers. Luckily these are pretty much the same browsers that also support CSS transitions so no Javascript library is needed. Just look at this working example: massiveblue.com

---

The source explains it:

body, #logo h1 a, ul#menu li.on {background-color: #39f !important;}
@-webkit-keyframes colours {
      0% {background-color: #39f;}
     15% {background-color: #8bc5d1;}
     30% {background-color: #f8cb4a;}
     45% {background-color: #95b850;}
     60% {background-color: #944893;}
     75% {background-color: #c71f00;}
     90% {background-color: #bdb280;}
    100% {background-color: #39f;}
}
body, #logo h1 a, ul#menu li.on {
    -webkit-animation-direction: normal;
    -webkit-animation-duration: 60s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-name: colours;
    -webkit-animation-timing-function: ease;
}

The keyframes names "colours" as the sequence of frames, that is then used in animation-name rule. The animation-iteration-count is infinite so it loops continuously. Remember to duplicate the rules with each of the prefixes -webkit-, -moz- and -o- for the various browsers, and one set with no prefix for future compatibility.