Ben Nadel
On User Experience (UX) Design, JavaScript, ColdFusion, Node.js, Life, and Love.
I am the chief technical officer at InVision App, Inc - a prototyping and collaboration platform for designers, built by designers. I also rock out in JavaScript and ColdFusion 24x7.
Meanwhile on Twitter
Loading latest tweet...
Ben Nadel at cf.Objective() 2014 (Bloomington, MN) with:

Creating Transparent Gradients With jQuery

By Ben Nadel on

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):


 
 
 

 
jQuery Transparent Gradient Example - Pre Gradient  
 
 
 

 
 
 

 
jQuery Transparent Gradient Example - With 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.

Tweet This Deep thoughts by @BenNadel - Creating Transparent Gradients With jQuery Thanks my man — you rock the party that rocks the body!

Looking For A New Job?

100% of job board revenue is donated to Kiva. Loans that change livesFind out more »

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)...

Reply to this Comment

@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.

Reply to this Comment

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.

Reply to this Comment

The fade looks fine to me, in FF & IE7, but flying chicks are always awesome no matter what... :-)

Reply to this Comment

Nice work Ben, I thought of this the other day, Googled it and now I have the answer!

Thanks a lot
Cenn

Reply to this Comment

@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.

Reply to this Comment

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.

Reply to this Comment

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?

Reply to this Comment

@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.

Reply to this Comment

Very cool blog with a bunch of help and information you have here.
I don't see the gradient, just a girl on bikini. =)

Reply to this Comment

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");
});

});

Reply to this Comment

Post A Comment

You — Get Out Of My Dreams, Get Into My Comments
Live in the Now
Oops!
Comment Etiquette: Please do not post spam. Please keep the comments on-topic. Please do not post unrelated questions or large chunks of code. And, above all, please be nice to each other - we're trying to have a good conversation here.