forked from gopatrik/space.js
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
61 lines (47 loc) · 8.74 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!DOCTYPE html><html><head><head><meta charset="utf-8"/><title>Space.js – HTML-driven narrative 3D-scrolling</title><script src="jquery-2.0.2.min.js"></script><link rel="stylesheet" type="text/css" href="css/main.css"/><link rel="stylesheet" type="text/css" href="css/demo.css"/><script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-38987463-4', 'auto');
ga('send', 'pageview');
</script></head></head></html><body><section style="height:100px; bottom: 20px; left: 20px; z-index:100;" class="absolute narrow mt-large"><div style="text-align:right;" class="third"><div style="background-image:url(img/astro_small.jpg);" class="portrait-frame inline"></div></div><div class="two-third"><div style="font-size:8px;" class="mt">Author.</div><div style="margin-bottom:5px;" class="nm small">Patrik Goethe</div><div><a href="https://twitter.com/gopatrik" data-show-count="true" class="twitter-follow-button"></a></div><div style="font-size:8px;" class="nm">PS. Not real astronaut.</div></div></section><div class="space-frame"><section class="space-inner-frame"><section class="center"><img src="img/spacejs.png" width="170px" alt="" class="inline"></section><p class="center nm">HTML-driven narrative 3D-scrolling</p><p class="small center subtle">(No js required)</p><h3 class="center small"><a href="demo1.html">Try the demos</a></h3><div class="center"><a href="demo1.html"><img src="img/demo1thumb.jpg" width="200px" class="shadow"></a><a href="demo2.html" style="margin-left: 20px;"><img src="img/demo2thumb.jpg" width="200px" class="shadow"></a></div><p class="center small">View on <a href="https://github.com/gopatrik/space.js" class="bold modal">GitHub </a>or read <a href="/articles/space.js/" class="bold modal">the Article</a><p class="center"><a href="https://twitter.com/share" class="twitter-share-button" data-text="Space.js – HTML-driven narrative 3D-scrolling." data-via="gopatrik" data-size="large">Tweet</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<a class="github-button" href="https://github.com/gopatrik/space.js" data-style="mega" data-count-href="/gopatrik/space.js/stargazers" data-count-api="/repos/gopatrik/space.js#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star gopatrik/space.js on GitHub">Star</a></p></p></section></div><div class="space-frame"><section class="space-inner-frame"><h2>Creating a frame</h2>
<pre><code><div class="space-frame">[contents]</div></code></pre></section></div><div class="space-frame"><section class="space-inner-frame"><p><strong>Recommended:</strong> Use <code>inner-frame</code> inside the <code>space-frame</code>. This makes things centered both vertically and horizontally inside the frame.</p>
<pre><code><div class="space-frame">
<section class="space-inner-frame">
[contents]
</section>
</div></code></pre></section></div><div class="space-frame" data-duration="2"><section class="space-inner-frame"><h2>Custom duration</h2>
<p>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.</p>
<pre><code><section class="space-frame" data-duration="2">...</section>
<section class="space-frame" data-duration="0.6">...</section></code></pre></section></div><div class="space-frame" data-enter="fadeIn" data-exit="rotate360"><section class="space-inner-frame"><h2>Custom transition</h2>
<p>Space.js has a default default transition - which is to enter by fading in and exit by scaling up and fading out. <strong>We can provide a custom transition override it</strong>, (from predefined transitions).</p>
<pre><code><section class="space-frame" data-transition="rotate360">...</section></code></pre></section></div><div class="space-frame" data-transition="fadeOut slideInLeft"><section class="space-inner-frame"><h2>Multiple values are supported!</h2>
<pre><code>data-transition="fadeOut slideInLeft"</code></pre></section></div><div class="space-frame" data-enter="fadeIn" data-exit="fadeOut zoomOut"><section class="space-inner-frame"><h3>Custom entry and exit</h3>
<p>We can also provide specific <strong>enter</strong> and <strong>exit</strong> transitions.</p>
<pre><code><section class="space-frame" data-enter="fadeIn" data-exit="fadeOut zoomOut">...</section></code></pre></section></div><div class="space-frame" data-duration="1.3" data-enter="fadeIn" data-exit="zoomOut fadeOut"><section class="space-inner-frame"><h2>What a complete frame could look like</h2>
<pre><code><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></code></pre></section></div><div class="space-frame" data-enter="scaleIn" data-exit="slideOutDown"><section class="space-inner-frame"><h2>Custom transitions</h2>
<p>You can also specify your own transitions with the <code>addTransitions</code> method.</p>
<pre><code><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></code></pre></section></div><div class="space-frame" data-enter="fadeIn" data-exit="fadeOut" data-duration="4"><section class="space-inner-frame"><section class="center"><img src="img/spacejs.png" width="170px" alt="" class="inline"></section><p class="center nm">HTML-driven narrative 3D-scrolling</p><p class="small center subtle">(No js required)</p><h3 class="center small"><a href="demo1.html">Try the demos</a></h3><div class="center"><a href="demo1.html"><img src="img/demo1thumb.jpg" width="200px" class="shadow"></a><a href="demo2.html" style="margin-left: 20px;"><img src="img/demo2thumb.jpg" width="200px" class="shadow"></a></div><p class="center small">View on <a href="https://github.com/gopatrik/space.js" class="bold modal">GitHub </a>or read <a href="/articles/space.js/" class="bold modal">the Article</a><p class="center"><a href="https://twitter.com/share" class="twitter-share-button" data-text="Space.js – HTML-driven narrative 3D-scrolling." data-via="gopatrik" data-size="large">Tweet</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<a class="github-button" href="https://github.com/gopatrik/space.js" data-style="mega" data-count-href="/gopatrik/space.js/stargazers" data-count-api="/repos/gopatrik/space.js#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star gopatrik/space.js on GitHub">Star</a></p></p><section style="height:100px; bottom: 20px; left: 20px;" class="narrow mt-large"><div style="text-align:right;" class="third"><div style="background-image:url(img/astro_small.jpg);" class="portrait-frame inline"></div></div><div class="two-third"><div style="font-size:8px;" class="mt">Author.</div><div style="margin-bottom:5px;" class="nm small">Patrik Goethe</div><div><a href="https://twitter.com/gopatrik" data-show-count="true" class="twitter-follow-button"></a></div><div style="font-size:8px;" class="nm">PS. Not real astronaut.</div></div></section></section></div><div class="space-frame"><section class="space-inner-frame"></section></div><script src="space.js"></script><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<script async defer id="github-bjs" src="https://buttons.github.io/buttons.js"></script></body>