JSFiddle - React, Tailwind, and code Playground

by imsky

HTML

<img src="http://placekitten.com/300/300" id="box">

CSS

#box {position:absolute;top:10px;left:20px}

JavaScript

$(function() {
    var h = $(window).height();
    var t = function() {
        return h - (+$("#box").offset().top)
    };
    $("#box").one("fade", function() {
        $(this).animate({
            "opacity": 0
        }, {
            "queue": false,
            "duration": 0.75 * 5000
        });
    });
    $("#box").animate({
        "top": h + "px"
    }, {
        duration: 5000,
        step: function() {
            if (t() / h < 0.75) {
                $(this).trigger("fade");
            }
        }
    });
});