Creating Transparent Gradients With jQuery
Posted October 29, 2007 at 3:56 PM
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:
Launch code in new window » Download code as text file »
- <!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.
Download Code Snippet ZIP File
Post Comment | Ask Ben | Other Searches | Print Page
Newer Post
Exercise List: Procedural ColdFusion Code Complete (Phase I)
Older Post
Javascript Number.toFixed() Method
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.
