JSFiddle - React, Tailwind, and code Playground

by Brett Miley

HTML

<div id="div">
    <img src="http://www.contrastrebellion.com/public/images/logo-bg.png" width="290" height="290" style="-webkit-transform: scale(0.5); " />
    <img src="http://t3.gstatic.com/images?q=tbn:ANd9GcSVQXKCc1zsjS0Tm8YfHB2Mgv18FvDyci93Ksafsw-_2Vai9ZO6" width="290" height="290" style="-webkit-transform: rotate(0deg); " />
</div>

CSS

#div {
    height:1600px;
    margin:500px;

}
img{
    -webkit-transition: all 0.5s ease-in;
    transition: all 0.5s ease-in;
}

JavaScript

$(document).ready(function () {

    $(window).scroll(function () {
        $('img').each(function (i) {
            var bottom_of_object = $(this).offset().top + $(this).outerHeight();
            var bottom_of_window = $(window).scrollTop() + $(window).height();
            if (bottom_of_window > bottom_of_object) {
                   $(this).css({'-webkit-transform': 'scale(1)'});
            }
            else {
                   $(this).css({'-webkit-transform': 'scale(0.5)'});
            }
        });
    });

});