JSFiddle - React, Tailwind, and code Playground

by sebastianauer

HTML

<h1>Before &amp; After<br />Transparent Gradient Slider</h1>
<ol id="fade"> 
    <li><img src="http://maps.google.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=14&size=360x260&markers=color:blue|label:S|40.702147,-74.015794&markers=color:green|label:G|40.711614,-74.012318&markers=color:red|color:red|label:C|40.718217,-73.998284&sensor=true&maptype=satellite" title="map satellite" alt="" /></li> 
    <li><img src="http://maps.google.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=14&size=360x260&markers=color:blue|label:S|40.702147,-74.015794&markers=color:green|label:G|40.711614,-74.012318&markers=color:red|color:red|label:C|40.718217,-73.998284&sensor=true" alt="" /></li> 
</ol> 
<p id="info">Written by Austin de Coup-Crank (<a href="http://twitter.com/austindcoder">@austindcoder</a>)<br /><br />Main inspiration came from <a href="http://jsfiddle.net/kuzeko/mt3gz/embedded/result/">this demo</a> by <a href="http://twitter.com/kuzeko">@kuzeko</a><br /><br />All HTML, CSS &amp; JavaScript released under <a href="http://creativecommons.org/licenses/by-sa/3.0/" title="Creative Commons Attribution-ShareAlike 3.0">CC BY-SA</a>.</p>

CSS

body {
            color:#777;
            font:11px/1.5 Helvetica,Arial,sans-serif;
            letter-spacing:1px;
            text-align:center;
            background:#ddd;
            width:400px;
            margin:5em auto;
        }
        h1 {
            text-align:center;
            color:#444;
            margin-bottom:2em;
            font-size:2em;
        }
        a:link, a:active, a:visited, a:focus {
            font-variant:normal;
            text-decoration:none;
            color:#111;
            padding:0 0.2em 0 0.3em;
        }
        a:hover {
            background:#eee;
            -webkit-border-radius:3px;
            -moz-border-radius:3px;
            border-radius:3px;
            -webkit-box-shadow:1px 1px 0px #aaa;
            -moz-box-shadow:1px 1px 0px #aaa;
            box-shadow:1px 1px 0px #aaa;
        }
        #info {
            margin-top:4em;
        }
        #fade {
            margin:0 auto;
            position:relative;
            overflow:hidden;
            list-style:none;
            width:260px;
            height:260px;
            cursor:ns-resize;
            -webkit-box-shadow:0 10px 40px #888;
            -moz-box-shadow:0 10px 40px #888;
            box-shadow:0 10px 40px #888;
 
        }
        #fade li {
            top:0;
            left:0px;
            display:block;
            overflow:hidden;
            height:260px;
            width:300px;
        }

JavaScript

$(function() { // Upon loading the DOM
    var step, steps;

    // This function creates the transparent gradient


    function transGrad(parentEl, steps, size, pos) {
        var top = $(parentEl + ' li:last');
        var src = $(parentEl + ' li:last img').attr('src');
        var w = $(top).width();
        $(parentEl + ' li').css("position", "absolute"); // Stack images
        $(top).css({
            width: w + 'px',
            height: pos + 'px'
        });
        var h = $(top).height(); // Get height
        for (step = 0; step < steps; step++) {
            var oDiv = $('<div></div>');
            oDiv.css({
                position: 'absolute',
                backgroundColor: 'transparent',
                backgroundImage: 'url(' + src + ')',
                backgroundRepeat: 'no-repeat',
                backgroundPosition: '0 -' + (h + (step * size)) + 'px',
                opacity: (1 - (step / steps)),
                top: (h + (step * size)) + 'px',
                left: '0px'
            }).width(w).height(size);
            $(parentEl).append(oDiv);
        }
    }

    // Create the gradient on #fade with 50 steps of 1px height and start at the top
    // Adding steps looks pretty, but costs performance. Similarly, lowering steps and
    // Upping the step height performs better, but looks worse.
    transGrad('#fade', 50, 1, 0);

    // Adjust the gradient based on the mouse's position in #fade
    $('#fade').mousemove(function(e) {
        var $el = $(this);
        ht = e.pageY - $el.offset().top - 20;
        $('#fade li:last').height(ht);
        $('#fade div').each(function(index) { // This is where the gradient's movement magic happens
            $(this).css({
                top: (ht + index) + 'px',
                backgroundPosition: '0 -' + (ht + index) + 'px'
            });
        });
    }); /* http://forrst.com/people/jamiebicknell */
    $('#fade').mousedown(function(event) {
        event.preventDefault(); // If someone...