O'Reilly

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!

Track.js Error Reporting

Recent Features

  • Animated 3D Flipping Menu with CSS

    CSS animations aren't just for basic fades or sliding elements anymore -- CSS animations are capable of much more.  I've showed you how you can create an exploding logo (applied with JavaScript, but all animation is CSS), an animated Photo Stack, a sweet...

  • Responsive Images: The Ultimate Guide

    Chances are that any Web designers using our Ghostlab browser testing app, which allows seamless testing across all devices simultaneously, will have worked with responsive design in some shape or form. And as today’s websites and devices become ever more varied, a plethora of responsive images...

Incredible Demos

  • Vibration API

    Many of the new APIs provided to us by browser vendors are more targeted toward the mobile user than the desktop user.  One of those simple APIs the Vibration API.  The Vibration API allows developers to direct the device, using JavaScript, to vibrate in...

  • CSS Rounded Corners

    The ability to create rounded corners with CSS opens the possibility of subtle design improvements without the need to include images.  CSS rounded corners thus save us time in creating images and requests to the server.  Today, rounded corners with CSS are supported by all of...

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!

Recently on David Walsh Blog

  • JavaScript Polling

    Polling with JavaScript is one of those ugly but important functions within advanced front-end user experience and testing practices.  Sometimes there isn't the event you can hook into to signify that a given task is complete, so you need to get your hands dirty and simply poll for...

  • OSCON Portland:  Conference Giveaway and Discount!

    O'Reilly puts on the best web industry conferences in the world.  These conferences include Fluent Conference, Velocity Conference, and the upcoming OSCON in Portland, Oregon from July 20-24.  Open Source Convention (OSCON) is a conference that focuses specifically on open source developers and the tools and possibilities...

  • Prevent Chrome from Translating a Page

    A while back I shared my favorite Google Chrome extension:  Google Art Project.  I've enjoyed seeing beautiful art when I open a new tab -- it's brought genuine happiness to my day, however small that happiness may be.  About a week ago, however, the art presented had...

  • Create Any Type Of Website With These Multi-Purpose Themes

    We have selected what we believe are the very best multipurpose WordPress themes on the market today. Our list contains a number of best sellers, several newcomers that are proving to be highly popular, and a few themes that are ideal for creating the types of...

  • An Introduction to Static Site Generators

    Static site generators seem to have been becoming more and more popular recently, but they’re not one of those ephemeral novelty things that grow in popularity as quickly as they fall into oblivion shortly after. For over a decade, many different projects — 394 of...