CSS3 anim básica

auxiliar para [(SOPT) Show on Scroll Final](http://jsfiddle.net/brasofilo/gzzk5tq0/)

HTML

<div class="box"><img width="326" height="150" src="http://dummyimage.com/384x250/23a343/edfcf7&text=Detect+scroll" /></div>
<button>mostrar/esconder</button>

CSS

.display-block {
    right: 0px;
    visibility: visible;   
}
.box {
    right: -384px;
    visibility: hidden;
    -webkit-transition: right 500ms cubic-bezier(0.265, 0.365, 0.26, 0.865);
    -moz-transition: right 500ms cubic-bezier(0.265, 0.365, 0.26, 0.865);
    -o-transition: right 500ms cubic-bezier(0.265, 0.365, 0.26, 0.865);
    transition: right 500ms cubic-bezier(0.265, 0.365, 0.26, 0.865);
}

JavaScript

$(window).scroll(function (e) {
    var height = $(window).scrollTop();
    var available = $(document).height();
    var percentage_of_page = 0.5;
    var half_screen = available * percentage_of_page;
    if ( height > half_screen ) {
        $('.box').addClass('display-block');
    } else {
        $('.box').removeClass('display-block');
    }
});