SUSE/machinery

View on GitHub
manual/docs/js/parallaxImg.js

Summary

Maintainability
B
6 hrs
Test Coverage
/* Parallax Images Scroll - by
╱╱╱╱╱╱╱╱╱╱╭╮╭╮╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╭╮
╱╱╱╱╱╱╱╱╱╭╯╰┫┃╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱┃┃
╭━━┳╮╱╭┳━╋╮╭┫╰━┳┳━━╮╭━━┳━━┳━╮╭━━┫╰━┳━━┳━━━╮
┃╭━┫┃╱┃┃╭╮┫┃┃╭╮┣┫╭╮┃┃━━┫╭╮┃╭╮┫╭━┫╭╮┃┃━╋━━┃┃
┃╰━┫╰━╯┃┃┃┃╰┫┃┃┃┃╭╮┃┣━━┃╭╮┃┃┃┃╰━┫┃┃┃┃━┫┃━━┫
╰━━┻━╮╭┻╯╰┻━┻╯╰┻┻╯╰╯╰━━┻╯╰┻╯╰┻━━┻╯╰┻━━┻━━━╯
╱╱╱╭━╯┃///////////////////
╱╱╱╰━━╯http://cynt.co.nf/
////////////////////////
*/
$(document).ready(function (){
  $(".parallax-move").css({
    'opacity' : 0,
    position: "absolute",
    "z-index": 1
  });
})

$(window).load(function() {
  initialSetup();
  /* Scroll event to trigger the function */
  $(window).bind('scroll',function(e){
    parallaxImgScroll(); 
  });
});

var parallaxElementsArray = [];
var alpha = 0;
var lastestScrolled = 0;
var scrolled = 0;

/* Initial setup of the elements */
function initialSetup() {
  $(".parallax-img-container").each(function() {
    var widthOfContainer = $(this).width();
    var heightOfContainer = $(this).height();
    var setOfElements = $(this).children();
    for (i = 0; i < setOfElements.length ; i++) {
      var classApplied = $(setOfElements[i]).attr('class');
      if (classApplied != "parallax-move") {
        $(setOfElements[i]).css({
          "z-index": 100,
          "position": "relative"
        })
      } else {
        var ranNumSpeed = Math.floor((Math.random() * 100) + 30);
        if(ranNumSpeed < 10) {
          var scrollSpeed = "0.0" + ranNumSpeed;  
        } else {
          var scrollSpeed = "0." + ranNumSpeed;
        }

        if ($(setOfElements[i]).hasData('vertical-position')) {
          ranNumTopPosition = $(setOfElements[i]).data('vertical-position');
        } else {
          var ranNumTopPosition = Math.floor(Math.random() * (heightOfContainer - (heightOfContainer/4)) + 1);  
        }
        
        if ($(setOfElements[i]).hasData('horizontal-position')) {
          var ranNumBottomPosition = $(setOfElements[i]).data('horizontal-position');
        } else {
          var ranNumBottomPosition = Math.floor(Math.random() * (widthOfContainer - 200) + 50);  
        }
        
        parallaxElementsArray.push({
          "element" : $(setOfElements[i]),
          "scrollSpeed" : scrollSpeed,
          "horizontalPagePosition" : ranNumBottomPosition,
          "verticalPagePosition" : ranNumTopPosition,
          "opacity" : alpha
        });

        /* Apply initial position */
        $(setOfElements[i]).css({
          "bottom": ranNumTopPosition,
          "left": ranNumBottomPosition
        })
      }
    }
  })

  $(".parallax-img-container").css({
    position: "relative",
    overflow: "hidden"
  });

}

/* Move the images while scrolling the page */
function parallaxImgScroll(){

  for (i = 0; i < parallaxElementsArray.length; i++) {
    
    scrolled = $(window).scrollTop();
    alpha = parallaxElementsArray[i].opacity;
    /* Calculate the distance between the element and the top of the document */
    var distanceFromTop = $(parallaxElementsArray[i].element).offset().top;

    if (isVisible(distanceFromTop)) {
      /* make the element appear progressively */
      /* if scrolling down */
      if (lastestScrolled < scrolled) {
        alpha = alpha + 0.02;
        if (alpha > 1) {
          alpha = 1;
        }
      } else if (scrolled == 0) {
        alpha = 0;
      /* else.. if scrolling up */
      } else {
        alpha = alpha - 0.04;
        if (alpha < 0) {
          alpha = 0;
        }
      }
      $(parallaxElementsArray[i].element).css({
        'bottom': (parallaxElementsArray[i].verticalPagePosition + (scrolled * parallaxElementsArray[i].scrollSpeed))+'px',
        "opacity" : alpha
        });

      /* save the opacity in the elements object */
      parallaxElementsArray[i].opacity = alpha
    }      
  }
  lastestScrolled = scrolled;

  /* check if the element is visible on screen */
  function isVisible(distance) {
    if (distance < scrolled) {
      return false;
    } else if ([scrolled + $(window).height()] < distance) {
      return false;
    } else {
      return true;
    }
  }

}

/* check if a data attribute exists */
$.fn.hasData = function(attrName) {
  return (typeof $(this).data(attrName) != 'undefined');
};