Distortion Effect On Images Using CSS & Jquery

Inspired by few works from Ryan Florence - Mootools contributor and moo4q creator, I wanted to use few scripts from his animation library to create a stunning effect for users on blogger/WordPress(WP), namely "the distortion effect" on images using CSS and jquery. I've split the tutorial into 3 parts - HTML, CSS and JavaScript to keep it simple. So, take a look at the live demo using the link below.

DISTORTION EFFECT ON IMAGES - LIVE DEMO

CSS

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

2. Add the following piece of code just above/before the line mentioned in step 1.

a#homeLogo {
width:300px;
height:233px;
text-indent:-3000px;
background:url(https://lh6.googleusercontent.com/-d6KcE0bYt7g/TmB-678StqI/AAAAAAAABiQ/8HiKcJYL3RY/s800/face-icon.png) 0 0 no-repeat;
display:block;
z-index:2;
}
a#homeLogo span {
float:left;
display:block;
background-image:url(https://lh6.googleusercontent.com/-d6KcE0bYt7g/TmB-678StqI/AAAAAAAABiQ/8HiKcJYL3RY/s800/face-icon.png);
background-repeat:no-repeat;
}
.clear { clear:both; }

Note: Users on WP may add the above mentioned codes to their custom.css file and upload the same to their host servers.

3. Change the URL highlighted in green with the image URL of your choice. Please, try to maintain the image dimensions - 300x233px, to avoid layout issues and further complications arising out of the same:)

JAVASCRIPT

Users on blogspot/blogger may follow the following instructions. To avoid excessive time in loading your website/effect on blogger, you shall define the JavaScript internally on your blog rather than calling them from Google Sites where I hosted them.

1. Search for the following piece of code in your blogger template.

</head>

2. Paste the following piece of code mentioned in the text document - JAVASCRIPT FOR DISTORTION EFFECT, just above/before the line mentioned in step 1.

WP Users may download the files - CSSAnimation.js, CSSAnimation.jQuery.js & Demo.js (you may define them internally) and upload the same to their host servers to include them before </head> as mentioned earlier (similar to blogspot users). I recommend you to read the following articles to better understand about adding custom defined JavaScript on WordPress - Adding JavaScript on WordPress. I'm not a WP expert. So, if there are any WP geeks out there, you may share a small tutorial about adding these scripts to their respective hosts - either via comments or via guest articles:)

HTML

The HTML involved behind the distortion effect is pretty complex to understand. So, to keep them simple, I've just added them to a text file which you may download here - HTML FOR DISTORTION EFFECT. Now, paste the code present in the text document anywhere in your blogger template or WordPress theme - better to add them as widgets. That's it! Save your template and your done. Replace the link which points to my website (http://www.newbloggingtipz.com)with that of yours. It's pretty self-explanatory.

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

Enjoyed the article?

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?

Other Recommended Posts

V3King said on September 4, 2011 at 1:26 AM :

Its Work Great Dude.
Can I Use It For Simple Slideshow?

Mukund said on September 4, 2011 at 10:54 AM :

@V3King: Yup! Thanks for the comment buddy! You can use it anywhere on your template - just need to add a class called homeLogo! That's it! Try it and if you face any problem, just let me know:)

Reyad010 said on September 4, 2011 at 4:14 PM :

This is simply BRILLIANT!!

Mukund said on September 4, 2011 at 7:37 PM :

@Reyad010: Yup! Thanks for the comment buddy! Hope you enjoy the upcoming tutorials/effects as well:)

gamep01nt said on September 5, 2011 at 6:12 PM :

How can i use this in a normal blog post?

Mukund said on September 5, 2011 at 8:06 PM :

@gamep01nt: Just paste the code mentioned in the HTML part in your blog post! The remaining steps are the same! I suggest you to use the "Edit HTML" mode in the post editor rather than the "Compose" mode!

gamep01nt said on September 6, 2011 at 12:12 AM :

Thanks mukund for ur reply, but it's Not working on the normal blog post for me.

Mukund said on September 6, 2011 at 12:15 AM :

@gamep01nt: Well, the demo blog has the effect within the post. So, you should be able to achieve the same! May be, your going wrong some where! Just ping me on gtalk and I'll help you out:)

Anirudh@ExceptNothing said on September 8, 2011 at 4:47 PM :

Placed the Code Properly . But not working . Anyway Great Post !

Mohammad

Hi Mukund please make a simple and easy use of this post i fallow all steps but nothing happened and if i use code in post it's show as text please help me out.Thanks

Mukund said on September 10, 2011 at 10:36 AM :

@Mohammad: Well, I thought this was the easiest way! Anyway, I'll help you out! Just let me know what browser do you use to view the effect?

Beben Koben said on September 10, 2011 at 5:13 PM :

david walsh :)
great master mootools ;)

Mukund said on September 10, 2011 at 11:01 PM :

@Beben Koben: Absolutely right! But, this effect works on the library created by Ryan - the main contributor:)

vishnu said on September 11, 2011 at 7:41 PM :

Hi Friend This Is Nice Article.. is there any coding for Distortion Effect On Images for wordpress blog

Mukund said on September 11, 2011 at 11:57 PM :

@vishnu: I've explained the basics for WP users as well! I'm not a WP expert but I do know that you can add this effect as a widget on your blog.

@Mukund
Thanks for replay i used Firefox 6 or Google chrome.
Please help me i only want to use this on posts thanks again.

Mukund said on September 16, 2011 at 12:24 AM :

@Mohammad: Hmmm! I hope you added the widget using the HTML mode! If not, try to paste the codes in the HTML mode on post editor. Still facing problems, then hit me via the contact button - send me an email and I'll help you out:)

Osho @ Latest Tips And Tricks said on October 8, 2011 at 11:01 PM :

@Mukund Good Work :)
Thanks For Ideas Too :)

Mukund said on October 10, 2011 at 2:01 AM :

@Osho @ Latest Tips And Tricks: Yup! Thanks for the comment buddy! I hope you enjoy the other effects and tutorials as well:)

Alex said on January 21, 2012 at 10:00 AM :

it's show as text on the top of my blog.. I've do everything exactly like you said, i followed every step but nothing only the text on the top like i said.. please help me out. Thanks..

LinkToHow said on February 21, 2012 at 11:10 AM :

Not Working for me have you any other code plz upload or rly me !!

Use the tab below to comment. No spam please!!!

POST YOUR COMMENT