Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/joshdmiller/ng-curtain
AngularJS directives that create multiple fixed panels that unroll with an amusing effect. Port of the now defunct victa/curtain.js.
https://github.com/joshdmiller/ng-curtain
Last synced: 13 days ago
JSON representation
AngularJS directives that create multiple fixed panels that unroll with an amusing effect. Port of the now defunct victa/curtain.js.
- Host: GitHub
- URL: https://github.com/joshdmiller/ng-curtain
- Owner: joshdmiller
- License: mit
- Created: 2013-05-07T22:47:20.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2013-05-10T23:13:49.000Z (over 11 years ago)
- Last Synced: 2024-09-04T00:03:34.649Z (3 months ago)
- Language: JavaScript
- Homepage: http://joshdmiller.github.io/ng-curtain
- Size: 500 KB
- Stars: 85
- Watchers: 4
- Forks: 8
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# [ngCurtain](http://joshdmiller.github.io/ng-curtain)
A set of pure AngularJS directives to create a wicked-cool "rising curtain"
effect to unroll the sections of your website.
***
## Usage
### 1. Install It
ngCurtain is available through Bower, so this is by far the easiest way to
obtain it. Just run:
```sh
$ bower install --save-dev ng-curtain
```
This will download the latest version of ngCurtain and install it into your
Bower directory (defaults to components). Boom!
### 2. Incorporate It
Now you have to add the script file to your application. You can, of course,
just add a script tag. If you're using ngBoilerplate or any of its derivatives,
simply add it to the `vendor.js` array of your `Gruntfile.js`:
```js
vendor: {
js: [
// ...
'vendor/ng-curtain/ng-curtain.min.js',
// ...
]
},
```
However you get it there, as soon as it's in your build path, you need to tell
your app module to depend on it:
```js
angular.module( 'myApp', [ 'ngCurtain', /* other deps */ ] );
```
Also be sure to include the stylesheet. In ngBoilerplate, simply import
`ng-curtain.less` into your `main.less` file.
Now you're ready to go! Sweet.
### 3. Use It
The markup for ngCurtain is fairly straightforward. There are two directives:
`ctnCurtains` and `ctnCurtain`. The former is the main directive and wraps all
content, accepting within it as many of the latter as necessary, each
representing a separate curtain whose position to manage. Both can be used
either as elements or as attributes.
For example, the typical structure of ngCurtain therefore looks something like
this:
```html
```
## How it Works
If you're just interested in using ngCurtain, you can ignore this section
completely. But for those curious, this section contains an overview of how the
code works.
The outer directive (`ctnCurtains`) contains the vast majority of the logic as
methods on its scope. The inner directives (`ctnCurtain`) require the outer
directive and call a method during their linking phase to register their
presence.
After initialization of all the children, `ctnCurtains` calculates the positions
of all the individual ctnCurtain elements that registered themselves, calculates
the total window height, and determines which curtains to start where based on
the current value of `$location.path()`. This same process is repeated every
time the window is resized.
Technically, all cards start positioned at 0,0 and the window's height is
manually calculated and applied as the sum of the heights of the individual
curtains.
When the browser window scrolls, the ctnCurtains directive determines whether we
are scrolling within a curtain, beyond a curtain, or above a curtain and
arranges the positions and stacks appropriately and applies translateY
operations to change the current vertical position of the curtain relative to
the current (virtual) scroll position. That probably sounds confusing, but if
you look at the code, it's pretty straightforward.
## Contributing
Contributions are encouraged! There is a lot to be done.
## Shameless Self-Promotion
Like ngCurtain? Star this repository to let me know! If this got you particulary
tickled, you can even follow me on [GitHub](http://github.com/joshdmiller),
[Twitter](http://twitter.com/joshdmiller),
[Google+](http://gplus.to/joshdmiller), or
[LinkedIn](http://linkedin.com/in/joshdmiller).
Enjoy.