Image Reflections
Demo
-
B.C. Rich Stealth
-
ESP SV
-
Aurellia "That Girl" Universe
If you are interested in the exciting technology of HTML5 Web Components you may want to check a similar experiment, wrapped as a reusable custom tag.
Register the Class
<script src="AcidJs.Reflections/lib/jquery-1.9.1.min.js"></script> <script src="AcidJs.Reflections/classes/Reflections.js"></script>
Usage and Code Insight
(function() {
"use strict";
window.reflections = new AcidJs.Reflections({
//blendColor: "#fff" // reflection bottom color (HexColorString) [optional] default: "#fff"
});
window.reflections.enable({
//spread: 100 // size of the reflection in percentage (0-100) (Number) [optional] default: 50
});
})(); /*
* Reflections
* CSS3 Element Reflections Enabler
* developer's website: http://wemakesites.net/
* developer's twitter: https://twitter.com/#!/wemakesitesnet
* developer's blog http://acidmartin.wordpress.com/
**/
(function() {
"use strict";
/*
* @namespace window.AcidJs
**/
if(undefined === window.AcidJs) {
window.AcidJs = {};
}
/*
* @namespace window.AcidJs
* @class Reflections
* @constructor
* @param config (Object)
* {
* blendColor: (HexColorString) [optional] default: "#fff"
* }
* @return Object
**/
function Reflections(config) {
config = config || {};
this.enabled = true;
/*
* IE < 9 is not enabled
**/
if(document.documentMode && document.documentMode < 9) {
this.enabled = false;
}
if(!this.enabled) {
return;
}
for(var property in config) {
if(config.hasOwnProperty(property)) {
this[property] = config[property];
}
}
this.init();
}
var
HEAD = $("head");
/*
* @namespace window.AcidJs
* @class Reflections
* @constructor
**/
Reflections.prototype = {
/*
* @member TEMPLATES
* @public
**/
TEMPLATES: {
wrapper: '',
reflection: '
',
style: '',
gradient: '{{prefix}}linear-gradient({{blendColor}}, rgba(255, 255, 255, .5) 90%)'
},
/*
* @member CSS_CLASSES
* @public
**/
CSS_CLASSES: {
base: "acidjs-reflections"
},
/*
* @member ATTRS
* @public
**/
ATTRS: {
reflection: "data-reflection"
},
/*
* @member spread
* @public
**/
spread: 50,
/*
* @member BROWSER_PREFIXES
* @public
**/
BROWSER_PREFIXES: [
"-webkit-",
"-moz-",
"-ms-",
"-o-",
""
],
/*
* @member blendColor
* @public
**/
blendColor: "#fff",
/*
* @method init
* @public
* @return void
**/
init: function() {
var
prefixes = this.BROWSER_PREFIXES,
blendColor = this.blendColor,
that = this,
styles = [];
$.each(prefixes, function(i) {
var
prefix = prefixes[i];
styles.push(that.compile("gradient", {
prefix: "background:" + prefix,
blendColor: blendColor
}));
});
styles = styles.join(";");
HEAD.append(this.compile("style", {
style: styles.replace(/[\s]/g, "")
}));
},
/*
* @method compile
* @public
* @param name (String)
* @param data (Object)
* @return String
**/
compile: function(name, data) {
var
html = this.TEMPLATES[name] || "";
data = data || {};
for (var key in data) {
if (data.hasOwnProperty(key)) {
var
value = data[key],
regexp = new RegExp("{{" + key + "}}", "g");
html = html.replace(regexp, value);
}
}
return html;
},
/*
* @method enable
* @param config (Object) [optional]
* {
* spread: (Number) [optional] default: 50
* }
* @public
* @return void
**/
enable: function(config) {
config = config || {};
var
that = this,
size = config.spread || this.spread,
attrs = this.ATTRS,
classes = this.CSS_CLASSES;
if(!this.enabled) {
return;
}
$('img[' + attrs.reflection + '="true"]').each(function() {
var
image = $(this),
height = image.attr("height"),
width = image.attr("width"),
src = image.attr("src");
image.wrap(that.compile("wrapper"))
.removeAttr(attrs.reflection)
.parents("." + classes.base).append(that.compile("reflection", {
src: src,
height: height * size / 100,
width: width
}));
});
}
};
window.AcidJs.Reflections = Reflections;
})(); /*
* Reflections
* CSS3 Element Reflections Enabler
* developer's website: http://wemakesites.net/
* developer's twitter: https://twitter.com/#!/wemakesitesnet
* developer's blog http://acidmartin.wordpress.com/
**/
.acidjs-reflections img,
.acidjs-reflections span
{
display: block;
}
.acidjs-reflections *
{
position: static;
margin: 0;
padding: 0;
border: 0;
line-height: 0;
}
.acidjs-reflections
{
cursor: default;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.acidjs-reflections div
{
position: absolute;
z-index: -1;
-webkit-pointer-events: none;
-moz--pointer-events: none;
-pointer-events: none;
-webkit-transform: scaley(-1);
-moz-transform: scaley(-1);
-ms-transform: scaley(-1);
-o-transform: scaley(-1);
transform: scaley(-1);
}
.acidjs-reflections span
{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffffff, endColorstr=#7fffffff);
}