Creating Transparent Gradients With jQuery

Posted October 29, 2007 at 3:56 PM by Ben Nadel

Tags: Javascript / DHTML

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.



Reader Comments

Oct 29, 2007 at 4:46 PM // reply »
2 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)...


Oct 29, 2007 at 4:55 PM // reply »
11,307 Comments

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


Oct 30, 2007 at 2:04 PM // reply »
4 Comments

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.


Nov 2, 2007 at 7:57 AM // reply »
1 Comments

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


Jul 11, 2009 at 8:30 AM // reply »
1 Comments

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

Thanks a lot
Cenn


Jul 13, 2009 at 6:34 PM // reply »
11,307 Comments

@Cenn,

Glad to help out.


Aug 28, 2009 at 11:17 AM // reply »
1 Comments

Nice girl in nice jump :)


Nov 9, 2009 at 1:04 AM // reply »
1 Comments

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.


Nov 9, 2009 at 8:09 AM // reply »
11,307 Comments

@Matias,

You make a good point. Leaving it in the jQuery would make it more compatible.


Nov 16, 2009 at 1:15 AM // reply »
2 Comments

I am unable to get this to work with jquery 1.3.2. Has anyone else?


Nov 16, 2009 at 7:57 AM // reply »
11,307 Comments

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


Nov 16, 2009 at 5:12 PM // reply »
2 Comments

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.


Nov 16, 2009 at 5:14 PM // reply »
11,307 Comments

@Bob,

No waste of time my friend. Glad you got it working.


Feb 19, 2010 at 2:38 PM // reply »
2 Comments

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?


Feb 19, 2010 at 2:39 PM // reply »
2 Comments

@Frank,

I know, i had the read the first post :s


Feb 22, 2010 at 8:44 PM // reply »
11,307 Comments

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


Aug 4, 2010 at 11:38 PM // reply »
1 Comments

This is sweet and solve my problem another alternative for me


Nov 6, 2010 at 1:11 AM // reply »
1 Comments

Thanks man for the code and Liked the snapshot too... Crazy lady.


Jan 8, 2011 at 12:05 PM // reply »
1 Comments

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


Apr 22, 2011 at 4:27 PM // reply »
1 Comments

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

});


Jun 23, 2011 at 6:22 AM // reply »
1 Comments

Cool one, but kinda' useless... :)


Apr 27, 2012 at 11:56 PM // reply »
1 Comments

Good Plugin . I am going to use his one or my blogs :)



Post A Comment

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.

Please review the following issues:

Author Name:


Author Email:

Author Website:

Comment:

Supported HTML tags for formatting: <strong>bold</strong>   <em>italic</em>   <code>code</code>







  • Help Wanted - Find Your Next ColdFusion Job
Ben Nadel's Company - Epicenter Consulting Recent Blog Comments
Jun 17, 2013 at 9:45 PM
What If All User Interface (UI) Data Came In Reports?
@Jonah, As I was reading what you wrote, it occurred to me that maybe I do something similar to that in some of my client-side code. In an application I'm working on, there are a bunch of unrelated ... read »
Jun 17, 2013 at 9:36 PM
Object Thinking By David West
@Jonah, Please, don't feel bad at all. I appreciate all that you have contributed to the conversation. And, the more points of view I get, the more confident I am that I will some day, some how und ... read »
Jun 17, 2013 at 9:32 PM
Object Thinking By David West
@Paul, I definitely have a mental hurdle when it comes to discovering better design over time. My brain has this insane urge to just understand how you do something right the first time :) But, eve ... read »
Jun 17, 2013 at 9:29 PM
SOTR 2013 - The Best Conference I Never Went To
I just had to watch this again - amazing :) ... read »
Jun 17, 2013 at 9:28 PM
Working With Inherited Collections In AngularJS
@Ali, You are right - it is confusing. I should have just named it "saveForm()" or "submitForm()" or something to that effect. Then, the saveForm() method could have simply vali ... read »
Jun 17, 2013 at 9:27 PM
Working With Inherited Collections In AngularJS
@Samuel, Good question - that was also bothering me when I wrote the code. Yes, I could have moved it up into AppController. The reason that I didn't for this demo was that I didn't want the AppCon ... read »
Jun 17, 2013 at 9:23 PM
Experimenting With The Amazon Simple Storage Service (S3) API Using ColdFusion
@Josh, My pleasure. It was fun to learn more about this stuff. @Chebby, Will do - we're gonna be moving some stuff over to S3, so I am sure I'll be learning all sorts of interesting things / use ... read »
Jun 17, 2013 at 4:21 PM
Experimenting With The Amazon Simple Storage Service (S3) API Using ColdFusion
Thanks Ben. Would love to see more CF/S3 examples! ... read »
InVision App - Prototyping Made Beautiful With Prototyping Tools