├── README.md
├── bower.json
├── example
├── app.js
├── css
│ └── style.css
├── images
│ ├── cloud-pattern.jpg
│ ├── grey-pattern.png
│ └── rain-pattern.png
└── index.html
├── package.json
└── src
├── ngParallax.js
└── ngParallax.min.js
/README.md:
--------------------------------------------------------------------------------
1 | # ng-parallax
2 | [](https://cdnjs.com/libraries/ng-parallax)
3 |
4 | ### Ng2 Version
5 | There is a [Angular2 directive](https://github.com/allenRoyston/ng2-parallax "Angular2 directive"), but I haven't really been vigiliant about updating it. (I'm only one person - sorry).
6 |
7 | ### What Am I?!
8 | An easy way to implement parallax scrolling with Angularjs.
9 | - No dependencies
10 | - Responsive
11 | - Simple
12 | - Works for mobile! (Well, iPhones at least - haven't tested on an Android yet)
13 | - Tiny (only 292B)
14 |
15 |
16 | ### Usage
17 |
18 | <div ng-parallax pattern="myPattern" speed="0"> < /div>
19 |
20 |
21 | ### Version
22 | 1.1.3
23 |
24 | ### Updates
25 | - v1.1.3 - Merged changes from emelent.
26 | - v1.1.3 - Added support for use in Webpack/ComponentJS
27 | - v1.1.2 - Eliminated jankiness when using Macbook touchpads and touchscreens.
28 |
29 | ### Live Demo
30 | [Check it out](https://allenroyston.herokuapp.com/access/ng-parallax/index.html "Title")
31 |
32 |
33 | ### Dependencies
34 | - None! (Other than AngularJS).
35 |
36 | ### NPM / Bower
37 |
38 | npm install ng-parallax --save-dev
39 |
40 |
41 |
42 | bower install ng-simple-parallax --save
43 |
44 |
45 | ### Installation
46 | Include the module in your scripts.
47 |
48 | <script src="./src/ngParallax.min.js"> <script>
49 |
50 |
51 | Add ngParallax in your apps dependencies.
52 |
53 | var app = angular.module('myApp', ['ngParallax']);
54 |
55 |
56 | or include just like any other component in Webpack
57 |
58 |
59 | ### Parameters
60 |
61 | <div ng-parallax pattern="'imageLocation'" speed="[0-3]" reverse="[true/false]"> < /div>
62 |
63 |
64 | speed: 0-3 (slowest to fastest)
65 |
66 |
67 | - Setting the speed at 0 will lock the image in place.
68 | - ... unless it's iOS, in which case the image will act as a static image and scroll naturally.
69 | - Using negative numbers reverses the direction.
70 | - The speed is directly related to the image size, so tinker with your speed to get the right effect.
71 |
72 |
73 |
74 | License
75 | ----
76 |
77 | MIT - go nuts y'all.
78 |
--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "ng-simple-parallax",
3 | "version": "1.1.2",
4 | "homepage": "https://github.com/allenRoyston/ng-parallax",
5 | "authors": [
6 | "Allen R "
7 | ],
8 | "description": "Simple AngularJS module",
9 | "main": "src/ngParallax.js",
10 | "keywords": [
11 | "angularjs",
12 | "parallax",
13 | "scrolling",
14 | "royston"
15 | ],
16 | "license": "MIT",
17 | "ignore": [
18 | "**/.*",
19 | "node_modules",
20 | "bower_components",
21 | "test",
22 | "tests"
23 | ]
24 | }
--------------------------------------------------------------------------------
/example/app.js:
--------------------------------------------------------------------------------
1 | var app = angular.module('myApp', ['ngParallax']);
2 |
--------------------------------------------------------------------------------
/example/css/style.css:
--------------------------------------------------------------------------------
1 |
2 |
3 | .box{
4 | height: 2000px;
5 | width: 200px;
6 | float: left;
7 | padding: 10px;
8 | color: white;
9 | }
10 |
11 | .large-box{
12 | height: 500px;
13 | width: 40%;
14 | float: left;
15 | padding: 10px;
16 | }
17 |
18 |
19 | .container{
20 | float: left;
21 | width: 100%;
22 | height: auto;
23 | }
24 |
--------------------------------------------------------------------------------
/example/images/cloud-pattern.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/allenJynRoyston/ng-parallax/23db26c4e9d10877e3bb6b183f69a86cfb249404/example/images/cloud-pattern.jpg
--------------------------------------------------------------------------------
/example/images/grey-pattern.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/allenJynRoyston/ng-parallax/23db26c4e9d10877e3bb6b183f69a86cfb249404/example/images/grey-pattern.png
--------------------------------------------------------------------------------
/example/images/rain-pattern.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/allenJynRoyston/ng-parallax/23db26c4e9d10877e3bb6b183f69a86cfb249404/example/images/rain-pattern.png
--------------------------------------------------------------------------------
/example/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | ng-parallax directive
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 | ng-parallax demo
23 |
24 |
25 |
26 |
Basic Usage:
27 |
In Controller:
28 |
$scope.myPattern = 'images/cloud-pattern.jpg'
29 |
30 |
HTML:
31 |
<div ng-parallax pattern="myPattern" speed="0" ></div>
32 |
* speed 10-0 (slowest - fastest)
33 |
34 |
35 |
38 |
41 |
44 |
47 |
48 |
49 |
50 |
51 |
52 |
Reverse:
53 |
In Controller:
54 |
$scope.myPattern = 'images/rain-pattern.png'
55 |
56 |
HTML:
57 |
<div ng-parallax pattern="myPattern" speed="1" reverse="true" ></div>
58 |
59 |
60 |
63 |
66 |
69 |
72 |
73 |
74 |
75 |
76 |
77 |
Layered Parallax:
78 |
79 |
HTML:
80 |
81 | <div style="width: 100%; height: 800px">
82 | <div style='width: 100%; height: 100%; position: absolute; ' >
83 | <div ng-parallax pattern="'images/grey-pattern.png'" speed="0"></div>
84 | </div>
85 | <div style='width: 50%; height: 50%; position: absolute; '>
86 | <div ng-parallax pattern="'images/rain-pattern.png'" speed="15" reverse="true"></div>
87 | </div>
88 | <div style='width: 25%; height: 25%; position: absolute; '>
89 | <div ng-parallax pattern="'images/cloud-pattern.jpg'" speed="0" reverse="true"></div>
90 | </div>
91 | </div>
92 |
93 |
94 |
95 |
96 |
107 |
108 |
109 |
110 |
111 |
112 |
Notes of Interest:
113 |
- Responsive, fits in any container.
114 |
- Can use images without being scoped
115 |
116 |
HTML:
117 |
<div ng-parallax pattern="'images/grey-pattern.png'" speed="0"></div>
118 |
119 |
<div ng-parallax pattern="'http://lorempixel.com/g/400/600/people/8'" speed="2" reverse="false" ></div>
120 |
121 |
122 |
123 |
126 |
129 |
132 |
135 |
136 |
137 |
138 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "ng-parallax",
3 | "version": "1.1.3",
4 | "description": "An easy way to utilize parllax scrolling in Angular apps.",
5 | "main": "src/ngParallax.js",
6 | "scripts": {
7 | "test": "echo \"Error: no test specified\" && exit 1"
8 | },
9 | "repository": {
10 | "type": "git",
11 | "url": "git+https://github.com/allenRoyston/ng-parallax.git"
12 | },
13 | "keywords": [
14 | "parallax",
15 | "angularjs",
16 | "royston"
17 | ],
18 | "author": "Allen Royston (httphttps://allenroyston.herokuapp.com/#/home/)",
19 | "license": "MIT",
20 | "bugs": {
21 | "url": "https://github.com/allenRoyston/ng-parallax/issues"
22 | },
23 | "homepage": "https://github.com/allenRoyston/ng-parallax#readme"
24 | }
--------------------------------------------------------------------------------
/src/ngParallax.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 | if (typeof module !== 'undefined' && typeof exports !== 'undefined' && module.exports === exports) {
3 | module.exports = 'ngParallax';
4 | }
5 | angular.module('ngParallax',[]);
6 | angular.module('ngParallax').directive('ngParallax', [
7 | '$timeout',
8 | function ($window, $timeout) {
9 | return {
10 | restrict: 'AE',
11 | scope:{
12 | pattern: '=',
13 | speed: '='
14 | },
15 | link: function(scope, elem, attr) {
16 |
17 | window.mobileAndTabletcheck = function() {
18 | return( navigator.userAgent.match(/Android/i)
19 | || navigator.userAgent.match(/webOS/i)
20 | || navigator.userAgent.match(/iPhone/i)
21 | || navigator.userAgent.match(/iPad/i)
22 | || navigator.userAgent.match(/iPod/i)
23 | || navigator.userAgent.match(/BlackBerry/i)
24 | || navigator.userAgent.match(/Windows Phone/i)
25 | );
26 | };
27 |
28 | var bgObj = elem[0];
29 | bgObj.style.height = "100%";
30 | bgObj.style.margin = "0 auto";
31 | bgObj.style.position = "relative";
32 | bgObj.style.background = "url(" + scope.pattern + ")";
33 | bgObj.style.backgroundAttachment = 'fixed';
34 | bgObj.style.backgroundRepeat = "repeat";
35 | bgObj.style.backgroundSize = "cover";
36 | var isMobile = window.mobileAndTabletcheck();
37 |
38 |
39 | function execute(){
40 |
41 | var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
42 | var speed = (scrollTop / scope.speed);
43 | if(isMobile){
44 | speed = speed * .10
45 | }
46 | if(speed == 0){
47 | bgObj.style.backgroundPosition = '0% '+ 0 + '%';
48 | }
49 | else{
50 | bgObj.style.backgroundPosition = '0% '+ speed + '%';
51 | }
52 |
53 | }
54 |
55 | // for mobile
56 | window.document.addEventListener("touchmove", function(){
57 | execute();
58 | });
59 |
60 |
61 | // for browsers
62 | window.document.addEventListener("scroll", function() {
63 | execute();
64 | });
65 |
66 | execute();
67 |
68 | }
69 |
70 | };
71 | }
72 | ]);
73 |
--------------------------------------------------------------------------------
/src/ngParallax.min.js:
--------------------------------------------------------------------------------
1 | "use strict";"undefined"!=typeof module&&"undefined"!=typeof exports&&module.exports===exports&&(module.exports="ngParallax"),angular.module("ngParallax",[]),angular.module("ngParallax").directive("ngParallax",["$timeout",function(a,b){return{restrict:"AE",scope:{pattern:"=",speed:"="},link:function(a,b,c){function f(){var b=void 0!==window.pageYOffset?window.pageYOffset:(document.documentElement||document.body.parentNode||document.body).scrollTop,c=b/a.speed;e&&(c=.1*c),0==c?d.style.backgroundPosition="0% 0%":d.style.backgroundPosition="0% "+c+"%"}window.mobileAndTabletcheck=function(){return!!(navigator.userAgent.match(/Android/i)||navigator.userAgent.match(/webOS/i)||navigator.userAgent.match(/iPhone/i)||navigator.userAgent.match(/iPad/i)||navigator.userAgent.match(/iPod/i)||navigator.userAgent.match(/BlackBerry/i)||navigator.userAgent.match(/Windows Phone/i))};var d=b[0];d.style.backgroundRepeat="repeat",d.style.backgroundAttachment="fixed",d.style.height="100%",d.style.margin="0 auto",d.style.position="relative",d.style.background="url("+a.pattern+")",d.style.backgroundAttachment="fixed";var e=window.mobileAndTabletcheck();window.document.addEventListener("touchmove",function(){f()}),window.document.addEventListener("scroll",function(){f()}),f()}}}]);
--------------------------------------------------------------------------------