Skip to content

Commit

Permalink
fix: enable paroller.js only when scrolling, added CSS transition opt…
Browse files Browse the repository at this point in the history 
…ion, added new demo links to index.html
  • Loading branch information
Tanja Gomilar authored and Tanja Gomilar committed Jan 24, 2019
1 parent 87015f9 commit c4845e9
Show file tree
Hide file tree
Showing 6 changed files with 52 additions and 23 deletions.
11 changes: 8 additions & 3 deletions README.md
View file
Expand Up @@ -7,7 +7,7 @@ A lightweight jQuery plugin that enables parallax scrolling effect
- Mobile ready
- Easy to use

**DEMO:** [Example page](https://tgomilar.github.io/paroller.js/)
**DEMO:** [Demo](https://tgomilar.github.io/paroller.js/), [Example page](https://alveus.si/en), [Example page](https://whitetailgin.com/)

## Install
Before closing ```</body>``` element include:
Expand Down Expand Up @@ -73,6 +73,7 @@ You can control parallax effect by data-paroller-* or jQuery values.
| data-paroller-factor-lg | factorLg | number (+/-) | 0 |
| data-paroller-type | type | background, foreground | background |
| data-paroller-direction | direction | vertical, horizontal | vertical |
| data-paroller-transition | transition | CSS transition | translate 0.1s ease |

### data-paroller-factor
Sets speed and distance of element's parallax effect on scroll. Value can be positive (0.3) or negative (-0.3). Less means slower. Different sign (+/-) means different direction (up/down, left/right).
Expand All @@ -89,6 +90,9 @@ Sets paroller factor for selected breakpoint.
| Medium | data-paroller-factor-md | factorMd | <=1024px|
| Large | data-paroller-factor-lg | factorLg| <=1200px|
| Extra Large | data-paroller-factor-xl | factorxl| <=1920px|

### data-paroller-transition
Only effects elements with paroller.js type set to foreground!

### JavaScript
```javascript
Expand All @@ -110,9 +114,10 @@ $(".paroller, [data-paroller-factor]").paroller({
factorSm: 0.2, // factorXs, factorSm, factorMd, factorLg, factorXl
factorMd: 0.3, // factorXs, factorSm, factorMd, factorLg, factorXl
factorLg: 0.4, // factorXs, factorSm, factorMd, factorLg, factorXl
factorXl: 0.5 // factorXs, factorSm, factorMd, factorLg, factorXl
factorXl: 0.5 // factorXs, factorSm, factorMd, factorLg, factorXl
type: 'foreground', // background, foreground
direction: 'horizontal' // vertical, horizontal
direction: 'horizontal',// vertical, horizontal
transition: 'translate 0.1s ease' // CSS transition, added on elements where type:'foreground'
});
```

Expand Down
35 changes: 22 additions & 13 deletions dist/jquery.paroller.js
View file
@@ -1,5 +1,5 @@
/**
* jQuery plugin paroller.js v1.4.4
* jQuery plugin paroller.js v1.4.5
* https://github.com/tgomilar/paroller.js
* preview: https://tgomilar.github.io/paroller/
**/
Expand Down Expand Up @@ -28,23 +28,23 @@
bgHorizontal: function (elem, bgOffset) {
return elem.css({'background-position': -bgOffset + 'px' + ' center'});
},
vertical: function (elem, elemOffset, oldTransform) {
vertical: function (elem, elemOffset, transition, oldTransform) {
(oldTransform === 'none' ? oldTransform = '' : true);
return elem.css({
'-webkit-transform': 'translateY(' + elemOffset + 'px)' + oldTransform,
'-moz-transform': 'translateY(' + elemOffset + 'px)' + oldTransform,
'transform': 'translateY(' + elemOffset + 'px)' + oldTransform,
'transition': 'transform linear',
'transition': transition,
'will-change': 'transform'
});
},
horizontal: function (elem, elemOffset, oldTransform) {
horizontal: function (elem, elemOffset, transition, oldTransform) {
(oldTransform === 'none' ? oldTransform = '' : true);
return elem.css({
'-webkit-transform': 'translateX(' + elemOffset + 'px)' + oldTransform,
'-moz-transform': 'translateX(' + elemOffset + 'px)' + oldTransform,
'transform': 'translateX(' + elemOffset + 'px)' + oldTransform,
'transition': 'transform linear',
'transition': transition,
'will-change': 'transform'
});
}
Expand Down Expand Up @@ -113,6 +113,7 @@
factorMd: 0, // - to +
factorLg: 0, // - to +
factorXl: 0, // - to +
transition: 'translate 0.1s ease', // CSS transition
type: 'background', // foreground
direction: 'vertical' // horizontal
}, options);
Expand All @@ -125,11 +126,13 @@

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 = setMovement.factor($this, width, options);
var factor = 0;
var bgOffset = setMovement.bgOffset(offset, factor);
var transform = setMovement.transform(offset, factor, windowHeight, height);

Expand All @@ -143,10 +146,10 @@
}
else if (type === 'foreground') {
if (direction === 'vertical') {
setDirection.vertical($this, transform, oldTransform);
setDirection.vertical($this, transform, transition, oldTransform);
}
else if (direction === 'horizontal') {
setDirection.horizontal($this, transform, oldTransform);
setDirection.horizontal($this, transform, transition, oldTransform);
}
}

Expand Down Expand Up @@ -177,17 +180,23 @@
else if ((type === 'foreground') && (scrolling <= documentHeight)) {
clearPositions.foreground($this);
if (direction === 'vertical') {
setDirection.vertical($this, transform);
setDirection.vertical($this, transform, transition);
}
else if (direction === 'horizontal') {
setDirection.horizontal($this, transform);
setDirection.horizontal($this, transform, transition);
}
}
});

$(window).on('scroll', function () {
var scrolling = $(this).scrollTop();
documentHeight = $(document).height();
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);
Expand All @@ -207,10 +216,10 @@
}
else if ((type === 'foreground') && (scrolling <= documentHeight)) {
if (direction === 'vertical') {
setDirection.vertical($this, transform, oldTransform);
setDirection.vertical($this, transform, transition, oldTransform);
}
else if (direction === 'horizontal') {
setDirection.horizontal($this, transform, oldTransform);
setDirection.horizontal($this, transform, transition, oldTransform);
}
}
});
Expand Down
2 changes: 1 addition & 1 deletion dist/jquery.paroller.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

23 changes: 19 additions & 4 deletions index.html
View file
Expand Up @@ -158,6 +158,7 @@ <h2>Usage</h2>
factorXs: 0.1, // multiplier for scrolling speed and offset
type: 'foreground', // background, foreground
direction: 'horizontal' // vertical, horizontal
transition: 'transform 0.2s ease-in' // CSS transition
});
</pre>

Expand All @@ -178,15 +179,15 @@ <h3>Via data attributes</h3>
<table>
<tr>
<td>data-paroller-factor</td>
<td>Sets elements offset and speed. It can be positive (0.3)
<td>Sets offset and speed. It can be positive (0.3)
or negative (-0.3).
Less means slower. <br>
<code>&lt;div data-paroller-factor="0.3"&gt;&lt;/div&gt;</code>
</td>
</tr>
<tr>
<td>data-paroller-type</td>
<td> This attribute has two values <i>background</i> and <i>foreground</i>.<br>
<td>This attribute has two values <i>background</i> and <i>foreground</i>.<br>
If not set the default value is <i>background</i>. <br>
<code>&lt;div data-paroller-factor="0.3"
data-paroller-type="foreground"&gt;&lt;/div&gt;</code>
Expand All @@ -199,6 +200,13 @@ <h3>Via data attributes</h3>
<code>&lt;div data-paroller-factor="0.3" data-paroller-direction="horizontal"&gt;&lt;/div&gt;</code>
</td>
</tr>
<tr>
<td>data-paroller-transition</td>
<td>Sets CSS transition on elements with paroller <b>type</b> set to <b>foreground</b>.<br>
If not used the default value is set to: <i>translate 0.1s ease</i>. <br>
<code>&lt;div data-paroller-type="foreground" data-paroller-transition="all 0.2s ease-in"&gt;&lt;/div&gt;</code>
</td>
</tr>
</table>
</div>

Expand All @@ -216,6 +224,7 @@ <h3>Via JavaScript</h3>
factorLg: 0.3, // multiplier for scrolling speed and offset if window width is <=1200px
type: 'foreground', // background, foreground
direction: 'horizontal' // vertical, horizontal
transition: 'translate 0.1s ease' // CSS transition, added on elements where type:'foreground'
});
</pre>
</div>
Expand All @@ -234,6 +243,7 @@ <h2>Demo</h2>
data-paroller-factor-xs="-0.1"
data-paroller-type="foreground"
data-paroller-direction="horizontal"
data-paroller-transition="transform .2s linear"
>
👋 Heola! こんにちは! Ahoj! Cześć! Olá!
</h6>
Expand All @@ -249,7 +259,8 @@ <h5>html</h5>
data-paroller-factor-sm="-0.2"<br>
data-paroller-factor-xs="-0.1"<br>
data-paroller-type="foreground"<br>
data-paroller-direction="horizontal"
data-paroller-direction="horizontal"<br>
data-paroller-transition="transform .2s linear"
</div>
<div>
<h5>js</h5>
Expand Down Expand Up @@ -475,7 +486,11 @@ <h5>js</h5>
</div>
</div>

<h6 class="mega align-center" data-paroller-factor="0.1" data-paroller-type="foreground">
<h6 class="mega align-center" data-paroller-factor="0.1"
data-paroller-factor-xs="0.05"
data-paroller-factor-sm="-0.05"
data-paroller-factor-md="0.05"
data-paroller-type="foreground">
Scrolling is fun ✌️
</h6>
<div class="show-more"><i class="fa fa-code"></i></div>
Expand Down
2 changes: 1 addition & 1 deletion package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
@@ -1,6 +1,6 @@
{
"name": "paroller.js",
"version": "1.4.4",
"version": "1.4.5",
"description": "Parallax scrolling jQuery plugin",
"main": "dist/jquery.paroller.js",
"scripts": {
Expand Down

0 comments on commit c4845e9

Please sign in to comment.