xobs/fa23-si
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add concave and zoom background transitions

Browse Source
This commit is contained in:
Hakim El Hattab 2013-11-04 07:53:07 -05:00
parent d4e6fa12bf
commit 7da98d8110
4 changed files with 100 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -137,7 +137,7 @@ Reveal.initialize({
transitionSpeed: 'default', // default/fast/slow transitionSpeed: 'default', // default/fast/slow
// Transition style for full page slide backgrounds // Transition style for full page slide backgrounds
backgroundTransition: 'default', // default/linear/none backgroundTransition: 'default', // default/none/slide/concave/convex/zoom
// Number of slides away from the current that are visible // Number of slides away from the current that are visible
viewDistance: 3, viewDistance: 3,

107
css/reveal.css
View File

@ -1312,7 +1312,7 @@ body {
transition: none; transition: none;
} }
/* Linear sliding transition style */ /* 2D slide */
.reveal[data-background-transition=slide]>.backgrounds .slide-background, .reveal[data-background-transition=slide]>.backgrounds .slide-background,
.reveal>.backgrounds .slide-background[data-background-transition=slide] { .reveal>.backgrounds .slide-background[data-background-transition=slide] {
opacity: 1; opacity: 1;
@ -1363,7 +1363,7 @@ body {
} }
/* Curve sliding transition style */ /* Convex */
.reveal[data-background-transition=convex]>.backgrounds .slide-background.past, .reveal[data-background-transition=convex]>.backgrounds .slide-background.past,
.reveal>.backgrounds .slide-background.past[data-background-transition=convex] { .reveal>.backgrounds .slide-background.past[data-background-transition=convex] {
opacity: 0; opacity: 0;
@ -1387,19 +1387,106 @@ body {
.reveal>.backgrounds .slide-background>.slide-background.past[data-background-transition=convex] { .reveal>.backgrounds .slide-background>.slide-background.past[data-background-transition=convex] {
opacity: 0; opacity: 0;
-webkit-transform: translate3d(0, -300px, 0) rotateX(90deg) translate3d(0, -300px, 0); -webkit-transform: translate3d(0, -100%, 0) rotateX(90deg) translate3d(0, -100%, 0);
-moz-transform: translate3d(0, -300px, 0) rotateX(90deg) translate3d(0, -300px, 0); -moz-transform: translate3d(0, -100%, 0) rotateX(90deg) translate3d(0, -100%, 0);
-ms-transform: translate3d(0, -300px, 0) rotateX(90deg) translate3d(0, -300px, 0); -ms-transform: translate3d(0, -100%, 0) rotateX(90deg) translate3d(0, -100%, 0);
transform: translate3d(0, -300px, 0) rotateX(90deg) translate3d(0, -300px, 0); transform: translate3d(0, -100%, 0) rotateX(90deg) translate3d(0, -100%, 0);
} }
.reveal[data-background-transition=convex]>.backgrounds .slide-background>.slide-background.future, .reveal[data-background-transition=convex]>.backgrounds .slide-background>.slide-background.future,
.reveal>.backgrounds .slide-background>.slide-background.future[data-background-transition=convex] { .reveal>.backgrounds .slide-background>.slide-background.future[data-background-transition=convex] {
opacity: 0; opacity: 0;
-webkit-transform: translate3d(0, 300px, 0) rotateX(-90deg) translate3d(0, 300px, 0); -webkit-transform: translate3d(0, 100%, 0) rotateX(-90deg) translate3d(0, 100%, 0);
-moz-transform: translate3d(0, 300px, 0) rotateX(-90deg) translate3d(0, 300px, 0); -moz-transform: translate3d(0, 100%, 0) rotateX(-90deg) translate3d(0, 100%, 0);
-ms-transform: translate3d(0, 300px, 0) rotateX(-90deg) translate3d(0, 300px, 0); -ms-transform: translate3d(0, 100%, 0) rotateX(-90deg) translate3d(0, 100%, 0);
transform: translate3d(0, 300px, 0) rotateX(-90deg) translate3d(0, 300px, 0); transform: translate3d(0, 100%, 0) rotateX(-90deg) translate3d(0, 100%, 0);
}
/* Concave */
.reveal[data-background-transition=concave]>.backgrounds .slide-background.past,
.reveal>.backgrounds .slide-background.past[data-background-transition=concave] {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
-ms-transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
}
.reveal[data-background-transition=concave]>.backgrounds .slide-background.future,
.reveal>.backgrounds .slide-background.future[data-background-transition=concave] {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
-moz-transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
}
.reveal[data-background-transition=concave]>.backgrounds .slide-background>.slide-background.past,
.reveal>.backgrounds .slide-background>.slide-background.past[data-background-transition=concave] {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0) rotateX(-90deg) translate3d(0, -100%, 0);
-moz-transform: translate3d(0, -100%, 0) rotateX(-90deg) translate3d(0, -100%, 0);
-ms-transform: translate3d(0, -100%, 0) rotateX(-90deg) translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0) rotateX(-90deg) translate3d(0, -100%, 0);
}
.reveal[data-background-transition=concave]>.backgrounds .slide-background>.slide-background.future,
.reveal>.backgrounds .slide-background>.slide-background.future[data-background-transition=concave] {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0) rotateX(90deg) translate3d(0, 100%, 0);
-moz-transform: translate3d(0, 100%, 0) rotateX(90deg) translate3d(0, 100%, 0);
-ms-transform: translate3d(0, 100%, 0) rotateX(90deg) translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0) rotateX(90deg) translate3d(0, 100%, 0);
}
/* Zoom */
.reveal[data-background-transition=zoom]>.backgrounds .slide-background.past,
.reveal>.backgrounds .slide-background.past[data-background-transition=zoom] {
opacity: 0;
visibility: hidden;
-webkit-transform: scale(16);
-moz-transform: scale(16);
-ms-transform: scale(16);
-o-transform: scale(16);
transform: scale(16);
}
.reveal[data-background-transition=zoom]>.backgrounds .slide-background.future,
.reveal>.backgrounds .slide-background.future[data-background-transition=zoom] {
opacity: 0;
visibility: hidden;
-webkit-transform: scale(0.2);
-moz-transform: scale(0.2);
-ms-transform: scale(0.2);
-o-transform: scale(0.2);
transform: scale(0.2);
}
.reveal[data-background-transition=zoom]>.backgrounds .slide-background>.slide-background.past,
.reveal>.backgrounds .slide-background>.slide-background.past[data-background-transition=zoom] {
opacity: 0;
visibility: hidden;
-webkit-transform: scale(16);
-moz-transform: scale(16);
-ms-transform: scale(16);
-o-transform: scale(16);
transform: scale(16);
}
.reveal[data-background-transition=zoom]>.backgrounds .slide-background>.slide-background.future,
.reveal>.backgrounds .slide-background>.slide-background.future[data-background-transition=zoom] {
opacity: 0;
visibility: hidden;
-webkit-transform: scale(0.2);
-moz-transform: scale(0.2);
-ms-transform: scale(0.2);
-o-transform: scale(0.2);
transform: scale(0.2);
} }

2
css/reveal.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
test/examples/slide-backgrounds.html
View File

@ -113,7 +113,7 @@
transition: 'linear', transition: 'linear',
// transitionSpeed: 'slow', // transitionSpeed: 'slow',
// backgroundTransition: 'linear' // backgroundTransition: 'slide'
}); });
</script> </script>