HTML5, CSS3 & JS Experiments

By Martin Ivanov

Image Reflections

Demo

  • B.C. Rich Stealth

    B.C. Rich Stealth

  • ESP SV

    ESP SV

  • Aurellia 'That Girl' Universe

    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);
}