Distortion Effect On Images Using CSS & Jquery

Distortion-effect
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?
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!

    Other Recommended Posts

  • Blogger Tutorials, jQuery
V3King said on September 4, 2011 at 1:26 AM :

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

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

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

This is simply BRILLIANT!!

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

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

How can i use this in a normal blog post?

REPLY
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!

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

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

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

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

REPLY
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

REPLY
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?

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

david walsh :)
great master mootools ;)

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

REPLY
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

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

REPLY
Mohammad

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

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

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

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

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

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

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

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

REPLY

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

[netinsert=0.0.1.11.14.1]