├── 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 | [![CDNJS](https://img.shields.io/cdnjs/v/ng-parallax.svg)](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 | 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 |
36 |
Speed: 0
37 |
38 |
39 |
Speed: 5
40 |
41 |
42 |
Speed: 3
43 |
44 |
45 |
Speed: 1
46 |
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 |
61 |
Speed: 0
62 |
63 |
64 |
Speed: -15
65 |
66 |
67 |
Speed: -10
68 |
69 |
70 |
Speed: -5
71 |
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 |
97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
106 |
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 |
124 |
125 |
126 |
127 |
128 |
129 |
130 |
131 |
132 |
133 |
134 |
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()}}}]); --------------------------------------------------------------------------------