Skip to content

Update documentation #24

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
HardikN19 wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Update documentation #24

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9990fa1
Update documentation
HardikN19 Sep 30, 2020
93ebcda
little changes
HardikN19 Oct 16, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 7 additions & 6 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@ 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**
**NOTE: THAT SHOULD BE CONSIDERED TO BE BETA SOFTWARE**

*Production use is not recommended at this point.*

## Usage
Expand All @@ -20,17 +21,17 @@ See the demos [here](http://www.slashie.org/space.js/)
</body>
```

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!
This 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").
The core of the library is to divide our HTML text into frames, or *space-frames* as we call them her (to not conflict the common class name "frame").


### Creating a frame
```html
<div class="space-frame">[contents]</div>
```

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.
I would also **strongly** recommend using an inner-frame inside the space-frame, which provides some useful CSS to make things centered both vertically and horizontally inside the frame.

```html
<div class="space-frame">
Expand All @@ -41,7 +42,7 @@ I would also **strongly** recommend using an inner-frame inside the space-frame,
```

### 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.
If we want we can also provide a custom duration for our frames with the data-duration attribute, which multiplies the default duration of the transition.

```html
<section class="space-frame" data-duration="1.4">...</section>
Expand All @@ -63,7 +64,7 @@ Multiple values are supported!
```

### 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).
If we really want to get into details, we can provide how we wish the frame to enter (first half of the frame duration) and exit (second half).

```html
<section class="space-frame" data-enter="fadeIn" data-exit="fadeOut zoomOut">...</section>
Expand Down