angular-stellar

Stellar.js directives for AngularJS ( without jQuery dependency )
0 people use it
Author: 922234?v=2 tomchentw

angular-stellar

Distributed via

Version     Bower version

Stellar.js directives for AngularJS ( without jQuery dependency )

Travis CI   Quality     Coverage    Dependencies

Project philosophy

Develop in LiveScript

LiveScript is a compile-to-js language, which provides us more robust way to write JavaScript.
It also has great readibility and lots of syntax sugar just like you're writting python/ruby.

Native, lightweight directives

Stellar.js provides the same interface with angular directives.
We use the similarity between them and provides seamless intergration with Stellar.js.

Installation

This project follows DRY principle and has two dependencies, which are angularjs and ui.bootstrap.position.

Just use it

Then include them through script tag in your HTML.

Rails projects (Only support 3.1+)

Add this line to your application's Gemfile: ruby gem 'angular-stellar'

And then execute:

If you are NOT using angular-ui/bootstrap, you have to download position.js and put it in vendor/assets/javascripts/

Then add these lines to the top of your app/assets/javascripts/application.js file:

And include in your angular module definition:

Usage

"stellar-ratio": Make the element has parallax effect on front

"stellar-background-ratio": Make the element has parallax effect on background

"stellarConfig": constant for configuration

scrollProperty

default to: 'scroll'

Available options are 'position', 'margin', 'transform', or you can define it yourself.

positionProperty

default to: 'position'

Available options are 'transform', or you can define it yourself.

horizontalScrolling

default to: true

Whether or not to enable scrolling in horizontal, only apply to stellar-ratio elements.

verticalScrolling

default to: true

Whether or not to enable scrolling in vertical, only apply to stellar-ratio elements.

horizontalOffset

default to: 0

Global offset added to each element.

verticalOffset

default to: 0

Global offset added to each element.

hideDistantElements

default to: true

When stellar-ratio elements are scrolled outside of visible area, hide them.

hideElement

default to: function(it){ it.addClass('ng-hide'); }

You can have your implementation on your own.

showElement

default to: function(it){ it.removeClass('ng-hide'); }

You can have your implementation on your own.

isElementHidden

default to: function(it){ return it.hasClass('ng-hide'); }

You can have your implementation on your own.

Contributing

devDependency Status

  1. Fork it ( https://github.com/tomchentw/angular-stellar/fork )
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Commit your changes (git commit -am 'Add some feature')
  4. Push to the branch (git push origin my-new-feature)
  5. Create new Pull Request
comments powered by Disqus
This page was last updated about 3 years ago.