Creating Transparent Gradients With jQuery
Posted October 29, 2007 at 3:56 PM by Ben Nadel
Reading though Learning jQuery by PACKT Publishing, I came across a good amount of really cool stuff. Their thorough, in-depth examples were really inspiring and got the machinery firing full blast. One of the cool things they did with jQuery that I would have never thought of doing in a million years was to create a transparent gradient over a list of rotating news items. In a technique that I believe (but am not sure) is also used by Foundeo's CFImageEffects ColdFusion component, they created a new DIV element for each step of the transparent gradient, each of which had a different opacity.
jQuery makes this task easy. There is some cross browser bugginess, but overall, it works OK. Running this HTML and jQuery code:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html>
- <head>
- <title>jQuery Gradient Fade Demo</title>
-
- <!-- Linked Files. -->
- <script type="text/javascript" src="jquery-latest.pack.js"></script>
- <script type="text/javascript">
-
- $(
- function(){
-
- // Get all of the gradient images and loop
- // over them using jQuery implicit iteration.
- $( "img.gradient" ).each(
- function( intIndex ){
- var jImg = $( this );
- var jParent = null;
- var jDiv = null;
- var intStep = 0;
-
- // Get the parent
- jParent = jImg.parent();
-
- // Make sure the parent is position
- // relatively so that the graident steps
- // can be positioned absolutely within it.
- jParent
- .css( "position", "relative" )
- .width( jImg.width() )
- .height( jImg.height() )
- ;
-
- // Create the gradient elements. Here, we
- // are hard-coding the number of steps,
- // but this could be abstracted out.
- for (
- intStep = 0 ;
- intStep <= 20 ;
- intStep++
- ){
-
- // Create a fade level.
- jDiv = $( "<div></div>" );
-
- // Set the properties on the fade level.
- jDiv
- .css (
- {
- backgroundColor: "#FFFFFF",
- opacity: (intStep * 5 / 100),
- bottom: ((100 - (intStep * 5) ) + "px"),
- left: "0px",
- position: "absolute"
- }
- )
- .width( jImg.width() )
- .height( 5 )
- ;
-
- // Add the fade level to the
- // containing parent.
- jParent.append( jDiv );
-
- }
-
- }
- );
-
- }
- );
-
- </script>
- </head>
- <body>
-
- <h1>
- jQuery Gradient Fade Demo
- </h1>
-
- <p>
- Here is the image before we add the gradient:
- </p>
-
- <p>
- <img
- src="jumping_girl.jpg"
- width="545"
- height="386"
- alt="Girl jumping in bikini"
- />
- </p>
-
- <p>
- Here is the image after we add the gradient:
- </p>
-
- <p>
- <img
- src="jumping_girl.jpg"
- width="545"
- height="386"
- alt="Girl jumping in bikini"
- class="gradient"
- />
- </p>
-
- </body>
- </html>
... we get these two images (the one without the gradient followed by the one with the overlayed gradient):
| | | | ||
| |  | | ||
| | | |
| | | | ||
| |  | | ||
| | | |
Notice that the second one now fades to white at the bottom. The number of steps used in the fade was chosen arbitrarily. Using a 100 steps, each of which was 1 pixel high, seemed to work very poorly in IE. There might be a bit of a bug in the code, or it might be a bug in IE. Not sure. IE seems to almost anti-alias the DIV elements, keeping a soft edge. But regardless, I just thought that this was a really cool concept.
Reader Comments
Why not just use a PNG image? It's pretty easy to apply with basic CSS (albeit requiring some hackyness to make IE work from 5.5-6.x)...
@Guy,
Certainly, I transparent PNG would be the easier, probably more consistent solution. However, I just wanted to point out that I thought this was a cool concept that I had never thought of before.
Did you test this in FF? I copied your code and it seems to work fine in IE but it does not show correctly in FF. It might have to do with the z-index.
The fade looks fine to me, in FF & IE7, but flying chicks are always awesome no matter what... :-)
Nice work Ben, I thought of this the other day, Googled it and now I have the answer!
Thanks a lot
Cenn
@Cenn,
Glad to help out.
Nice girl in nice jump :)
Hi,
You should use jquery functions to avoid cross browsing issues. This one http://docs.jquery.com/Effects/fadeTo replacing the css opacity for example.
You can set the speed to 0 to skip the animation.
@Matias,
You make a good point. Leaving it in the jQuery would make it more compatible.
I am unable to get this to work with jquery 1.3.2. Has anyone else?
@Bob,
What kind of error is it giving you. I haven't tested this in a while, but I am not seeing anything in the code that should have been considered deprecated in the newer versions of jQuery.
Sorry to have wasted your time on this. I was working off of some old examples. I went back to the examples in the download and it is now working for me. Thanks.
@Bob,
No waste of time my friend. Glad you got it working.
Great effect! is it possible to put a transparant .png instead of the #FFFFF backgroundcolor in your js?
So it can be used on gradient backgrounds?
@Frank,
I know, i had the read the first post :s
@Frank,
I would actually be more inclined to use a PNG - just easier to accomplish. Plus, with IE6 pretty much dying in recent days, it's much less of any issue.
This is sweet and solve my problem another alternative for me
Thanks man for the code and Liked the snapshot too... Crazy lady.
Very cool blog with a bunch of help and information you have here.
I don't see the gradient, just a girl on bikini. =)
changing opacity of the div by mouse over on it:
$(document).ready(function(){
$("div#ID-of-this-div").hover(
function() {
$(this).stop().animate({"opacity": "1"}, "slow");
},
function() {
$(this).stop().animate({"opacity": "0.4"}, "slow");
});
});
Cool one, but kinda' useless... :)
