Animate elements when they reach the viewport javascript

This jsfiddle includes a JavaScript algorithm that determines when elements are in the viewport vertifcally.

HTML

<div id="content">
    <div id="openingDescription">
        <div id="openingMessage">This script will detect when an element is one quarter into the devices viewport vertically only (support for horizontal scrolling may be added later). Elements are white as exiting the viewport and red when they are inside the viewport. Please continue by clicking the button below and don't forget to scroll...</div>
        <div id="continueButton">
            <input type="button" onclick="$(this.parentNode.parentNode).fadeOut(800);  document.getElementsByTagName('html')[0].style.overflow = 'auto'; for(var i = 0; i != elements.length; i++){$(elements[i]).fadeIn(800);}" value="Continue">
        </div>
    </div>
    <div id="scrollElementOne">This is scroll Element One</div>
    <div id="scrollElementTwo">This is scroll Element Two</div>
    <div class="scrollElement">This is a scrollElement class item.</div>
    <div id="scrollElementThree">This is scroll Element Three</div>
    <div id="scrollElementFour">This is scroll Element Four</div>
    <div id="scrollElementFive">This is scroll Element Four</div>
    <div id="scrollElementSix">This is scroll Element Four</div>
    <div id="scrollElementSeven">This is scroll Element Four</div>
    <div id="scrollElementEight">This is scroll Element Four</div>
    <div id="scrollElementNine">This is scroll Element Four</div>
    <div id="scrollElementTen">This is scroll Element Four</div>
    <div id="scrollElementEleven">This is scroll Element Four</div>
    <div class="scrollElement">This is a scrollElement class item.</div>
    <div class="scrollElement">This is a scrollElement class item.</div>
    <div class="scrollElement">This is a scrollElement class item.</div>
    <div class="scrollElement">This is a scrollElement class item.</div>
    <div class="scrollElement">This is a scrollElement class item.</div>
    <div class="scrollElement">This is a scrollElement class item.</div>
    <div class="scrollElement">This is a...

CSS

#content {
    display:table;
}
#openingDescription {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:#FFA837;
}
#continueButton {
    position:absolute;
    bottom:0;
    margin:auto;
    width:100%;
    text-align:center;
}
#continueButton input {
    color:#000;
    background-color:#fff;
    padding:5px;
    border:0;
    border-radius:3px;
    margin-bottom:5px;
    -o-transition:all .3s ease;
    -moz-transition:all .3s ease;
    -webkit-transition:all .3s ease;
    -ms-transition:all .3s ease;
    transition:all .3s ease;
    outline:none;
}
#continueButton input:hover {
    background-color:#eee;
}
#openingMessage {
    width:300px;
    color:#fff;
    margin:auto;
}
html, body {
    height:500%;
    height:500vh;
    width:100%;
    padding:0;
    margin:0;
    overflow:hidden;
    background-color:#ddd;
}
#scrollElementOne, #scrollElementTwo, #scrollElementThree, #scrollElementFour, .scrollElement, #scrollElementFive, #scrollElementSix, #scrollElementSeven, #scrollElementEight, #scrollElementNine, #scrollElementTen, #scrollElementEleven {
    background-color:#fff;
    color:#000;
    padding:5px;
    width:75px;
    display:none;
}

JavaScript

var alreadyScrolled = false;
//these are the elements that are tracked
var elements = [];
//ids of the elements that you want to track
var ids = ['scrollElementOne', 'scrollElementTwo', 'scrollElementThree', 'scrollElementFour', 'scrollElementFive', 'scrollElementSix', 'scrollElementSeven', 'scrollElementEight', 'scrollElementNine', 'scrollElementTen', 'scrollElementEleven'];
//class names of the elements that you want to track
var classNames = ['scrollElement'];

window.onload = function () {
    /*collect all the divs that
    you want to be alerted when
    they enter the viewport...*/
    var scrollHeight = document.documentElement.scrollHeight;
    var scrollWidth = document.documentElement.scrollWidth;
    for (var i = 0; i != ids.length; i++) {
        elements.push(document.getElementById(ids[i]));
    }
    for (var i = 0; i != classNames.length; i++) {
        elements.push(document.getElementsByClassName('scrollElement')[i]);
    }
    for (var i = 0; i != elements.length; i++) {
        elements[i].style.position = 'absolute';
        elements[i].style.top = Math.floor(Math.random() * scrollHeight) + 'px';
        elements[i].style.left = Math.floor(Math.random() * scrollWidth) + 'px';
    }
};

window.onscroll = function () {
    for (var i = 0; i != elements.length; i++) {
        if (elements[i].getBoundingClientRect().top <= window.innerHeight * 0.75 && elements[i].getBoundingClientRect().top > 0) {
            elements[i].style.backgroundColor = '#ff0000';
            console.log('Element ' + i + ' is in the viewport');
        } else {
            console.log('Element ' + i + ' is outside of the viewport');
            elements[i].style.backgroundColor = '#fff';
        }
    }
};