Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/gopatrik/space.js
A HTML-driven JavaScript-library for narrative 3D-scrolling.
https://github.com/gopatrik/space.js
Last synced: 13 days ago
JSON representation
A HTML-driven JavaScript-library for narrative 3D-scrolling.
- Host: GitHub
- URL: https://github.com/gopatrik/space.js
- Owner: gopatrik
- License: mit
- Created: 2015-03-06T15:26:00.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2020-10-16T12:41:36.000Z (about 4 years ago)
- Last Synced: 2024-02-14T22:36:22.689Z (9 months ago)
- Language: CSS
- Homepage: www.slashie.org/space.js
- Size: 7.83 MB
- Stars: 1,375
- Watchers: 55
- Forks: 134
- Open Issues: 24
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Space.js
A HTML-driven JavaScript-library for narrative 3D-scrolling.
See the demos [here](http://www.slashie.org/space.js/)
**NOTE THAT SHOULD BE CONSIDERED TO BE BETA SOFTWARE**
*Production use is not recommended at this point.*
## Usage
**Import the library**
```html
...
[Your contents]
```
The library is HTML-driven, which means that you don't need to write a single line of JavaScript to use it on your site and still have a lot of flexibility!
The core of the library is to divide our HTML into frames, or *space-frames* as we call them her (to not conflict the common class name "frame").
### Creating a frame
```html
[contents]
```
I would also **strongly** recommend using an inner-frame inside the space-frame, which provides some helpful CSS to make things centered both vertically and horizontally inside the frame.
```html
[contents]
```
### Custom duration
If we want we can provide a custom duration for our frames with the data-duration attribute, which multiplies the default duration of the transition.
```html
...
...
```
### Options
Space.js has a default default transition - which is to enter by fading in and exit by scaling up and fading out. We can also provide a custom transition override to the library from predefined transitions. (We can also create our own transitions from scratch, but we'll get to that later.)
```html
...
```
Multiple values are supported!
```html
...
```
### Custom entry and exit
If we really want to get into detail, we can provide how we wish the frame to enter (first half of the frame duration) and exit (second half).
```html
...
```
## What a complete frame could look like
```html
Demo 1
The Gallery
```
## Custom transitions
You can add your own transitions with the ```addTransitions`` method. Make sure it is done after the library is loaded.
```javascript
var transitions = {
rotate720: {
'rotate':{from:0, to:720}
},
fadeOutHalf: {
'opacity':{from:1, to:0.5}
}
};
Space.addTransitions(transitions);
```
### Currently supported transitions
Note that these might come to change during the beta-phase of the library.
- scaleIn
- fadeIn
- scaleOut
- fadeOut
- rotateQuarterRight
- rotateInQuarterClockwise
- zoomOut
- slideInBottom
- slideOutDown
- slideOutLeft
- slideOutRight
- slideInRight
- slideOutUp
- slideInTop
- slideInLeft
- slideBottomRight
- rotate360
- rotate3dOut