Creating Transparent Gradients With jQuery

Posted October 29, 2007 at 3:56 PM

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:

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


 
 
 

 
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.

Download Code Snippet ZIP File

Post Comment  |  Ask Ben  |  Permalink  |  Other Searches  |  Print Page



Learning ColdFusion 9 - ColdFusion 9 tutorials, samples, examples, demos

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 »
6,371 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.


Shloime Henig
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... :-)


Cenn John
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 »
6,371 Comments

@Cenn,

Glad to help out.


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

Nice girl in nice jump :)


Post Comment  |  Ask Ben

Recent Blog Comments
Nov 7, 2009 at 5:53 PM
Ask Ben: Javascript String Replace Method
You can find here an advanced function that prepared with javascript replace function. This can make the first letters of words, sentences, lines and whatever you define automatically: http://www.m ... read »
Andrew Neely
Nov 7, 2009 at 4:56 PM
A Moment That Touched Me - The Fountainhead
Ben, Glad you enjoyed the podcast. Yeah, the Tank Riot guys can get really chatty during the episodes, but that's part of the charm of it for me. They've covered everything from Nichola Tesla to Cha ... read »
Nov 7, 2009 at 4:43 PM
Building A Fixed-Position Bottom Menu Bar (ala FaceBook)
Is it possible to make some more MenĂ¼`s ? ... read »
Jill
Nov 7, 2009 at 11:40 AM
How To Unformat Your Code (Like A Pro)
Derek, I think you might be right - sweet! Thanks for the link :) ... read »
Nov 7, 2009 at 11:25 AM
How To Unformat Your Code (Like A Pro)
I think it would be way easier to just use this http://www.logichammer.com/html-formatter/ He just released v3 and it rocks. ... read »
Jill
Nov 7, 2009 at 7:58 AM
How To Unformat Your Code (Like A Pro)
LMAO - this was pretty funny! I have to admit - I also love to reformat code so I can read it. My boss used to tell me to leave my OCD at home. Now I don't feel so bad after reading everyone else' ... read »
Nov 6, 2009 at 10:10 PM
How To Unformat Your Code (Like A Pro)
The timing of this post is just uncanny. I spent the last 15-20 minutes manually un-formatting my "Ben Nadel" style code within a CFC of mine. I was really digging the readability a few weeks ago, bu ... read »
Roe
Nov 6, 2009 at 5:11 PM
Passing Arrays By Reference In ColdFusion - SWEEET!
ArraySort also reorders the results of these java obj's ... read »