Author.
Patrik Goethe
PS. Not real astronaut.

HTML-driven narrative 3D-scrolling

(No js required)

Try the demos

View on GitHub or read the Article

Star

Creating a frame

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

Recommended: Use inner-frame inside the space-frame. This makes 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="2">...</section>
<section class="space-frame" data-duration="0.6">...</section>

Custom transition

Space.js has a default default transition - which is to enter by fading in and exit by scaling up and fading out. We can provide a custom transition override it, (from predefined transitions).

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

Multiple values are supported!

data-transition="fadeOut slideInLeft"

Custom entry and exit

We can also provide specific enter and exit transitions.

<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 also specify your own transitions with the addTransitions method.

<script src="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>

HTML-driven narrative 3D-scrolling

(No js required)

Try the demos

View on GitHub or read the Article

Star

Author.
Patrik Goethe
PS. Not real astronaut.