ang2-phaser

ang2-parallax

What Am I?!

An easy way to implement parallax scrolling for Angular2 components. (There's also an Angular 1.x directive for those that need it.)

• No dependencies
• Responsive
• Simple
• Works for mobile! (Well, iPhones at least - haven't tested on an Android yet)
• Tiny

Installation

Include the module in your scripts.

import { Component } from '@angular/core';
import { ng2Parallax  } from '<pathTo>/ng2-parallax/parallax.directive';

@Component({
  selector: 'my-component',
  directives: [ng2Parallax],
  template:`
  
  <div style='width: 200; height: 200px'>
    <div parallax speed="5" src="path/to/image.jpg"></div>
  </div>
  
  `
})
export class componentName { }

Version

1.0.0

Live Demo

Check it out

Dependencies

• None!

NPM / Bower

npm install ang2-parallax --save-dev

Parameters

speed = 0 to xx (the higher the number, the slower the effect).  This part requires some tinkering since different image sizes will respond differently.

src = path to image

License

MIT - go nuts y'all.