JSFiddle - React, Tailwind, and code Playground

by kiokotzu

HTML

<div></div>
<div></div>
<div></div>
<div></div>

CSS

div{
    height:200px;
    margin:20px 0;
     background:url('http://www.blastr.com/sites/blastr/files/Halo.jpg') 0 0 no-repeat;
}

JavaScript

(function(e) {
    var t = e(window);
    var n = t.height();
    t.resize(function() {
        n = t.height()
    });
    e.fn.parallax = function(r, i, s) {
        function o() {
            u.each(function() {
                f = u.offset().top
            });
            if (s) {
                a = function(e) {
                    return e.outerHeight(true)
                }
            } else {
                a = function(e) {
                    return e.height()
                }
            }
            if (arguments.length < 1 || r === null) r = "50%";
            if (arguments.length < 2 || i === null) i = .5;
            if (arguments.length < 3 || s === null) s = true;
            var o = t.scrollTop();
            u.each(function() {
                var t = e(this);
                var s = t.offset().top;
                var l = a(t);
                if (s + l < o || s > o + n) {
                    return
                }
                u.css("backgroundPosition", r + " " + Math.round((f - o) * i) + "px")
            })
        }
        var u = e(this);
        var a;
        var f;
        var l = 0;
        t.bind("scroll", o).resize(o);
        o()
    }
})(jQuery);

 $('div').parallax("100%", 0.6);