Treehouse

Image Reflection with jQuery and MooTools

By on  

Christina Ricci

One subtle detail that can make a big difference on any web design is the use of image reflections. Using them too often can become obnoxious but using reflections on large, "masthead" images is a classy enhancement. Unfortunately creating image reflections within your graphics application can be time-consuming, especially when an image can potentially change frequently. Luckily Christophe Beyls has created Reflection.js.

Reflection.js is a JavaScript utility available in both jQuery and MooTools that creates reflections for any images in a page. Reflection.js creates a new IMG element with special filters if the client is using IE -- if the client is not IE, Reflection.js creates a CANVAS element and constructs the reflection within the canvas.

The HTML

<img src="cricci-player.jpg" alt="Christina Ricci" class="reflect" />

Add the reflect CSS class to any image you'd like to reflect.

The MooTools JavaScript Usage

window.addEvent('domready',function() {
	var options = { height: 0.5 };
	$$('img.reflect').each(function(img) {
		img.reflect(options);
	});
});

The MooTools version of Reflection.js implements the reflect method to create reflections.

The jQuery JavaScript Usage

	document.ready(function() {
		var options = { opacity: 0.75 };
		$('.reflect').reflect(options);
	});

Much like MooTools method, you execute each element's reflect method.

Christophe's Reflection.js code is a great piece of work! Don't waste time making reflections in Photoshop -- use the power of JavaScript!

ydkjs-5.png

Recent Features

  • Facebook Open Graph META&nbsp;Tags

    It's no secret that Facebook has become a major traffic driver for all types of websites.  Nowadays even large corporations steer consumers toward their Facebook pages instead of the corporate websites directly.  And of course there are Facebook "Like" and "Recommend" widgets on every website.  One...

  • 5 HTML5 APIs You Didn&#8217;t Know&nbsp;Existed

    When you say or read "HTML5", you half expect exotic dancers and unicorns to walk into the room to the tune of "I'm Sexy and I Know It."  Can you blame us though?  We watched the fundamental APIs stagnate for so long that a basic feature...

Incredible Demos

Discussion

  1. Haha! I was wondering where Christina had gone…

  2. @Chris the Developer: She’s never gone! :)

  3. Thx for the share, very useful script!
    Always wanted to know a possibility to do client-side reflections… ;)

  4. I agree with you that reflection.js is a great piece of code but… in my machine doesn’t work! :)
    I use mootools-1.2.4 via google api and other plugins.
    I found a solution, replace line 53:

    wrapper = new Element(($(img.parentNode).get("tag") == "a") ? "span" : "div").injectAfter(img).adopt(img, reflection);
    

    width:

    var parentNode = $(img.parentNode);
    if (parentNode != null) {
      wrapper = new Element((parentNode.get("tag") == "a") ? "span" : "div").injectAfter(img).adopt(img, reflection);
    }
    else {
      wrapper = new Element("div").injectAfter(img).adopt(img, reflection);
    }
    

    And… it seems to work! :)

    My two cents.
    Cheers.
    Strap

  5. I was really hoping this post would be “Introducing Scroll”

  6. Ah, I knew I had seen that script somewhere… when you mentioned Christophe Beyls, I knew I was right!

    Great sum up of the usage of the script. I personally prefer the demo provided by Christophe – more dynamic and such… though the muse is more hairy :D.

  7. nice post, great job, you made it come true. I think that’s what I am looking for.

    Your site is nice, too!

  8. Wow, didn’t know that it can be done coding. I was doing it in photoshop and stuff. Good tip, thanx

  9. @Nickolas Simard: Hairy muses FTL.

  10. abhay

    My client has said to me add refelection in about 300 images i know but i forgot it heopls meawesome it is so easy to understand thankyouuuuuuu very much.

  11. […] was baking them right into the images themselves.  Within the past few years, we've introduced JavaScript strategies and CANVAS alternatives to achieve image reflections without having to modify original images. […]

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!