Text With Moving Background On Blogger

Save on del.icio.us Add to Technorati Digg this article! Add it on Reddit! 7 Comments

Inspired from the tutorial written by "GayaDesign" about text with moving background, I wanted to write an article so that, users on blogger/blogspot can enjoy the same effect. The article will guide you to create a text mask using PhotoShop and use the same to realize the final effect with some CSS and Jquery. I suggest you to take a look at the live demo by using the link below.

TEXT WITH MOVING BACKGROUND ON BLOGGER - LIVE DEMO

Cool... Isn't it? Well, let's get this installed on our blogs as well. I've split the tutorial in 4 parts - Photoshop, HTML, CSS and Jquery. The article is quite big. So, without wasting time, let me dive into the first phase of the tutorial straight away.

USING PHOTOSHOP TO CREATE THE MASK

1. Open a new file with the following dimensions: 600x100px (width - 600px and height - 100px). Now, pour some color using the paint brush tool. You may add some gradient shades, like I did, if you wish to make it more appealing.
2. Now, create a new layer using the icon that appears on the layers panel. I suggest you to take a look at the screen shot shown below. Now, hit the "Text/Horizontal Type Tool" and type the text of your choice on the canvas.

3. Just move to the layer's panel and select the newly created text layer by holding "CTRL" key on your keyboard. You'll notice the text layer alone being selected. Just go to "Select > Inverse" using the menu-bar at the top or simply hold the keys "Shift+Ctrl+I" to select the inverse layer. You should probably have a selection similar to the one shown below.

4. Now, simply select the other layer (Layer 1) in the layers panel and hit the icon that says "Add Mask Layer". Just refer to the following screen shot to better understand about the same.

5. Next, hide the text layer - remove the eye icon from the layers panel. Refer to the screen shot below.

6. Now, you should be able to see your masked text image as shown below. Save this image in PNG format. and upload the same to your picasa album or any image hosting site. I've saved it using Mask. So, when I refer to Mask.png anywhere in the article, it refers to this mask image.

Note: The mask which you've just created using PhotoShop (Mask.png) will be used in the HTML part. It is not necessary that you maintain the image dimensions as mentioned in step 1. However, when you vary the image dimensions, you should make the corresponding changes in the CSS part as well.

HTML

1. Navigate to "Design>>Edit HTML" and make a backup of your template by clicking on the "Download full template" link at the top of the page. Once the back up is over, search for the following piece of code.

<b:section class='main' id='main' showaddelement='no'>

2. Paste the following piece of code just above the line mentioned in step 1.

<div class='scrollBg'>
<a href='http://www.newbloggingtipz.com/'><img src='Mask.png'/></a>
</div>

3. Replace "Mask.png" in the above code with the URL of the uploaded image Mask.png as mentioned earlier in the tutorial and save your template. Similarly, replace the URL pointing to my website  in the anchor tag with the one of your choice.

Note: You can add the HTML codes anywhere in your template - not necessary that you add it above the line mentioned in step 1.

CSS

1. Search for the following code in your template.

]]></b:skin>

2. Paste the following piece of code just above the line mentioned in step 1.

.scrollBg {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyabrkBnmLA5Ib-D1_5HEaTYP1uQp91vwYF5ftEaorX594wYfI7kF8bDVp9ZFAwO5a2Nl9Y25tzeWfL3IvFyxSR4o9OzMQW4V0Mc3t3XB7AMlHsu4B5d4o9Y5Bxo2HAoIVQ6gNU5jvctSx/s800/love-pattern-new.png);
background-color: #000000;
width: 600px;
height: 100px;
}
.scrollBg img {
display: block;
border:2px #000 solid;
}

3. Save your template. 

Note: You may change the background image by changing the URL highlighted in green - try to maintain the image dimension as mentioned in the CSS to avoid confusions.

JAVASCRIPT/JQUERY

1. Search for the following code in your template.

</head>

2. Paste the following piece of code present in this text document - SCRIPT FOR TEXT WITH MOVING BACKGROUND, just above the line mentioned in step 1.
Note: You may omit the first line the script mentioned above provided you have the latest jquery file running on your blog.

3. That's it! Save your template and your done!

If you are a person obsessed with page speed of your blog but you like this widget, then ping me via gtalk and I'll help you out. I'll just tell you to define the JavaScript internally than fetching it from Google Sites where I hosted it. That's it:)

The above effect was tested to work perfectly fine on all the major browsers that include, but not limited to, FF, IE, Chrome, Safari and Opera. If you need further assistance in applying this effect anywhere on your blog, then leave a comment below and get it clarified. Do share your opinions about the article/effect via comments.

Enjoyed the article?

Subscribe to this Blog via Email:

Click here to subscribe to FREE email updates from "Everything About Blogging", so that you do not miss out anything that can be valuable to you and your blog!

What's Next?

Save on del.icio.us
Add to Technorati
Digg this article!
Add it on Reddit!
Leave a comment

Other Recommended Posts

• jQuery, Web Design