A HTML-driven JavaScript-library for narrative 3D-scrolling.
See the demos here
NOTE THAT IT SHOULD BE CONSIDERED AS A BETA SOFTWARE Production use is not recommended at this point.
Import the library
<head>
<script type="text/javascript" src="[jquery]"></script>
...
</head>
<body>
[Your contents]
<script type="text/javascript" src="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").
<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>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>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>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><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>You can add your own transitions with the ```addTransitions`` method. Make sure it is done after the library is loaded.
<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>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