Untitled

<!DOCTYPE html>
<html>
<head>
	<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
	<meta content="utf-8" http-equiv="encoding">
    <title>Page Title</title>
    <style>
        .animation-element {
            opacity: 0;
            position: relative;
        }

        .animation-element.slide-left {
            opacity: 0;
            -moz-transition: all 500ms linear;
            -webkit-transition: all 500ms linear;
            -o-transition: all 500ms linear;
            transition: all 500ms linear;
            -moz-transform: translate3d(-100px, 0px, 0px);
            -webkit-transform: translate3d(-100px, 0px, 0px);
            -o-transform: translate(-100px, 0px);
            -ms-transform: translate(-100px, 0px);
            transform: translate3d(-100px, 0px, 0px);
        }

        .animation-element.slide-left.in-view {
            opacity: 1;
            -moz-transform: translate3d(0px, 0px, 0px);
            -webkit-transform: translate3d(0px, 0px, 0px);
            -o-transform: translate(0px, 0px);
            -ms-transform: translate(0px, 0px);
            transform: translate3d(0px, 0px, 0px);
        }
    </style>
</head>
<body>
    <div class="container-fluid">
        <div class="well col-sm-6 col-xs-12">
			<p id="helo"></p>
			<script>var str = "Hello world!</br>";document.getElementById("helo").innerHTML = str.repeat(120);</script>
            <div class="animation-element slide-left">
                MY TEXT GOES HERE
            </div>
        </div>
    </div>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script>
        var animation_elements = $.find('.animation-element');
        var windows = $(window);
        function check_if_in_view() {
            var window_height = windows.height();
            var window_top_position = windows.scrollTop();
            var window_bottom_position = (window_top_position + window_height);

            $.each(animation_elements, function() {
                var element = $(this);
                var element_height = $(element).outerHeight();
                var element_top_position = $(element).offset().top;
                var element_bottom_position = (element_top_position + element_height);

                if ((element_bottom_position >= window_top_position) && (element_top_position <= window_bottom_position)) {
                    element.addClass('in-view');
                } else {
                    element.removeClass('in-view');
                }
            });
        }
        $(window).on('scroll resize', function() {
            check_if_in_view()
        })
        $(window).trigger('scroll');
    </script>
</body>
</html>