kfitz/presentations.kfitz.info
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

initial commit

Browse Source
This commit is contained in:
Hakim El Hattab committed 2011-06-07 21:10:59 +02:00
commit fdd6b36f01
9 files changed
+732
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

.gitignore
+4
View File
@@ -0,0 +1,4 @@
.DS_Store
.svn
log/*.log
tmp/**
LICENSE
+19
View File
@@ -0,0 +1,19 @@
Copyright (C) 2011 Hakim El Hattab, http://hakim.se
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
README.md
+1
View File
@@ -0,0 +1 @@
# CSS 3D Slideshow
assets/fonts/leaguegothic/league_gothic-webfont.ttf
BIN
View File
Binary file not shown.
assets/images/breakdom.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 55 KiB

css/main.css
+218
View File
@@ -0,0 +1,218 @@
/**
* @author Hakim El Hattab
*/
/*********************************************
* FONT-FACE DEFINITIONS
*********************************************/
@font-face {
font-family: 'League Gothic';
src: url('../assets/fonts/leaguegothic/league_gothic-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
/*********************************************
* GLOBAL STYLES
*********************************************/
html, body {
padding: 0;
margin: 0;
overflow: hidden;
font-family: 'Crimson Text', Times, 'Times New Roman', serif;
font-size: 36px;
background: #fff;
color: #222;
width: 100%;
height: 100%;
background-image: -webkit-gradient(
radial,
50% 50%, 0,
50% 50%, 1000,
from(rgba(245,245,245,1.0)),
to(rgba(100,100,100,1.0))
);
background-image: -moz-radial-gradient(
50% 50% 90deg,
rgba(245,245,245,1.0) 0%,
rgba(100,100,100,1.0) 100%
);
}
/*********************************************
* HEADERS
*********************************************/
h1, h2, h3, h4 {
margin: 0 0 20px 0;
font-family: 'League Gothic', Arial, Helvetica, sans-serif;
line-height: 0.9em;
letter-spacing: 0.02em;
text-transform: uppercase;
color: #222;
text-shadow: 0px 0px 2px #fff, 0px 0px 4px #bbb;
}
h1 { font-size: 136px; }
h2 { font-size: 76px; }
h3 { font-size: 56px; }
h4 { font-size: 36px; }
h1.inverted,
h2.inverted,
h3.inverted,
h4.inverted {
color: #fff;
text-shadow: 0px 0px 2px #fff, 0px 0px 2px #888;
}
/*********************************************
* SLIDES
*********************************************/
#main {
position: absolute;
width: 800px;
height: 600px;
left: 50%;
top: 50%;
margin-left: -400px;
margin-top: -320px;
text-align: center;
-webkit-perspective: 600px;
-webkit-perspective-origin: 50% 25%;
}
#main>section,
#main>section>section {
display: none;
position: absolute;
width: 100%;
min-height: 600px;
-webkit-transform-style: preserve-3d;
-webkit-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
-moz-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
-o-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
}
#main section.past {
display: block;
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0)
rotateY(-90deg)
translate3d(-100%, 0, 0);
}
#main section.present {
display: block;
}
#main section.future {
display: block;
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0)
rotateY(90deg)
translate3d(100%, 0, 0);
}
#main section>section.past {
display: block;
opacity: 0;
-webkit-transform: translate3d(0, -50%, 0)
rotateX(70deg)
translate3d(0, -50%, 0);
}
#main section>section.future {
display: block;
opacity: 0;
-webkit-transform: translate3d(0, 50%, 0)
rotateX(-70deg)
translate3d(0, 50%, 0);
}
/*********************************************
* DEFAULT ELEMENT STYLES
*********************************************/
#main>section {
line-height: 1.2em;
text-shadow: 0px 0px 2px #fff, 0px 0px 4px #bbb;
font-weight: 600;
}
ol {
list-style: decimal;
list-style-position: inside;
}
li, p {
margin-bottom: 10px;
}
a:not(.image) {
color: #1b6263;
text-decoration: none;
border-bottom: 1px dashed rgba(0,0,0,0.3);
padding: 1px 3px;
}
a:not(.image):hover {
color: #fff;
background: #2fa794;
text-shadow: none;
border: none;
}
img {
margin: 30px 0 0 0;
background: rgba(255,255,255,0.12);
border: 4px solid #eee;
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
-webkit-transition: all .11s linear;
-moz-transition: all .11s linear;
-o-transition: all .11s linear;
transition: all .11s linear;
}
a.image:hover img {
background: rgba(255,255,255,0.2);
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.25);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.25);
}
css/reset.css
+57
View File
@@ -0,0 +1,57 @@
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* HTML5BP:
These selection declarations have to be separate.
No text-shadow: twitter.com/miketaylr/status/12228805301
Also: hot pink. */
::-moz-selection{ background: #FF5E99; color:#fff; text-shadow: none; }
::selection { background:#FF5E99; color:#fff; text-shadow: none; }
index.html
+151
View File
@@ -0,0 +1,151 @@
<!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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 truncated
</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>
js/slideshow.js
+282
View File
@@ -0,0 +1,282 @@
/**
* Copyright (C) 2011 Hakim El Hattab, http://hakim.se
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
* THE SOFTWARE.
*/
/**
* Handles the very minimal navigation logic involved in the
* slideshow. Including keyboard navigation, touch interaction
* and URL history behavior.
*
* Slides are given unique hash based URL's so that they can be
* opened directly. I didn't use the HTML5 History API for this
* as it would have required the addition of server side rewrite
* rules and hence require more effort for anyone to set up.
*
* This component can be called from other scripts via a tiny API:
* - Slideshow.navigateTo( indexh, indexv );
* - Slideshow.navigateLeft();
* - Slideshow.navigateRight();
* - Slideshow.navigateUp();
* - Slideshow.navigateDown();
*
*
* version 0.1:
* - First release
*
* version 0.2:
* - Refactored code and added inline documentation
* - Slides now have unique URL's
* - A basic API to invoke navigation was added
*
* version 0.3:
* - Added licensing terms
*
*
* @author Hakim El Hattab
* @version 0.3
*/
var Slideshow = (function(){
var indexh = 0,
indexv = 0;
/**
* Activates the main program logic.
*/
function initialize() {
document.addEventListener('keydown', onDocumentKeyDown, false);
document.addEventListener('touchstart', onDocumentTouchStart, false);
window.addEventListener('hashchange', onWindowHashChange, false);
// Read the initial state of the URL (hash)
readURL();
}
/**
* Handler for the document level 'keydown' event.
*
* @param {Object} event
*/
function onDocumentKeyDown( event ) {
if( event.keyCode >= 37 && event.keyCode <= 40 ) {
switch( event.keyCode ) {
case 37: navigateLeft(); break; // left
case 39: navigateRight(); break; // right
case 38: navigateUp(); break; // up
case 40: navigateDown(); break; // down
}
slide();
event.preventDefault();
}
}
/**
* Handler for the document level 'touchstart' event.
*
* This enables very basic tap interaction for touch
* devices. Added mainly for performance testing of 3D
* transforms on iOS but was so happily surprised with
* how smoothly it runs so I left it in here. Apple +1
*
* @param {Object} event
*/
function onDocumentTouchStart( event ) {
// We're only interested in one point taps
if (event.touches.length == 1) {
event.preventDefault();
var point = {
x: event.touches[0].clientX,
y: event.touches[0].clientY
};
// Define the extent of the areas that may be tapped
// to navigate
var wt = window.innerWidth * 0.3;
var ht = window.innerHeight * 0.3;
if( point.x < wt ) {
navigateLeft();
}
else if( point.x > window.innerWidth - wt ) {
navigateRight();
}
else if( point.y < ht ) {
navigateUp();
}
else if( point.y > window.innerHeight - ht ) {
navigateDown();
}
slide();
}
}
/**
* Handler for the window level 'hashchange' event.
*
* @param {Object} event
*/
function onWindowHashChange( event ) {
readURL();
}
/**
* Updates one dimension of slides by showing the slide
* with the specified index.
*
* @param {String} selector A CSS selector that will fetch
* the group of slides we are working with
* @param {Number} index The index of the slide that should be
* shown
*
* @return {Number} The index of the slide that is now shown,
* might differ from the passed in index if it was out of
* bounds.
*/
function updateSlides( selector, index ) {
// Select all slides and convert the NodeList result to
// an array
var slides = Array.prototype.slice.call( document.querySelectorAll( selector ) );
if( slides.length ) {
// Enforce max and minimum index bounds
index = Math.max(Math.min(index, slides.length - 1), 0);
slides[index].setAttribute('class', 'present');
// Any element previous to index is given the 'past' class
slides.slice(0, index).map(function(element){
element.setAttribute('class', 'past');
});
// Any element subsequent to index is given the 'future' class
slides.slice(index + 1).map(function(element){
element.setAttribute('class', 'future');
});
}
else {
// Since there are no slides we can't be anywhere beyond the
// zeroth index
index = 0;
}
return index;
}
/**
* Updates the visual slides to represent the currently
* set indices.
*/
function slide() {
indexh = updateSlides( '#main>section', indexh );
indexv = updateSlides( 'section.present>section', indexv );
writeURL();
}
/**
* Reads the current URL (hash) and navigates accordingly.
*/
function readURL() {
// Break the hash down to separate components
var bits = window.location.hash.slice(2).split('/');
// Read the index components of the hash
indexh = bits[0] ? parseInt( bits[0] ) : 0;
indexv = bits[1] ? parseInt( bits[1] ) : 0;
navigateTo( indexh, indexv );
}
/**
* Updates the page URL (hash) to reflect the current
* navigational state.
*/
function writeURL() {
var url = '/';
// Only include the minimum possible number of components in
// the URL
if( indexh > 0 || indexv > 0 ) url += indexh
if( indexv > 0 ) url += '/' + indexv
window.location.hash = url;
}
/**
* Triggers a navigation to the specified indices.
*
* @param {Number} h The horizontal index of the slide to show
* @param {Number} v The vertical index of the slide to show
*/
function navigateTo( h, v ) {
indexh = h === undefined ? indexh : h;
indexv = v === undefined ? indexv : v;
slide();
}
function navigateLeft() {
indexh --;
indexv = 0;
slide();
}
function navigateRight() {
indexh ++;
indexv = 0;
slide();
}
function navigateUp() {
indexv --;
slide();
}
function navigateDown() {
indexv ++;
slide();
}
// Initialize the program. Done right before returning to ensure
// that any inline variable definitions are available to all
// functions
initialize();
// Expose some methods publicly
return {
navigateTo: navigateTo,
navigateLeft: navigateLeft,
navigateRight: navigateRight,
navigateUp: navigateUp,
navigateDown: navigateDown
};
})();