/* Parallax Images Scroll - by
╱╱╱╱╱╱╱╱╱╱╭╮╭╮╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╭╮
╱╱╱╱╱╱╱╱╱╭╯╰┫┃╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱┃┃
╭━━┳╮╱╭┳━╋╮╭┫╰━┳┳━━╮╭━━┳━━┳━╮╭━━┫╰━┳━━┳━━━╮
┃╭━┫┃╱┃┃╭╮┫┃┃╭╮┣┫╭╮┃┃━━┫╭╮┃╭╮┫╭━┫╭╮┃┃━╋━━┃┃
┃╰━┫╰━╯┃┃┃┃╰┫┃┃┃┃╭╮┃┣━━┃╭╮┃┃┃┃╰━┫┃┃┃┃━┫┃━━┫
╰━━┻━╮╭┻╯╰┻━┻╯╰┻┻╯╰╯╰━━┻╯╰┻╯╰┻━━┻╯╰┻━━┻━━━╯
╱╱╱╭━╯┃/////////////////////////////////////
╱╱╱╰━━╯http://cynt.co.nf////////////////////
http://cyntss.github.io/Parallax-img-scroll/
////////////////////////////////////////////
V.1.2.5 - MIT license. Allowed for commercial
and personal use =D
*/
//reset the scroll to 0 (top of page)
$(window).on('beforeunload', function() {
$(window).scrollTop(0);
});
function parallaxImgScroll(settings) {
//if the user is setting the configuration
var default_settings = {
initialOpacity : 0, //from 0 to 1, e.g. 0.34 is a valid value. 0 = transparent, 1 = Opaque
opacitySpeed : 0.02, //values from 0.01 to 1 -> 0.01: slowly appears on screen; 1: appears as soon as the user scrolls 1px
pageLoader: false // boolean type
}
var parallaxSettings = $.extend({}, default_settings, settings);
//definition of essential variables [do not modify]
var parallaxElementsArray = [];
var lastestScrolled = 0;
var scrolled = 0;
$(document).ready(function (){
$(".parallax-move").css({
'opacity' : 0,
position: "absolute"
});
if (parallaxSettings.pageLoader) {
var loadingMaringTop = $(window).height() / 2
$("body").wrapInner( "
");
$("body").css({
height: '100%',
width: '100%'
})
$("body").prepend("")
$(".parallaxImg-loading-page").css({
position: 'absolute',
top: '0px',
left: '0px',
width: '100%',
height: '100%',
background: '#333',
})
$(".parallaxImg-loading-page").prepend("Loading Page
")
$(".parallaxImg-loading-text").css({
width: '300px',
'margin-left': 'auto',
'margin-right': 'auto',
'text-align': 'center',
'padding-top': loadingMaringTop + 'px'
})
$(".parallaxImg-page").hide()
}
})
$(window).load(function() {
$(".parallax-move").css({
'opacity' : parallaxSettings.initialOpacity
});
if (parallaxSettings.pageLoader) {
$(".parallaxImg-loading-page").fadeOut('600', function() {
$(".parallaxImg-page").fadeIn()
$(this).remove()
parallaxImgInit();
})
}
else {
parallaxImgInit();
}
/* Scroll event to trigger the function */
$(window).bind('scroll',function(e){
parallaxImgScroll();
});
});
/* Initial setup of the elements */
function parallaxImgInit() {
$(".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"
})
}
// for all the elements that have the class "parallax-move"
else {
// if the element has a Speed declared
if ($(setOfElements[i]).hasData('ps-speed')) {
scrollSpeed = $(setOfElements[i]).data('ps-speed');
}
else {
var ranNumSpeed = Math.floor((Math.random() * 100) + 1);
if(ranNumSpeed < 10) {
var scrollSpeed = "0.0" + ranNumSpeed;
}
else {
var scrollSpeed = "0." + ranNumSpeed;
}
}
//if the element has a vertical position declared
if ($(setOfElements[i]).hasData('ps-vertical-position')) {
TopPosition = $(setOfElements[i]).data('ps-vertical-position');
}
else {
var TopPosition = Math.floor(Math.random() * (heightOfContainer - (heightOfContainer/4)) + 1);
}
//if the element has an horizontal position declared
if ($(setOfElements[i]).hasData('ps-horizontal-position')) {
var leftPosition = $(setOfElements[i]).data('ps-horizontal-position');
var rightPosition = undefined;
}
else if ($(setOfElements[i]).hasData('ps-horizontal-position-right')) {
var rightPosition = $(setOfElements[i]).data('ps-horizontal-position-right');
var leftPosition = undefined;
} else {
var leftPosition = Math.floor(Math.random() * (widthOfContainer - 100) + 50);
var rightPosition = undefined;
}
//if the element has a z-index declared
if ($(setOfElements[i]).hasData('ps-z-index')) {
var zPosition = $(setOfElements[i]).data('ps-z-index');
}
else {
var zPosition = Math.floor(Math.random() * 10 + 1);
}
parallaxElementsArray.push({
"element" : $(setOfElements[i]),
"scrollSpeed" : scrollSpeed,
"horizontalPagePosition" : leftPosition,
"horizontalPagePositionRight" : rightPosition,
"verticalPagePosition" : TopPosition,
"opacity" : parallaxSettings.initialOpacity,
"privateScrolled" : 0
});
/* Apply initial position */
console.log(leftPosition, rightPosition)
if (leftPosition) {
$(setOfElements[i]).css({
"bottom": TopPosition,
"left": leftPosition,
"z-index": zPosition
})
} else {
$(setOfElements[i]).css({
"bottom": TopPosition,
"right": rightPosition,
"z-index": zPosition
})
}
}
}
});
$(".parallax-img-container").css({
position: "relative",
overflow: "hidden"
});
}
/* Move the images while scrolling the page */
function parallaxImgScroll() {
scrolled = $(window).scrollTop();
for (i = 0; i < parallaxElementsArray.length; i++) {
alpha = parallaxElementsArray[i].opacity;
/* Calculate the distance between the element and the top of the document */
var distanceFromTop = $(parallaxElementsArray[i].element).offset().top;
var elementHeight = $(parallaxElementsArray[i].element).height();
if (isVisible(distanceFromTop, elementHeight)) {
/* if scrolling down */
if (lastestScrolled < scrolled) {
/* unless parallaxSettings.opacitySpeed = 1, make the element appear progressively */
if (parallaxSettings.initialOpacity != 1) {
alpha = alpha + parallaxSettings.opacitySpeed;
if (alpha > 1) {
alpha = 1;
}
} else {
alpha = parallaxSettings.initialOpacity;
}
//save the scrolling for this element
parallaxElementsArray[i].privateScrolled = parallaxElementsArray[i].privateScrolled + (scrolled - lastestScrolled);
}
else if (scrolled == 0) {
alpha = parallaxSettings.initialOpacity;
parallaxElementsArray[i].privateScrolled = 0;
/* else.. if scrolling up */
}
else {
/* unless parallaxSettings.opacitySpeed = 1, make the element appear progressively */
if (parallaxSettings.initialOpacity != 1) {
alpha = alpha - parallaxSettings.opacitySpeed;
if (alpha < parallaxSettings.initialOpacity) {
alpha = parallaxSettings.initialOpacity;
}
} else {
alpha = parallaxSettings.initialOpacity;
}
//save the scrolling for this element
parallaxElementsArray[i].privateScrolled = parallaxElementsArray[i].privateScrolled - (lastestScrolled - scrolled);
}
$(parallaxElementsArray[i].element).css({
"opacity" : alpha,
'bottom': (parallaxElementsArray[i].verticalPagePosition + (parallaxElementsArray[i].privateScrolled * parallaxElementsArray[i].scrollSpeed)) + 'px'
});
/* save the opacity in the elements object */
parallaxElementsArray[i].opacity = alpha;
}
}
lastestScrolled = scrolled;
/* check if the element is visible on screen */
function isVisible(distance, height) {
//if it went up and off the screen
if ([distance + height] < scrolled) {
return false;
}
//if if didnt appear from belog yet
else if ([scrolled + $(window).height()] < distance) {
return false;
}
//if it is being displayed on screen
else {
return true;
}
}
}
}
/* check if a data attribute exists */
$.fn.hasData = function(attrName) {
return (typeof $(this).data(attrName) != 'undefined');
};