@charset "utf-8";
/* CSS Document */



	






/* アニメーション
------------------------------------------------------------*/
#wrap {
    position: relative;
   /* height: 10000px;*/
}

/* ゾウスイングアニメーション */
.object span {
    -webkit-transform-origin: top center;
    transform-origin: top center;
    -webkit-animation-name: swing;
    animation-name: swing;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    animation-iteration-count:infinite;
    -webkit-animation-iteration-count:infinite;
}


.object span {
    z-index:-10;
    position:absolute;
    -webkit-transition: all 2s ease;/*アニメーションの変化*/
    -moz-transition: all 2s ease;
    -o-transition: all 2s ease;
    -ms-transition: all 2s ease;
    transition: all 2s ease;
} 

@-webkit-keyframes swing {
    20%, 40%, 60%, 80%, 100% {
        -webkit-transform-origin: top center;
    }
    20% {
        -webkit-transform: rotate(15deg);
    }
    40% {
        -webkit-transform: rotate(-10deg);
    }
    60% {
        -webkit-transform: rotate(5deg);
    }
    80% {
        -webkit-transform: rotate(-5deg);
    }
    100% {
        -webkit-transform: rotate(0deg);
    }
}


.pos0 {
    top:800px;
    left:-10px;
}
.pos1 {
    top:1000px;
    left:300px;
}
.pos2 {
    top:1400px;
    left:900px;
}
.pos3 {
    top:1800px;
    left:1300px;
}


<!--ゾウのアニメーション-->
<script>
$(function () {
    $(window).scroll(function () {
        $('#interval').text('スクロール値：' + $(this).scrollTop());
        var top = $(this).scrollTop();
        if (top > 1 && top < 699) {
            $(".object span").removeClass().addClass('pos0');
        }
        if (top > 700 && top < 1099) {
            $(".object span").removeClass().addClass('pos1');
        }
        if (top > 1100 && top < 1399) {
            $(".object span").removeClass().addClass('pos2');
        }
        if (top > 1400 && top < 2100) {
            $(".object span").removeClass().addClass('pos3');
        }
    });
});
</script>