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!

Recent Features

  • By
    Creating Scrolling Parallax Effects with CSS

    Introduction For quite a long time now websites with the so called "parallax" effect have been really popular. In case you have not heard of this effect, it basically includes different layers of images that are moving in different directions or with different speed. This leads to a...

  • By
    5 HTML5 APIs You Didn&#8217;t Know 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

  • By
    Spatial Navigation

    Spatial navigation is the ability to navigate to focusable elements based on their position in a given space.  Spatial navigation is a must when your site or app must respond to arrow keys, a perfect example being a television with directional pad remote.  Firefox OS TV apps are simply...

  • By
    Creating the Treehouse Frog Animation

    Before we start, I want to say thank you to David for giving me this awesome opportunity to share this experience with you guys and say that I'm really flattered. I think that CSS animations are really great. When I first learned how CSS...

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.

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