Text with Moving Backgrounds with jQuery

92

Personally, I am a huge fan of negative space in design. This got me thinking while I was trying to accomplish something different. Normally a textual caption would be positioned above a background, but I wanted to do it the other way around: place the background in the letters.
I also wanted to add some nice dynamic effects to enhance the effect. This was amazingly easy to accomplish in jQuery with the use of a little creativity.

This article will explain what you need to do create an effect like this yourself.

Text with Moving Backgrounds with jQuery

Example
How does this look?

What are we going to do?

We are going to create a container which has a moving background, but only a set of letters will be visible of the background. It will be as if there are holes in your container.

To do this we need just a few things:

  • A nice background pattern or image
  • Letters punched out of an image
  • Just a little jQuery code

Normally you would create a PNG file containing anti-aliased letters and place it inside some container on top of a background. What we are going to do is place a full image over a background, covering parts that shouldn’t be seen. Just like a mask!

Then we’re going to make the background of the container move around to create a nice looking effect.

Step 1: Creating the “mask”

To create the overlaying mask I am going to use Photoshop. You can do this with any other image manipulation application, but I am going to explain what I did using screenshots of Photoshop.

  1. First create a new image and fill the background with the foreground of the mask.

    This is the part that will be visible for the users. I used a black solid fill for this, so it stays clean.

  2. Create a new text layer on the fill you just made.

    This gives us the right impression, and we just have to imagine that the white letters will be punched out later.
  3. Hold CMD / CTRL and click on the text layer icon

    Doing this the text will get a selection around it which should look like this:
  4. Click: Select > Inverse

    Now the area that will be visible on the mask image is selected. It will look like this:
  5. Select the fill layer and click on “Add mask”

    This will create a mask for the fill and the letters have been punched out.
  6. Hide the text layer

    You have now punched out the letters of the fill!
  7. Save as .png!
    PNG handles transparency very well and looks right in almost all current browsers (nope, not IE6). It also support opacity per pixel, so it’s not like the the GIF transparency.

Step 2: A little documenting and styling

Now that you’ve got your own mask image, it’s time to create the HTML page for it to end up in.

Just for basics, use something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<title>Some title</title>
	<link rel="stylesheet" type="text/css" href="style.css">

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>

<body>
	<div class='scrollBg'>
		<img src='overlay.png' alt='' />
	</div>
</body>

</html>

We created a simple HTML page containing just two elements; the container “scrollBg” and the image that serves as the mask.

Make sure to fix the src of the image and the href to your stylesheet.

In the stylesheet we just need a little bit of styling:

body {
	background-color: #000000;
}

.scrollBg {
	background-image: url(background.jpg);
	background-color: #000000;
	width: 487px;
	height: 83px;
}

.scrollBg img {
	display: block;
}

You’ll have to fix the width and height of the scrollBg container. Adjust it to the width and height of the mask you created. This will prevent the background image from showing outside of the mask.

Also change the URL of the background image.

Step 3: Go jQuery crazy!

In the Javascript part of this tutorial we are going to make the background image shift in position at random.

To make jQuery able to move the background image, we need a plugin, since it’s not in the default behavior.

Go download this plugin: http://plugins.jquery.com/project/backgroundPosition-Effect

Include this script in on your page using:

<script type="text/javascript" src="url_to_moving_background.js"></script>

Now we can use backgroundPosition as a parameter in the jQuery animate effect! Pretty neat!

The following jQuery code will move the background around at random (put it in the <head> part of the HTML page):

<script type="text/javascript">
$(document).ready(function() {

	moveBgAround();

});

function moveBgAround() {
	//give a random value from 0 to 400 for the X axis and the Y axis
	var x = Math.floor(Math.random()*401);
	var y = Math.floor(Math.random()*401);

	//random generated time it takes to move
	var time = Math.floor(Math.random()*1001) + 2000;

	//make the background image move!
	$('.scrollBg').animate({
		backgroundPosition: '(' + (x * -1) + 'px ' + (y * -1) + 'px)'
	}, time, "swing", function() {
		moveBgAround();
	});
}
</script>

It’s that simple! You are now ready to experiment with the code I just created.

The X and Y values are the amount of pixels the background image will shift. He will not move that amount in pixel, but he will move to the generated coordinates.

If you would like to make it move more you can increase the number stated here:

var x = Math.floor(Math.random()*401);

If you want to create a background image that is not a pattern but rather just a large texture, you have to an image with the following width and height: Take the number that you entered in the script (amount after random()) and add the width of the mask to it: that is your width. Same goes with the height.
This will allow the background to move around without being repeated.

Done!

If you have any questions or was inspirited to create different crazy effects: let me know in the comments below.

Happy developing!

Articles like this one

If you liked this article you can add this post to:


 

64 Comments

  1. Marco said: January 8, 2010 at 7:27 pm | Permalink

    Pretty cool! Now to make a version where you can select the text etc., and you would be all ready to implement it :) . But I’m not really sure how userfriendly it would be :P .

    Anyway, nice POC and keep up the great work!


  2. devolved said: January 8, 2010 at 7:38 pm | Permalink

    Cool idea,

    I can really see this looking awesome on a 60s psychedelic style site for headings and banners.


  3. Andy Feliciotti said: January 8, 2010 at 8:08 pm | Permalink

    Nice tut but needs a rotate option

    My quick test w/ your tutorial – http://drawne.com/lava/bgtext/

    http://designbump.com/Javascript/Text_with_Moving_Backgrounds_with_jQuery


  4. moabi said: January 8, 2010 at 8:14 pm | Permalink

    very nice, as usual…


  5. jaQuery.com said: January 8, 2010 at 11:16 pm | Permalink

    This is amazing. Could be very usefull to alot of designers


  6. Chuck McQuilkin said: January 9, 2010 at 8:06 am | Permalink

    Very cool. Thanks for sharing this!


  7. Gaya said: January 9, 2010 at 3:15 pm | Permalink

    @Marco: Thanks buddy! It’s more an effect for headers and small animated elements, but selecting the text would be cool!

    @Devolved: Exactly ;) I should try that out haha.

    @Andy: I don’t know if rotating would be posible, could be with CSS3, but that’s not a standard yet :(
    Cool example buddy! I really like it.

    @Moabi, JayQuery and Chuck: My pleasure :)


  8. Travis Berry said: January 9, 2010 at 6:52 pm | Permalink

    Wow. Really cool tutorial. I don’t know what I’m going to use it for yet, but it looks awesome.


  9. Sieb said: January 10, 2010 at 4:55 pm | Permalink

    That effect is ridiculously good looking! Should use that on something some time soon. Nice and light and the result is pixel-perfect!


  10. Drew Douglass said: January 10, 2010 at 10:37 pm | Permalink

    Really neat stuff Gaya. Not sure when I would use this, but neat nonetheless. Added to the Dev-Tips communtiy feed :-)

    -Drew


  11. Gaya said: January 11, 2010 at 9:16 am | Permalink

    @Travis: Thanks :)

    @Sieb: Thanks buddy! I am sure we’ll get this going in some sort of cool way

    @Drew: Thanks for adding this to your feed! I am glad you liked it


  12. Larz said: January 11, 2010 at 5:39 pm | Permalink

    amazing effect, very cool idea!


  13. Cory Mathews said: January 11, 2010 at 6:58 pm | Permalink

    I was a bit bummed to see the text was an image. Next step is to figure out how to accomplish this with normal text. None the less a good end result.


  14. Andrew Champ said: January 12, 2010 at 2:45 am | Permalink

    *applause* You did it again. Very useful, very cool. Thanks for sharing bro.


  15. Daryn St. Pierre said: January 14, 2010 at 11:26 pm | Permalink

    Man, this is awesome! I can already see a lot of uses for this, including interactivity. Like if it moved depending on the X and Y position of your mouse pointer. Nice job!


  16. Salmen said: January 16, 2010 at 2:23 am | Permalink

    Awesome effect, great job


  17. Bugsy said: January 21, 2010 at 4:52 pm | Permalink

    This is brilliant, I love it.


  18. Mia said: January 22, 2010 at 2:19 am | Permalink

    You are def a JQuery-Zen-Master, all of your scripts are awesome ! I so enjoyed this one though- I couldnt stop staring at it :D this is great for a hypnotic effect ! :D This site will def be my new playground :)


  19. Sam said: January 27, 2010 at 1:26 pm | Permalink

    Oh~! It’s a good job! thanks.


  20. Nicolas said: January 28, 2010 at 4:02 pm | Permalink

    Man, this is amazing.. i love it !


  21. Dain said: February 5, 2010 at 10:44 pm | Permalink

    Neat! This article prompted me to try it with a css3 SVG image mask. Here’s my (Safari Only) demo:

    http://dainkennison.com/txtmask/

    Thanks!


  22. Mehedi said: February 10, 2010 at 6:43 am | Permalink

    Really a great tutorial :)

    Thanks
    Mehedi Hasan
    Web Designer & Developer


  23. Kai said: February 10, 2010 at 8:54 pm | Permalink

    Hi, nice tutorial, I will definitaley use this, but would it be possible, that the background only appears if you mouseover the object? Would be amazing for navigations…


  24. Brian Schmitz said: February 13, 2010 at 6:55 pm | Permalink

    Maybe delete/ignore previous post, please…

    Nice. I also like Jay Hollywood’s jQ… http://google.com/?q=Hollywood jQuery


  25. nic said: February 14, 2010 at 12:15 pm | Permalink

    hi mr kessler
    my name is nicolas koller (switzerland) and i’m a typographic artist. i like the style of your website especially your arts programming. I’m just wondering what kind of CMS do you use?


  26. Gaya said: February 14, 2010 at 12:19 pm | Permalink

    Thanks for all the comments!

    @nic: I use WordPress :)


  27. Ben said: February 16, 2010 at 5:51 pm | Permalink

    Sorry, I didn’t like this. I came here super-impressed to hear of “text” with a moving background. I was expecting some CSS3 stuff I’d never heard of… instead I saw an image with a moving background, not text.

    It’s a cool effect, but nothing mind blowing.


  28. @pmulc07 said: February 16, 2010 at 6:14 pm | Permalink

    Nice effect, but like Ben said image masks are nothing mind blowing.

    It would be AWESOME to see this working with sIFR (http://www.mikeindustries.com/blog/sifr) so you could change the text dynamically. That would also solve the text-highlighting issue. Some food for thought ;)


  29. Robine said: March 9, 2010 at 4:59 pm | Permalink

    Very cool! I am starting to become a jQuery addict. Your layout looks pretty sweet as well..


  30. Mike said: March 17, 2010 at 4:04 pm | Permalink

    Pretty interesting effect to say the least. jQuery is so fun, isn’t it.


  31. BEBEN said: March 18, 2010 at 12:01 am | Permalink

    awesome…like this web name, awesome too
    in my country GAYA is STYLE in english
    full gaya :D


  32. Dexter said: March 18, 2010 at 10:22 am | Permalink

    awwesom man…its super cool…………..i m in lov with it….


  33. MOPVHS said: March 28, 2010 at 4:10 am | Permalink

    Nice…


  34. vector graphics said: April 12, 2010 at 11:54 am | Permalink

    i dont see any CMD key on my pc. where is it located? i dont use MAC.. :)


  35. Jack Rugile said: April 27, 2010 at 7:57 am | Permalink

    Mmm, this is pretty tasty!

    I think a cool effect could be achieved with a texture that is continuously rushing by either completely horizontal or vertical. Like if there was a floor mask that had square windows cut out of the bottom and water was constantly rushing by.

    I definitely love your application of it though. It definitely opened my mind a little bit as to what jQuery can do. Thanks :)


  36. free font said: May 4, 2010 at 5:01 pm | Permalink

    whoaaaa… this is awesome!
    thank you very much for sharing the scripts ^^!
    much appreciated


  37. Airos said: May 10, 2010 at 8:13 am | Permalink

    Nice presents,good works,Thx


  38. denker said: May 20, 2010 at 9:31 pm | Permalink

    really nice!!!


  39. pkr said: June 2, 2010 at 9:37 am | Permalink

    Great stuff, thx for sharing.


  40. Website Design said: June 12, 2010 at 6:55 am | Permalink

    How Smart work so great post..
    thanks


  41. life simple said: July 5, 2010 at 8:13 am | Permalink

    great!
    yumo99.com


  42. Pepe said: July 29, 2010 at 8:53 pm | Permalink

    Hi Gaya,

    I have read your last comment on setting a different BG, i ve been trying to add a masked image of 543 width and 400 height but it only moves once and then it stops.

    Could you tell me the measures the BG needs to have ?

    Thx


  43. buzzknow said: August 18, 2010 at 10:34 am | Permalink

    hi, its really nice jquery effect … never thinking about it before :)

    thanks


  44. moo moo said: September 11, 2010 at 2:40 am | Permalink

    hey you need to really have backgrounds not just a link ok


  45. jai prakash said: September 13, 2010 at 9:11 am | Permalink

    Its really cool features of jquery .I am also lover of designing and as well as navigation effect with jquery.


  46. Michael said: September 17, 2010 at 1:34 pm | Permalink

    I really liked your feature of jquery, well done. I am a beginner with wordpress, how can you insert the code in the wordpress; i.e in header.php and style.css. I am trying to do a moving background but is not working. Guess i am stuck in what to put in header and style. Feedback would be much appreciated


  47. Sumon said: October 8, 2010 at 5:44 am | Permalink

    super, cool and awesome article. Thanks for share with us!


  48. asad said: October 14, 2010 at 2:21 pm | Permalink

    whoaaaa… this is awesome!
    thank you very much for sharing the scripts ^^!
    much appreciated
    i also want this on my website

    uptomark


  49. Beben Koben said: October 29, 2010 at 12:31 am | Permalink

    on second thought, it turns out they’re good for background too :D


  50. Song said: May 8, 2011 at 10:23 am | Permalink

    I love to try your awesome work( moving backgrounds), which was posted by posted on: January 8, 2010.
    However, I couldn’t figure it out how I could plug in the number of the width and height.
    I have a background image as a texture (width 384px and height 272px).

    Could you help me please!


  51. wow said: May 20, 2011 at 8:30 am | Permalink

    Total Merged Cagegories :9422 Trackbacks

    By uberVU – social comments on January 8, 2010 at 7:31 pm
    By [jQuery] Testo con sfondo in movimento! | sastgroup.com on January 23, 2010 at 11:03 am
    By [jquery] testo con sfondo in movimento! on January 25, 2010 at 2:14 am
    By Really Useful Tutorials You Should Have Read in January 2010 | EMDMA on February 1, 2010 at 1:27 pm
    By Really Useful Tutorials You Should Have Read in January 2010 Ajax Help W3C Tag on February 11, 2010 at 9:35 am
    By Text with Moving Backgrounds with jQuery – Gaya Design « Netcrema – creme de la social news via digg + delicious + stumpleupon + reddit on February 13, 2010 at 4:39 pm
    By Text with Moving Backgrounds with jQuery – Gaya Design » Web Design on February 13, 2010 at 5:07 pm
    By What we twitted this week – No.1 | Mobile Dummy on February 14, 2010 at 10:38 pm
    By Text with Moving Backgrounds with jQuery – Gaya Design // NOTES on March 1, 2010 at 3:41 pm
    By 10 Novos Recursos e Tutoriais para UI Designers & Developers | Web Grafismo on March 13, 2010 at 4:59 pm
    By Webs Developer » Text With Moving Background on March 19, 2010 at 6:22 am
    By Text with Moving Background | Cimuz a Holy Land of Web Designer and Web Developer on March 30, 2010 at 9:16 am
    By Text with animated background » Ar33 Total Processing Cagegories:3201


  52. joomlaoscommerce said: July 11, 2011 at 5:48 am | Permalink

    http:www.joomlaoscommerce.com
    joomla developer in Bangladesh, professional joomla, seo, wordpress,magento, drupal, web training training in Bangladesh, joomla 1.6 , seo, wordpress,magento, drupal, web training tutorials in Bangladesh.


  53. Clyde Varney said: July 16, 2011 at 7:27 pm | Permalink

    Greetings from California! I’m bored to death at work so I decided to check out your site on my iphone during lunch break. I really like the information you provide here and can’t wait to take a look when I get home. I’m shocked at how fast your blog loaded on my cell phone .. I’m not even using WIFI, just 3G .. Anyways, awesome site!


  54. selforder said: July 28, 2011 at 6:10 am | Permalink

    Almost all of what you mention happens to be supprisingly accurate and it makes me wonder the reason why I had not looked at this with this light before. Your article really did turn the light on for me as far as this particular topic goes. Nevertheless there is one factor I am not really too cozy with and while I try to reconcile that with the actual central idea of the position, allow me observe just what all the rest of the visitors have to say.Well done.


  55. Kolby said: September 6, 2011 at 11:13 pm | Permalink

    Nice effect – anyone know how to get this to work with jquery 1.6.1?


  56. tockmidbu said: September 8, 2011 at 11:35 pm | Permalink

    Pay off Viagra Online and Non-functional Bargain-priced!
    How to buy brotherhood skinflinty online pharmaceutics acquisition bargain generic viagra soft tabs pills layout fixed delivery reasonable online hold pecking order viagra 150mg good online drugstore secure inferior viagra 100mg pharmaceutical how to allow busted viagra moderate tabs pills body cheap how to accept cod go for low-cost viagra plus online place to hour and lasts representing treating manly impotency e. g. erectile dysfunction Viagra starts in minutes to hour and proven side effects. The impact of Viagra advantages are significant security track best performance and lasts in support of treating manly debilitation e. g. erectile dysfunction Viagra starts in minutes to hour and lasts after treating male inadequacy e. g. erectile dysfunction Viagra is an oral medicine worn on treating spear impotence e. g. erectile dysfunction Viagra starts in minutes to hour and proven side effects.
    [url=http://www.thisis50.com/profiles/blogs/buy-viagra-online-and-order-cheap]no prescription buy viagra online[/url]
    viagra new zealand buy
    http://www.thisis50.com/profiles/blogs/buy-viagra-online-and-order-cheap


  57. Coleman said: September 14, 2011 at 4:51 am | Permalink

    Hey great posting , Thank you for sharing this info


  58. Arnold said: September 14, 2011 at 5:08 pm | Permalink

    Fine write-up! I’m also going to create a blog post relating to this… thanks a lot


  59. Prayag Verma said: September 26, 2011 at 6:12 pm | Permalink

    I have implemented this on my blog at http://www.stylifyyourblog.com/. It was working fine but suddenly stopped working on the Home Page but works on the post page and other pages. Please Help


  60. Michael Buford said: October 14, 2011 at 7:43 pm | Permalink

    I used this on my website http://www.browseranalysis.com/ for my main logo. Looks much better than what I was going to use. Thanks


  61. Peter Fisher said: November 6, 2011 at 7:53 pm | Permalink

    Nice examples. I don’t want to sound like a stuck in the mud but I hope this will be used wisely on the internet.

    Just imagine the old html 3 pub poster looking sites with moving text in the background! As with all design concepts it can be used very well and enhance the user experience or be used extremely badly and put viewers off the content.

    If the movement could be user controlled or constrained to not loop then I think the user experience would be better.

    However on the other hand I can see this being a great addition to a children site or a html 5 game.


  62. travis said: November 30, 2011 at 11:15 pm | Permalink

    Add a google + button to your site so i can read this later


  63. zul said: December 9, 2011 at 8:24 am | Permalink

    awesome! nice effect, btw how can i get background.js ?, cause i can’t download @ http://plugins.jquery.com/project/backgroundPosition-Effect.


  64. Chris said: January 17, 2012 at 4:41 pm | Permalink

    Thanks for a great tutorial here – I’d really like to try this… the only problem is that that as zul says above, the link to the plugin is no good (the site is down) – do you have a copy of the file?

    Thanks :)


Leave a Comment

Your email is never shared. Get your own avatar with gravatar! Required fields are marked *

*

*



 

28 Trackbacks

  1. By uberVU - social comments on January 8, 2010 at 7:31 pm
  2. By [jquery] testo con sfondo in movimento! on January 25, 2010 at 2:14 am
  3. By What we twitted this week – No.1 | Mobile Dummy on February 14, 2010 at 10:38 pm
  4. By Webs Developer » Text With Moving Background on March 19, 2010 at 6:22 am
  5. By JQuery Sliders Collection | SiteDev101.com on June 10, 2011 at 1:47 pm
  6. By 24 cool CSS3 text effect examples and tutorial on September 9, 2011 at 12:33 am
  7. By 10 Awesome jQuery Moving Effects | jQuery 4u on November 30, 2011 at 10:15 pm