npm

Bring the best of OSS JavaScript development to your projects with npm Orgs - private packages & team management tools.Learn more »

ang2-parallax

1.0.2 • Public • Published

ng2-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 ng-parallax --save-dev
bower install ng-simple-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.

install

npm i ang2-parallax

Downloadsweekly downloads

13

version

1.0.2

license

ISC

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability