Rewrite of Stellar.js native AngularJS directives without jQuery dependency
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.
Stellar.js
provides the same interface with angular directives
.
We use the similarity between them and provides seamless intergration with Stellar.js
.
This project follows DRY principle and has two dependencies, which are angularjs
and ui.bootstrap.position
.
- Download and include
position.js
. - Download and include
angular-stellar.js
ORangular-stellar.min.js
.
Then include them through script tag in your HTML.
Add this line to your application's Gemfile:
gem 'angular-stellar'
And then execute:
$ bundle
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:
//= require angular
//= require ui-bootstrap-tpls
(`//= require position` instead if you aren't using boostrap)
//= require angular-stellar
And include in your angular
module definition:
/* 'angular.stellar' DO depend on 'ui.bootstrap.position' module.
*/
var module = angular.module('my-awesome-project', [/* 'bootstrap', */ 'angular.stellar']).
default to: 'scroll'
Available options are 'position', 'margin', 'transform', or you can define it yourself.
default to: 'position'
Available options are 'transform', or you can define it yourself.
default to: true
Whether or not to enable scrolling in horizontal, only apply to stellar-ratio
elements.
default to: true
Whether or not to enable scrolling in vertical, only apply to stellar-ratio
elements.
default to: 0
Global offset added to each element.
default to: 0
Global offset added to each element.
default to: true
When stellar-ratio
elements are scrolled outside of visible area, hide them.
default to: function(it){ it.addClass('ng-hide'); }
You can have your implementation on your own.
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.
- Fork it ( http://github.com/tomchentw/angular-stellar/fork )
- Create your feature branch (
git checkout -b my-new-feature
) - Commit your changes (
git commit -am 'Add some feature'
) - Push to the branch (
git push origin my-new-feature
) - Create new Pull Request