Slide in as you scroll down boxes

slide-in-images.css

/**
 * Sliding Image Panels
 */
.slide-panel:not(first-child) {
    border-top: 1px solid #ddd;
}
.slide-panel .entry-header {
    width: 58%;
}
.slide-panel .entry-content {
    width: 36%;
}
.slide-panel:nth-child(even) .entry-header,
.slide-panel:nth-child(odd) .entry-content {
    float: left;
}
.slide-panel:nth-child(odd) .entry-header,
.slide-panel:nth-child(even) .entry-content {
    float: right;
}
.slide-panel:nth-child(odd) .slide-in {
    transform: translateX( 100% );
    animation: slide-in 0.8s ease forwards;
}
.slide-panel:nth-child(even) .slide-in {
    transform: translateX( -100% );
    animation: slide-in 0.8s ease forwards;
}
@keyframes slide-in {
    to { transform: translateX( 0 ); }
}

slide-in-images.js

/**
 * Function to slide in Images on the Front Page
 * 
 * @see     https://css-tricks.com/slide-in-as-you-scroll-down-boxes/
 * @param   jQuery $
 * @since   1.0.0
 */

(function($) {
    
    /**
     * Copyright 2012, Digital Fusion
     * Licensed under the MIT license.
     * http://teamdf.com/jquery-plugins/license/
     *
     * @author Sam Sehnert
     * @desc A small plugin that checks whether elements are within
     *     the user visible viewport of a web browser.
     *     only accounts for vertical position, not horizontal.
     */
    
    $.fn.visible = function(partial) {
      
        var $t          = $(this),
            $w          = $(window),
            viewTop     = $w.scrollTop(),
            viewBottom  = viewTop + $w.height(),
            _top        = $t.offset().top,
            _bottom     = _top + $t.height(),
            compareTop  = partial === true ? _bottom : _top,
            compareBottom   = partial === true ? _top : _bottom;
    
        return (( compareBottom <= viewBottom ) && ( compareTop >= viewTop ));
    };
    
    $(window).scroll( function(e) {
        $( '.slide-in-image' ).each( function( i, el ) {
            var el = $(el);
            if( el.visible( true )) {
                el.addClass( 'slide-in' );
            }
        }).delay( 5000 );
    });
    
})(jQuery);