151 lines
45 KiB
HTML
151 lines
45 KiB
HTML
|
<!doctype html>
|
||
|
|
<html lang="en">
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
|
||
|
|
<title>CSS 3D Slideshow</title>
|
||
|
|
|
||
|
|
<link href='http://fonts.googleapis.com/css?family=Crimson+Text:regular,600,bold' rel='stylesheet' type='text/css'>
|
||
|
|
|
||
|
|
<link rel="stylesheet" href="css/reset.css">
|
||
|
|
<link rel="stylesheet" href="css/main.css">
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<!-- Any section element inside of this container is displayed as a slide -->
|
||
|
|
<div id="main">
|
||
|
|
|
||
|
|
<section>
|
||
|
|
<h1>Slideshow</h1>
|
||
|
|
<h3 class="inverted">With 3D effects. And stuff.</h3>
|
||
|
|
<script>
|
||
|
|
// Delicously hacky. Look away.
|
||
|
|
var message = navigator.userAgent.match( /(iPhone|iPad|iPod|Android)/i ) ? 'Tap to navigate' : 'Navigate via keyboard';
|
||
|
|
document.write( '<p style="color: rgba(0,0,0,0.1); text-shadow: none;">('+message+')</p>' );
|
||
|
|
</script>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section>
|
||
|
|
<h2>Heads Up</h2>
|
||
|
|
<p>
|
||
|
|
This requires a browser with support for CSS3 3D transforms, such as Mobile Safari.
|
||
|
|
</p>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- Example of nested vertical slides -->
|
||
|
|
<section>
|
||
|
|
<section>
|
||
|
|
<h2>Vertical Slides</h2>
|
||
|
|
<p>
|
||
|
|
Slides can be nested inside of other slides,<br/>
|
||
|
|
try pressing <a href="#/2/1">down</a>.
|
||
|
|
</p>
|
||
|
|
<a href="#/2/1" class="image">
|
||
|
|
<img src="data:image/png;base64,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">
|
||
|
|
</a>
|
||
|
|
</section>
|
||
|
|
<section>
|
||
|
|
<h2>Basement Level 1</h2>
|
||
|
|
<p>Press down or up to navigate.</p>
|
||
|
|
</section>
|
||
|
|
<section>
|
||
|
|
<h2>Basement Level 2</h2>
|
||
|
|
<p>This is totally the Google logo:</p>
|
||
|
|
<img src="data:image/png;base64,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
|
||
|
|
</section>
|
||
|
|
<section>
|
||
|
|
<h2>Basement Level 3</h2>
|
||
|
|
<p>That's it, time to go back up.</p>
|
||
|
|
<a href="#/2" class="image">
|
||
|
|
<img style="-webkit-transform: rotate(180deg);" src="data:image/png;base64,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">
|
||
|
|
</a>
|
||
|
|
</section>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section>
|
||
|
|
<h2>Marvelous Unordered List</h2>
|
||
|
|
<ul>
|
||
|
|
<li>No order here</li>
|
||
|
|
<li>Or here</li>
|
||
|
|
<li>Or here</li>
|
||
|
|
<li>Or here</li>
|
||
|
|
</ul>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section>
|
||
|
|
<h2>Fantastic Ordered List</h2>
|
||
|
|
<ol>
|
||
|
|
<li>One is smaller than...</li>
|
||
|
|
<li>Two is smaller than...</li>
|
||
|
|
<li>Three!</li>
|
||
|
|
</ol>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section>
|
||
|
|
<h2>Intergalactic Interconnections</h2>
|
||
|
|
<p>
|
||
|
|
You can link between slides internally,<br/>
|
||
|
|
<a href="#/2/3">like this</a>.
|
||
|
|
</p>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section>
|
||
|
|
<h2>Spectacular image!</h2>
|
||
|
|
<a class="image" href="http://hakim.se/experiments/html5/breakdom/" target="_blank">
|
||
|
|
<img src="assets/images/breakdom.jpg">
|
||
|
|
</a>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section>
|
||
|
|
<h2>Stellar Links</h2>
|
||
|
|
<ul>
|
||
|
|
<li><a href="hakim-slideshow-0.3.zip">Download this slideshow</a></li>
|
||
|
|
<li><a href="http://hakim.se/experiments/css3-3d-slideshow">Read more on my site</a></li>
|
||
|
|
<li><a href="http://twitter.com/hakimel">Follow me on Twitter</a></li>
|
||
|
|
</ul>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section>
|
||
|
|
<h1>THE END</h1>
|
||
|
|
<h3 class="inverted">BY Hakim El Hattab / hakim.se</h3>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script src="js/slideshow.js"></script>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<!-- Everything below this point is unrelated to the slideshow -->
|
||
|
|
|
||
|
|
<div class="tweet-button" style="position: absolute; bottom: 10px; left: 50%; margin-left: -25px">
|
||
|
|
<a href="http://twitter.com/share" class="twitter-share-button" data-text="A CSS 3D slideshow by @hakimel." data-url="http://hakim.se/experiments/css3-3d-slideshow" data-count="none" data-related="hakimel"></a>
|
||
|
|
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
var _gaq = [['_setAccount', 'UA-15240703-1'], ['_trackPageview']];
|
||
|
|
(function(d, t) {
|
||
|
|
var g = d.createElement(t),
|
||
|
|
s = d.getElementsByTagName(t)[0];
|
||
|
|
g.async = true;
|
||
|
|
g.src = ('https:' == location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
|
||
|
|
s.parentNode.insertBefore(g, s);
|
||
|
|
})(document, 'script');
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>a[href="http://www.w3counter.com"] { display: none!important; }</style>
|
||
|
|
<script src="http://www.w3counter.com/tracker.js"></script>
|
||
|
|
<script>
|
||
|
|
w3counter(49720);
|
||
|
|
var ps = document.createElement('script');
|
||
|
|
ps.type = 'text/javascript';
|
||
|
|
ps.async = true;
|
||
|
|
ps.src = '//pulse.w3counter.com/pulse.js?id=49720';
|
||
|
|
(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(ps);
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|