Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit 16d1f15

Browse filesBrowse files
ChrisCavsChrisCavs
committed
catchup commit
0 parents  commit 16d1f15
Copy full SHA for 16d1f15

10 files changed

+1543
-0
lines changed

‎.gitignore

Copy file name to clipboard
+2Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
node_modules/
2+
test/

‎LICENSE.md

Copy file name to clipboard
+9Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
MIT License
2+
3+
Copyright (c) 2018 Christopher Cavalea
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
6+
7+
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
8+
9+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

‎README.md

Copy file name to clipboard
+146Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
# Rallax.js
2+
3+
[![rallax.js on NPM](https://img.shields.io/npm/v/rallax.js.svg?style=flat-square)](https://www.npmjs.com/package/rallax.js)
4+
5+
Dead-simple parallax scrolling.
6+
7+
[See a demo.](https://chriscavs.github.io/rallax-demo/)
8+
9+
## Usage
10+
11+
Follow these steps to get started:
12+
13+
1. [Overview](#overview)
14+
2. [Install](#install)
15+
3. [Import](#import)
16+
4. [Call](#call)
17+
5. [Review Options](#options)
18+
19+
### Overview
20+
21+
Rallax.js creates a parallax effect given a target HTML element and an image location. It will create an `<img>` element, and position it `absolute` behind your target element.
22+
23+
As the user scrolls, the position of the `<img>` element will change relative to the target's location, creating the desired effect.
24+
25+
### Install
26+
27+
Using NPM, install Rallax, and save it to your `package.json` dependencies.
28+
29+
```bash
30+
$ npm install rallax.js --save
31+
```
32+
33+
### Import
34+
35+
Import Rallax, naming it according to your preference.
36+
37+
```es6
38+
import rallax from 'rallax.js'
39+
```
40+
41+
### Call
42+
43+
To generate the desired effect, call Rallax, passing in your target-selector, image location, and your desired options.
44+
45+
```es6
46+
// target: <div class="parallax"></div>
47+
// image location: "./test-image.jpg"
48+
49+
const options = { speed: 0.4 }
50+
51+
rallax(".parallax", "./test-image.jpg", options)
52+
```
53+
54+
**Note**: Rallax.js does not make any assumptions regarding the styling of the target element. **In order to see the effect, you must set either a transparent or slighty-transparent background on the target.**
55+
56+
## Options
57+
58+
You are not required to pass any options. All options come with sensible defaults, shown below:
59+
60+
```es6
61+
{
62+
speed: 0.3,
63+
offset: {},
64+
zIndex: -1000
65+
}
66+
```
67+
68+
Explanation of each option follows:
69+
70+
* [speed](#speed)
71+
* [offset](#offset)
72+
* [zIndex](#zIndex)
73+
* [minPixels](#minPixels)
74+
* [maxPixels](#maxPixels)
75+
76+
### speed
77+
78+
Accepts an `integer` between `0` and `1`.
79+
80+
At a speed of `0`, the image will scroll with the target.
81+
At a speed of `1`, the image will appear fixed in place.
82+
83+
### offset
84+
85+
Accepts an `object`.
86+
87+
The `offset` option works similar to the [background-position](https://developer.mozilla.org/en-US/docs/Web/CSS/background-position) CSS property. `offset` will specify the **center** of the image relative to the target element.
88+
89+
`offset` is declared with two of the following keys: `top`, `bot`, `left`, `right`, followed by a an `integer` representing the number of pixels.
90+
91+
```es6
92+
// position the center of the image 10px from the top of the
93+
// target, and 40 px from the left.
94+
95+
rallax(".parallax", "./test-image.jpg", {
96+
offset: {
97+
top: 10,
98+
left: 40
99+
}
100+
})
101+
102+
// by default, the image will be centered relative to the target
103+
104+
rallax(".parallax", "./test-image.jpg")
105+
```
106+
107+
### zIndex
108+
109+
Accepts an `integer`.
110+
111+
`zIndex` specifies the [z-index](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index) property of the parallax image.
112+
113+
### maxPixels
114+
115+
Accepts an `integer`, specifying the maximum pixel width of the screen before 'turning off' the parallax effect.
116+
117+
Set `maxPixels` if you would like to turn off the parallax effect for very large screens.
118+
119+
Once turned off, the parallax image will appear as a background image for the target.
120+
121+
### minPixels
122+
123+
Accepts an `integer`, specifying the minimum pixel width of the screen before 'turning off' the parallax effect.
124+
125+
Set `minPixels` if you would like to turn off the parallax effect for very small screens (such as mobile devices).
126+
127+
Once turned off, the parallax image will appear as a background image for the target.
128+
129+
## Browser Support
130+
131+
Rallax depends on the following browser APIs:
132+
133+
* [requestAnimationFrame](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame)
134+
135+
Consequently, it supports the following natively:
136+
137+
* Chrome 24+
138+
* Firefox 23+
139+
* Safari 6.1+
140+
* Opera 15+
141+
* IE 10+
142+
* iOS Safari 7.1+
143+
144+
## License
145+
146+
[MIT](https://opensource.org/licenses/MIT). © 2018 Christopher Cavalea

‎dist/rallax.js

Copy file name to clipboard
+145Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
(function (global, factory) {
2+
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
3+
typeof define === 'function' && define.amd ? define(factory) :
4+
(global.rallax = factory());
5+
}(this, (function () { 'use strict';
6+
7+
var classCallCheck = function (instance, Constructor) {
8+
if (!(instance instanceof Constructor)) {
9+
throw new TypeError("Cannot call a class as a function");
10+
}
11+
};
12+
13+
var createClass = function () {
14+
function defineProperties(target, props) {
15+
for (var i = 0; i < props.length; i++) {
16+
var descriptor = props[i];
17+
descriptor.enumerable = descriptor.enumerable || false;
18+
descriptor.configurable = true;
19+
if ("value" in descriptor) descriptor.writable = true;
20+
Object.defineProperty(target, descriptor.key, descriptor);
21+
}
22+
}
23+
24+
return function (Constructor, protoProps, staticProps) {
25+
if (protoProps) defineProperties(Constructor.prototype, protoProps);
26+
if (staticProps) defineProperties(Constructor, staticProps);
27+
return Constructor;
28+
};
29+
}();
30+
31+
var listening = false;
32+
var targets = [];
33+
34+
var defaultOptions = {
35+
speed: 0.3,
36+
disable: function disable() {
37+
return window.innerWidth < 400;
38+
},
39+
onDisable: function onDisable() {},
40+
enable: function enable() {},
41+
onEnable: function onEnable() {}
42+
};
43+
44+
var addListener = function addListener() {
45+
window.addEventListener('scroll', function (event) {
46+
controller(targets);
47+
});
48+
};
49+
50+
var controller = function controller(targets) {
51+
requestAnimationFrame(function () {
52+
targets.forEach(function (obj) {
53+
if (obj.disable() && obj.active) {
54+
return obj.stop();
55+
}
56+
57+
if (!obj.active && obj.enable()) {
58+
obj.start();
59+
}
60+
61+
if (obj.active) {
62+
obj.move();
63+
}
64+
});
65+
});
66+
};
67+
68+
var RallaxObj = function () {
69+
function RallaxObj(target, _ref) {
70+
var speed = _ref.speed,
71+
disable = _ref.disable,
72+
onDisable = _ref.onDisable,
73+
enable = _ref.enable,
74+
onEnable = _ref.onEnable;
75+
classCallCheck(this, RallaxObj);
76+
77+
this.speed = speed || defaultOptions.speed;
78+
this.disable = disable || defaultOptions.disable;
79+
this.onDisable = onDisable || defaultOptions.onDisable;
80+
this.enable = enable || defaultOptions.enable;
81+
this.onEnable = onEnable || defaultOptions.onEnable;
82+
83+
this.active = true;
84+
this.target = target;
85+
86+
if (typeof target === 'string') {
87+
this.target = document.querySelector('' + target);
88+
}
89+
90+
this.winHeight = window.innerHeight;
91+
this.getRect();
92+
93+
this.startScroll = this.targetR.top - this.winHeight > 0 ? this.targetR.top - this.winHeight : 0;
94+
}
95+
96+
createClass(RallaxObj, [{
97+
key: 'stop',
98+
value: function stop() {
99+
this.active = false;
100+
this.onDisable();
101+
}
102+
}, {
103+
key: 'start',
104+
value: function start() {
105+
this.active = true;
106+
this.onEnable();
107+
}
108+
}, {
109+
key: 'getTranslation',
110+
value: function getTranslation() {
111+
var dist = window.scrollY - this.startScroll;
112+
return dist * this.speed;
113+
}
114+
}, {
115+
key: 'getRect',
116+
value: function getRect() {
117+
this.targetR = this.target.getBoundingClientRect();
118+
return this.targetR;
119+
}
120+
}, {
121+
key: 'move',
122+
value: function move() {
123+
this.target.style.transform = 'translateY(' + this.getTranslation() + 'px)';
124+
}
125+
}]);
126+
return RallaxObj;
127+
}();
128+
129+
var rallax = (function (target) {
130+
var userOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
131+
132+
var rallax = new RallaxObj(target, userOptions);
133+
targets.push(rallax);
134+
135+
if (!listening) {
136+
addListener();
137+
listening = true;
138+
}
139+
140+
return rallax;
141+
});
142+
143+
return rallax;
144+
145+
})));

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.