Last active
December 15, 2015 11:19
-
-
Save lakenen/5251958 to your computer and use it in GitHub Desktop.
Crocodoc 3D Demo #2
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* ... */ | |
.page-transitions .page-layer { | |
/* cheating a bit and adding a transition to "all" properties */ | |
transition: all 0.3s; | |
} | |
.page-layer:first-child, | |
.page-exploded .page-layer { | |
background: rgba(255,255,255,0.03); | |
border-color: rgba(180,180,180,0.2); | |
color: rgba(255,255,255,0.25); | |
text-shadow: 1px 1px 5px rgba(0,0,0,0.25); | |
} | |
/* ... */ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function Page($el) { | |
var exploded = false; | |
/* ... */ | |
// we'll add the following methods to the Page object: | |
self.enableTransitions = function () { | |
$el.addClass('page-transitions'); | |
}; | |
self.disableTransitions = function () { | |
$el.removeClass('page-transitions'); | |
}; | |
self.toggleExploded = function () { | |
exploded = !exploded; | |
if (exploded) $el.addClass('page-exploded'); | |
else $el.removeClass('page-exploded'); | |
updateLayers(); | |
}; | |
// and a small modification to applyTransform: | |
applyTransform = function ($layer) { | |
var z = exploded ? $layer.index() * LAYER_SPACING : 0; | |
var matrix = rotationMatrix.translate(0, 0, z); | |
$layer.css('transform', matrix.toString()); | |
}; | |
/* ... */ | |
} | |
// we'll need to modify the event handling a bit, because we don't want the page to | |
// try to transition while we're dragging it around | |
$(document).on('mousedown', function (ev) { | |
/* ... */ | |
// disable transitions when the mouse is down so it doesn't try to transition | |
// while dragging the page around | |
page.disableTransitions(); | |
/* ... */ | |
$(document).on('mouseup', function (ev) { | |
/* ... */ | |
// enable transitions again! | |
page.enableTransitions(); | |
/* ... */ | |
}); | |
/* ... */ | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment