Prototype scriptaculous background-color: RGBA color animations
Is something like this http://pioupioum.fr/sandbox/jquery-color/ for Prototype and scriptaculous?
I want to periodical animate 开发者_如何学CRGBA for my website background to get something sexy and fancy...
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.
精彩评论