Full Animation

http://gianlucaguarini.github.io/jquery.html5loader/examples/demo-nprogress.html

by Apple Ilagan

HTML

<script src="https://raw.githubusercontent.com/GianlucaGuarini/jquery.html5loader/master/src/jquery.html5Loader.js"></script>
<script src="https://raw.githubusercontent.com/GianlucaGuarini/jquery.html5loader/master/src/animations/jquery.html5Loader.line.js"></script>
<script src="http://aios-staging.agentimage.com/mcarr_pending.com/htdocs/wp-content/themes/mcarr_sc/src/cycle.js"></script>
<div class="the_slideshow">
    <div class="slide">
        <div class="carredpng">
            <img class="car1" src="http://aios2-staging.agentimage.com/r/remaxhomelandrealtors.com/htdocs/wp-content/themes/remaxhomelandrealtors/flash/car_red1.png">
            <img class="car2" src="http://aios2-staging.agentimage.com/r/remaxhomelandrealtors.com/htdocs/wp-content/themes/remaxhomelandrealtors/flash/car_red2.png">
            <img class="car3" src="http://aios2-staging.agentimage.com/r/remaxhomelandrealtors.com/htdocs/wp-content/themes/remaxhomelandrealtors/flash/car_red3.png">
            <img class="car4" src="http://aios2-staging.agentimage.com/r/remaxhomelandrealtors.com/htdocs/wp-content/themes/remaxhomelandrealtors/flash/car_red4.png">
        </div>
        <div class="carred">
            <img src="http://aios2-staging.agentimage.com/r/remaxhomelandrealtors.com/htdocs/wp-content/themes/remaxhomelandrealtors/flash/car_red.png">
        </div>
        <div class="carred_n">
            <img src="http://aios2-staging.agentimage.com/r/remaxhomelandrealtors.com/htdocs/wp-content/themes/remaxhomelandrealtors/flash/car_red_n.png">
        </div>
        <div class="carblue_n">
            <img src="http://aios2-staging.agentimage.com/r/remaxhomelandrealtors.com/htdocs/wp-content/themes/remaxhomelandrealtors/flash/carblue_n.png">
        </div>
        <div class="carblue">
            <img src="http://aios2-staging.agentimage.com/r/remaxhomelandrealtors.com/htdocs/wp-content/themes/remaxhomelandrealtors/flash/carblue1.png" class="carblue1">
            <img...

CSS

.slide {
    position:absolute;
    top:0;
    width:100%;
    height:auto;
    background:#c4d9ea;
    overflow:hidden;
}
.slide img {
    width:100%;
}
.n {
    display:none;
}
.remaxballon {
    position:absolute;
    height:auto;
    opacity:1;
    width:4.5%;
    margin-top:1%;
}
.remax {
    position:absolute;
    height:auto;
    opacity:1;
    width:22.375%;
    margin-left:38.5%;
    margin-top:10%;
}
.carousel_ani {
    position:absolute;
    height:auto;
    opacity:1;
    width:25.62%;
    margin-left:40%;
    margin-top:0;
}
.carousel {
    position:absolute;
    height:auto;
    opacity:1;
    width:25.62%;
    margin-left:40%;
    margin-top:0;
}
.rightbldg2 {
    position:absolute;
    height:auto;
    opacity:1;
    width:33.19%;
    margin-left:12%;
    margin-top:17%;
}
.rightbldg {
    position:absolute;
    height:auto;
    opacity:1;
    width:28.25%;
    margin-left:32%;
    margin-top:14%;
}
.leftbldg3 {
    position:absolute;
    height:auto;
    opacity:1;
    width:32.19%;
    margin-left:67.5%;
    margin-top:8%;
}
.leftbldg2 {
    position:absolute;
    height:auto;
    opacity:1;
    width:11%;
    margin-left:63.5%;
    margin-top:16.5%;
}
.leftbldg {
    position:absolute;
    height:auto;
    opacity:1;
    width:19.125%;
    margin-left:52%;
    margin-top:22%;
}
.library {
    position:absolute;
    height:auto;
    opacity:1;
    width:31.94%;
    margin-left:68%;
    margin-top:16%;
}
.church {
    position:absolute;
    height:auto;
    opacity:1;
    width:35.81%;
    margin-left:64.1%;
    margin-top:12.1%;
}
.hall {
    position:absolute;
    height:auto;
    opacity:1;
    width:35.56%;
    margin-left:21%;
    margin-top:11.5%;
}
.hallcourt1 {
    position:absolute;
    height:auto;
    opacity:1;
    width:35.562%;
    margin-left:0%;
    margin-top:9.2%;
}
.hallcourt2 {
    position:absolute;
    height:auto;
    opacity:1;
    width:35.562%;
    margin-left:0%;
    margin-top:9.2%;
}
.hallcourtr {
   ...

JavaScript

//ANIMATION
var files = {
    files: [{
        "source": "http://aios2-staging.agentimage.com/r/remaxhomelandrealtors.com/htdocs/wp-content/themes/remaxhomelandrealtors/flash/1bushes.png",
            "type": "IMAGE"
    }, {
        "source": "http://aios2-staging.agentimage.com/r/remaxhomelandrealtors.com/htdocs/wp-content/themes/remaxhomelandrealtors/flash/1bushes_n.png",
            "type": "IMAGE"
    }, {
        "source": "http://aios2-staging.agentimage.com/r/remaxhomelandrealtors.com/htdocs/wp-content/themes/remaxhomelandrealtors/flash/3settled_n.png",
            "type": "IMAGE"
    }, {
        "source": "http://aios2-staging.agentimage.com/r/remaxhomelandrealtors.com/htdocs/wp-content/themes/remaxhomelandrealtors/flash/3settled.png",
            "type": "IMAGE"
    }, {
        "source": "http://aios2-staging.agentimage.com/r/remaxhomelandrealtors.com/htdocs/wp-content/themes/remaxhomelandrealtors/flash/4welcome.png",
            "type": "IMAGE"
    }, {
        "source": "http://aios2-staging.agentimage.com/r/remaxhomelandrealtors.com/htdocs/wp-content/themes/remaxhomelandrealtors/flash/4welcome_n.png",
            "type": "IMAGE"
    }


    ]
};

//init
var loaderAnimation = $("#html5Loader").LoaderAnimation({
    onComplete: function () {
        //console.log("preloader animation completed!");
    }
});
$.html5Loader({
    filesToLoad: files,
    onComplete: function () {
        //console.log("All the assets are loaded!");

        //BEGIN THE SLIDESHOW			
        jQuery(function () {
            resizeSlideshow();

            jQuery(window).resize(resizeSlideshow);

            function resizeSlideshow() {
                var origW = 1343;
                var origH = 465;
                var winWidth = jQuery(window).width();
                var newHeight = origH * winWidth / origW;
                jQuery(".the_slideshow").css({
                    "height": newHeight
                });
                jQuery(".slide").css({
                ...