29. jQuery: Landing Page

index.html

@@ -40,6 +40,7 @@ <h5 class="point-title">Mobile enabled</h5>
                 <p class="point-description">Listen to your music on the go. This streaming service is available on all mobile platforms.</p>
             </div>
         </section>
+        <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
         <script src="scripts/landing.js"></script>
     </body>
 </html>

scripts/landing.js

@@ -1,29 +1,24 @@
-var pointsArray = document.getElementsByClassName('point');
-
-var animatePoints = function(points) {
-    var revealPoint = function(index) {
-        points[index].style.opacity = 1;
-        points[index].style.transform = "scaleX(1) translateY(0)";
-        points[index].style.msTransform = "scaleX(1) translateY(0)";
-        points[index].style.WebkitTransform = "scaleX(1) translateY(0)";   
+var animatePoints = function() {
+    var revealPoint = function() {
+        $(this).css({
+            opacity: 1,
+            transform: 'scaleX(1) translateY(0)'
+        });   
     };
 
-    for (var i = 0; i < points.length; i++) {
-        revealPoint(i);
-    }
+    $.each($('.point'), revealPoint);
 };
 
-window.onload = function() {
-    if (window.innerHeight > 950) {
-        animatePoints(pointsArray);
+$(window).load(function() {
+    if ($(window).height() > 950) {
+        animatePoints();
     }
 
-    var sellingPoints = document.getElementsByClassName('selling-points')[0];
-    var scrollDistance = sellingPoints.getBoundingClientRect().top - window.innerHeight + 200;
+    var scrollDistance = $('.selling-points').offset().top - $(window).height() + 200;
 
-    window.addEventListener("scroll", function(event) {
-        if (document.body.scrollTop >= scrollDistance) {
-            animatePoints(pointsArray);   
+    $(window).scroll(function(event) {
+        if ($(window).scrollTop() >= scrollDistance) {
+            animatePoints();   
         }
     });
-}
+});