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

First, alter your systemjs.config.js to include the right pathing.

  var map = {
    'app':                        'app', // 'dist',
    '@angular':                   'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs':                       'node_modules/rxjs',
    'NG2_parallax':               'node_modules/ang2-parallax'
  };
  
  var packages = {
    'app':                        { main: 'main.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
    'NG2_parallax':               { defaultExtension: 'js' }
  };

Then include the module in your scripts.


import { Component } from '@angular/core';
import { ng2Parallax  } from '../../../node_modules/ang2-parallax/ng2parallax';

@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
bower install ang2-parallax --save

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.

LiveHappier / ang2-parallax