Design
March 1, 2009

"Image Reflection" effect using javascript

You can find a lot of advice regarding color schemes, layouts, and other suggestons from "web design gurus" - they are about design.

Naturally, we should follow basic design criteria, but the fact is, nobody but us, can make our sites very individual, very personal, and very different.

Visual or special effects can be good, bad, or ugly. Interesting visuals, or special effects that don't override content but complement it, are good.

A very elegant "Image Reflection" effect caught my eye today when I was browsing around the Internet, and I would like to share my findings with you.

The script that is used to make this "reflection" effect is freely distributable under the MIT-style license.

"Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software..."
MIT_License

Just don't drop the copyright notice from the script.

reflection.js - reflection.js is a cross platform script which allows you to add reflections to images on your web pages.

I found this script at cow.neondragon.net

Standing Out Match
Golden Crystal Black Velvet
honeysuckle
white and red roses
Standing Out Match Golden Crystal Honeysuckle White and red roses
Yellow Old Timer
Loyus
rose on black
Dancing Flamingos
Yellow Old Timer Abstract Background Rose On Black Dancing Flamingos
To make reflections fade into black color you need to set the background color of the container as black.


web with dew
Loyus
At Sign Photo
Violin
Web with dew Loyus @ Sign Violin
Reflections in the above examles have varying opacity starting from 30% to 60%.


Clarinet
Rose On Piano
Erotic Girl
White Rose on Gold Satin
Clarinet Rose On Piano Erotic Girl White Rose
To vary the height of the reflection use the attribute rheight


Dried Roses
Dried Roses

In this example I used background color #BF872A and a border around the image

Ornamental Orange Tin Lizar
Ornamental Lizard

Lizards are fascinating creatures.
This colored lizard with ornamental structures is "very visual" by itself.
I set the reflection height to 100% to "repeate" it's beauty.

The Stock Photo Saga: "Image Reflection" effect using javascript

 
  Contact
How Do I
Terms Of Use
Image Licenses
Privacy Policy
About Us
Top searches
Press Releases
Developers API
Photo Club
RSS: Recent Images
RSS: Images by Author
RSS: Image by Category
Free Images
2005-2010, FeaturePics and FeatureImage, Fremont, California.
All rights reserved.