Skip to content

Commit

Permalink
removed bugs
Browse files Browse the repository at this point in the history
  • Loading branch information
@tgomilar
tgomilar committed Oct 1, 2020
1 parent 124236a commit b33010e
Show file tree
Hide file tree
Showing 3 changed files with 67 additions and 2,197 deletions.
120 changes: 58 additions & 62 deletions dist/jquery.paroller.js
View file
@@ -1,9 +1,8 @@
'use strict';

/**
* jQuery plugin paroller.js v1.4.6
* jQuery plugin paroller.js v1.4.7
* https://github.com/tgomilar/paroller.js
* preview: https://tgomilar.github.io/paroller/
* author: Tanja Gomilar
**/
(function (factory) {
'use strict';
Expand All @@ -18,12 +17,12 @@
})(function ($) {
'use strict';

let working = false;
let scrollAction = function() {
var working = false;
var scrollAction = function() {
working = false;
};

let setDirection = {
var setDirection = {
bgVertical: function (elem, bgOffset) {
return elem.css({'background-position': 'center ' + -bgOffset + 'px'});
},
Expand All @@ -35,7 +34,7 @@
return elem.css({
'-webkit-transform': 'translateY(' + elemOffset + 'px)' + oldTransform,
'-moz-transform': 'translateY(' + elemOffset + 'px)' + oldTransform,
'transform': 'translate(0,' + elemOffset + 'px)' + oldTransform,
'transform': 'translateY(' + elemOffset + 'px)' + oldTransform,
'transition': transition,
'will-change': 'transform'
});
Expand All @@ -45,39 +44,39 @@
return elem.css({
'-webkit-transform': 'translateX(' + elemOffset + 'px)' + oldTransform,
'-moz-transform': 'translateX(' + elemOffset + 'px)' + oldTransform,
'transform': 'translate(' + elemOffset + 'px, 0)' + oldTransform,
'transform': 'translateX(' + elemOffset + 'px)' + oldTransform,
'transition': transition,
'will-change': 'transform'
});
}
};

let setMovement = {
var setMovement = {
factor: function (elem, width, options) {
let dataFactor = elem.data('paroller-factor');
let factor = (dataFactor) ? dataFactor : options.factor;
var dataFactor = elem.data('paroller-factor');
var factor = (dataFactor) ? dataFactor : options.factor;
if (width < 576) {
let dataFactorXs = elem.data('paroller-factor-xs');
let factorXs = (dataFactorXs) ? dataFactorXs : options.factorXs;
var dataFactorXs = elem.data('paroller-factor-xs');
var factorXs = (dataFactorXs) ? dataFactorXs : options.factorXs;
return (factorXs) ? factorXs : factor;
}
else if (width <= 768) {
let dataFactorSm = elem.data('paroller-factor-sm');
let factorSm = (dataFactorSm) ? dataFactorSm : options.factorSm;
var dataFactorSm = elem.data('paroller-factor-sm');
var factorSm = (dataFactorSm) ? dataFactorSm : options.factorSm;
return (factorSm) ? factorSm : factor;
}
else if (width <= 1024) {
let dataFactorMd = elem.data('paroller-factor-md');
let factorMd = (dataFactorMd) ? dataFactorMd : options.factorMd;
var dataFactorMd = elem.data('paroller-factor-md');
var factorMd = (dataFactorMd) ? dataFactorMd : options.factorMd;
return (factorMd) ? factorMd : factor;
}
else if (width <= 1200) {
let dataFactorLg = elem.data('paroller-factor-lg');
let factorLg = (dataFactorLg) ? dataFactorLg : options.factorLg;
var dataFactorLg = elem.data('paroller-factor-lg');
var factorLg = (dataFactorLg) ? dataFactorLg : options.factorLg;
return (factorLg) ? factorLg : factor;
} else if (width <= 1920) {
let dataFactorXl = elem.data('paroller-factor-xl');
let factorXl = (dataFactorXl) ? dataFactorXl : options.factorXl;
var dataFactorXl = elem.data('paroller-factor-xl');
var factorXl = (dataFactorXl) ? dataFactorXl : options.factorXl;
return (factorXl) ? factorXl : factor;
} else {
return factor;
Expand All @@ -91,7 +90,7 @@
}
};

let clearPositions = {
var clearPositions = {
background: function (elem) {
return elem.css({'background-position': 'unset'});
},
Expand All @@ -104,48 +103,39 @@
};

$.fn.paroller = function (options) {
const windowHeight = $(window).height();
const documentHeight = $(document).height();
var windowHeight = $(window).height();
var documentHeight = $(document).height();

// default options
options = $.extend({
var options = $.extend({
factor: 0, // - to +
factorXs: 0, // - to +
factorSm: 0, // - to +
factorMd: 0, // - to +
factorLg: 0, // - to +
factorXl: 0, // - to +
transition: 'transform .1s ease', // CSS transition
transition: 'translate 0.1s ease', // CSS transition
type: 'background', // foreground
direction: 'vertical' // horizontal
}, options);

return this.each(function () {
const $this = $(this);
let height = $this.outerHeight();
let width = $(window).width();
let elemTop = $this.offset().top;
let scrollOffset = 0;

let withScrollOffset = function(scrollTop, transform) {
if (! scrollTop) {
scrollOffset = transform;
}
// console.log(`offset ${scrollOffset} => ${transform - scrollOffset}`)
return transform - scrollOffset;
}

const dataType = $this.data('paroller-type');
const dataDirection = $this.data('paroller-direction');
const dataTransition = $this.data('paroller-transition');
const oldTransform = $this.css('transform');

const transition = (dataTransition) ? dataTransition : options.transition;
const type = (dataType) ? dataType : options.type;
const direction = (dataDirection) ? dataDirection : options.direction;
let factor = 0;
let bgOffset = setMovement.bgOffset(elemTop, factor);
let transform = setMovement.transform(elemTop, factor, windowHeight, height);
var $this = $(this);
var width = $(window).width();
var offset = $this.offset().top;
var height = $this.outerHeight();

var dataType = $this.data('paroller-type');
var dataDirection = $this.data('paroller-direction');
var dataTransition = $this.data('paroller-transition');
var oldTransform = $this.css('transform');

var transition = (dataTransition) ? dataTransition : options.transition;
var type = (dataType) ? dataType : options.type;
var direction = (dataDirection) ? dataDirection : options.direction;
var factor = 0;
var bgOffset = setMovement.bgOffset(offset, factor);
var transform = setMovement.transform(offset, factor, windowHeight, height);

if (type === 'background') {
if (direction === 'vertical') {
Expand All @@ -165,14 +155,13 @@
}

$(window).on('resize', function () {
let scrolling = $(this).scrollTop();
var scrolling = $(this).scrollTop();
width = $(window).width();
elemTop = $this.offset().top;
offset = $this.offset().top;
height = $this.outerHeight();
factor = setMovement.factor($this, width, options);

bgOffset = Math.round(elemTop * factor);
let transform = withScrollOffset($(document).scrollTop(), Math.round((elemTop - (windowHeight / 2) + height) * factor));
bgOffset = Math.round(offset * factor);
transform = Math.round((offset - (windowHeight / 2) + height) * factor);

if (! working) {
window.requestAnimationFrame(scrollAction);
Expand All @@ -199,11 +188,18 @@
}
});

$(window).on('load scroll', function () {
let scrolling = $(this).scrollTop();
let scrollTop = $(document).scrollTop();
factor = setMovement.factor($this, width, options);
let transform = withScrollOffset(scrollTop, Math.round(((elemTop - (windowHeight / 2) + height) - scrolling) * factor));
$(window).on('scroll', function () {
var scrolling = $(this).scrollTop();
var scrollTop = $(document).scrollTop();

if (scrollTop === 0) {
factor = 0;
} else {
factor = setMovement.factor($this, width, options);
}

bgOffset = Math.round((offset - scrolling) * factor);
transform = Math.round(((offset - (windowHeight / 2) + height) - scrolling) * factor);

if (! working) {
window.requestAnimationFrame(scrollAction);
Expand All @@ -229,4 +225,4 @@
});
});
};
});
});

0 comments on commit b33010e

Please sign in to comment.