JSFiddle - React, Tailwind, and code Playground

HTML

<body id="home">

    <div class="container">
	</div>
	
	<div class="footer">
        
		<img src="http://i.imgur.com/p7rb4bD.png" class="link" data-shadow="shadow1" id="portfolio"/>
	
		<img src="http://i.imgur.com/p7rb4bD.png" class="link" data-shadow="shadow2" id="hamumu"/>
	
		<img src="http://i.imgur.com/p7rb4bD.png" class="link" data-shadow="shadow3" id="beep"/>
		
	<span class="stretch"></span>
	
    </div>

    <div class="footer2">
        
        <img src="" class="shadow" id="shadow1"/>
		
		<img src="" class="shadow" id="shadow2"/>
		
		<img src="" class="shadow" id="shadow3"/>	
		
    </div>

</body>

CSS

* {
    margin: 0;
}

body#home {
    background-color: green;
}

html, body {
    height: 100%;
}

.container{
    min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -125px;
}

.footer{
    margin-left: auto;
	margin-right: auto;
	height: 125px;
	width: 70%;
	text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
	/*background-color: blue;*/
}

/*links*/
.link {
    position: relative;
	width: 80px;
	vertical-align: top;
	display: inline-block;
	top: -600px;
}

.footer2{
    margin-left: auto;
	margin-right: auto;
	margin-top: -105px;
    height: 60px;
    text-align: justify;
    font-size: 0.1px; /* IE 9 & 10 don't like font-size: 0; */
    width: 70%;
	/*background-color: red;*/
}

.footer2:after {
    content:'';
	width: 100%;
	display: inline-block;
}

.shadow {
    width: 80px;
    height: 40px;
    display: inline-block;
    background-color: orange;
}

.stretch {
    width: 100%;
	display: inline-block;
	font-size: 0;
	line-height: 0;
}

#port1 {
    position: relative;
	top: 0px;
	margin-left: auto;
	margin-right: auto;
    width: 40px;
	height: 40px;
	background-color: blue;
}

JavaScript

var links = ["#portfolio", "#hamumu", "#beep"];
var ape = 0;
$(document).ready(function() {

    links.forEach(function(n){

        var link = $(n);

        link.animate({

            top: '0'

        }, {

            duration: 3000,

            easing: 'easeOutBounce',

            step: function(img, tween) {

                //if "now" is -19 or below
                if (img <= -20) {
                    $(this).attr('src', 'http://en.clipart-fr.com/data/gif/Dogs/animated_gif_dogs_011.gif');
                }
                
                if (img > -20 ) {

                    //change the falling image picture
                    $(this).attr("src", "http://placehold.it/100/50");
                    ape = 1;
                }
            }
        });
    });
});