├── 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 |

Setting the speed at 0 will lock the image in place.
... unless it's iOS, in which case the image will act as a static image and scroll naturally.
Using negative numbers reverses the direction.
The speed is directly related to the image size, so tinker with your speed to get the right effect.

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()}}}]); --------------------------------------------------------------------------------