search

gopatrik / space.js

A HTML-driven JavaScript-library for narrative 3D-scrolling.
www.slashie.org/space.js
MIT License
1.37k stars 126 forks source link

readme

Space.js

A HTML-driven JavaScript-library for narrative 3D-scrolling.

See the demos here

NOTE THAT SHOULD BE CONSIDERED TO BE BETA SOFTWARE Production use is not recommended at this point.

Usage

Import the library

<head>
    <script type="text/javascript" src="https://github.com/gopatrik/space.js/raw/master/[jquery]"></script>
    ...
</head>
<body>
    [Your contents]
    <script type="text/javascript" src="https://github.com/gopatrik/space.js/raw/master/space.min.js"></script>
</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!

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

<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.

<div class="space-frame">
    <section class="space-inner-frame">
        [contents]
    </section>
</div>

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.

<section class="space-frame" data-duration="1.4">...</section>
<section class="space-frame" data-duration="0.6">...</section>

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.)

<section class="space-frame" data-transition="rotate360">...</section>

Multiple values are supported!

<section class="space-frame" data-transition="rotate360 fadeOut slideInLeft">...</section>

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).

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

What a complete frame could look like

<div class="space-frame" data-enter="fadeIn" data-exit="zoomOut fadeOut" data-duration="1.3">
    <section class="space-inner-frame">
        <div style="background-image:url(img/splash.png); padding:150px 200px;" class="bg">
            <section>
                <p>Demo 1</p>
                <h1>The Gallery</h1>
            </section>
        </div>
    </section>
</div>

Custom transitions

You can add your own transitions with the `addTransitions method. Make sure it is done after the library is loaded.

<script src="https://github.com/gopatrik/space.js/raw/master/space.js"></script>

<script type="text/javascript">
    var transitions = {
        rotate720: {
            'rotate':{from:0, to:720}
        },
        fadeOutHalf: {
            'opacity':{from:1, to:0.5}
        }
    };
    Space.addTransitions(transitions);
</script>

Currently supported transitions

Note that these might come to change during the beta-phase of the library.