added new transitions (box/page) and a ui theme (neon)
This commit is contained in:
Hakim El Hattab
parent
1ac6386eef
commit
c7c7735e7a
640
css/main.css
640
css/main.css
|
|
@ -94,199 +94,6 @@ h1 {
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/*********************************************
|
|
||||||
* SLIDES
|
|
||||||
*********************************************/
|
|
||||||
#main {
|
|
||||||
position: absolute;
|
|
||||||
width: 900px;
|
|
||||||
height: 600px;
|
|
||||||
|
|
||||||
left: 50%;
|
|
||||||
top: 50%;
|
|
||||||
margin-left: -450px;
|
|
||||||
margin-top: -320px;
|
|
||||||
padding: 20px 0px;
|
|
||||||
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
-webkit-perspective: 600px;
|
|
||||||
-moz-perspective: 600px;
|
|
||||||
-ms-perspective: 600px;
|
|
||||||
perspective: 600px;
|
|
||||||
|
|
||||||
-webkit-perspective-origin: 50% 25%;
|
|
||||||
-moz-perspective-origin: 50% 25%;
|
|
||||||
-ms-perspective-origin: 50% 25%;
|
|
||||||
perspective-origin: 50% 25%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#main>section,
|
|
||||||
#main>section>section {
|
|
||||||
display: none;
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
min-height: 600px;
|
|
||||||
|
|
||||||
z-index: 10;
|
|
||||||
|
|
||||||
-webkit-transform-style: preserve-3d;
|
|
||||||
-moz-transform-style: preserve-3d;
|
|
||||||
-ms-transform-style: preserve-3d;
|
|
||||||
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);
|
|
||||||
-ms-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.present {
|
|
||||||
display: block;
|
|
||||||
z-index: 11;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*********************************************
|
|
||||||
* DEFAULT THEME
|
|
||||||
*********************************************/
|
|
||||||
|
|
||||||
#main section.past {
|
|
||||||
display: block;
|
|
||||||
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);
|
|
||||||
}
|
|
||||||
|
|
||||||
#main section.future {
|
|
||||||
display: block;
|
|
||||||
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);
|
|
||||||
}
|
|
||||||
|
|
||||||
#main section>section.past {
|
|
||||||
display: block;
|
|
||||||
opacity: 0;
|
|
||||||
|
|
||||||
-webkit-transform: translate3d(0, -50%, 0) rotateX(70deg) translate3d(0, -50%, 0);
|
|
||||||
-moz-transform: translate3d(0, -50%, 0) rotateX(70deg) translate3d(0, -50%, 0);
|
|
||||||
-ms-transform: translate3d(0, -50%, 0) rotateX(70deg) translate3d(0, -50%, 0);
|
|
||||||
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);
|
|
||||||
-moz-transform: translate3d(0, 50%, 0) rotateX(-70deg) translate3d(0, 50%, 0);
|
|
||||||
-ms-transform: translate3d(0, 50%, 0) rotateX(-70deg) translate3d(0, 50%, 0);
|
|
||||||
transform: translate3d(0, 50%, 0) rotateX(-70deg) translate3d(0, 50%, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*********************************************
|
|
||||||
* CONCAVE THEME
|
|
||||||
*********************************************/
|
|
||||||
|
|
||||||
.concave #main>section.past {
|
|
||||||
-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);
|
|
||||||
}
|
|
||||||
|
|
||||||
.concave #main>section.future {
|
|
||||||
-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);
|
|
||||||
}
|
|
||||||
|
|
||||||
.concave #main section>section.past {
|
|
||||||
-webkit-transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
|
|
||||||
-moz-transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
|
|
||||||
-ms-transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
|
|
||||||
transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
|
|
||||||
}
|
|
||||||
.concave #main section>section.future {
|
|
||||||
-webkit-transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
|
|
||||||
-moz-transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
|
|
||||||
-ms-transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
|
|
||||||
transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*********************************************
|
|
||||||
* LINEAR THEME
|
|
||||||
*********************************************/
|
|
||||||
|
|
||||||
.linear #main>section.past {
|
|
||||||
-webkit-transform: translate(-150%, 0);
|
|
||||||
-moz-transform: translate(-150%, 0);
|
|
||||||
-ms-transform: translate(-150%, 0);
|
|
||||||
-o-transform: translate(-150%, 0);
|
|
||||||
transform: translate(-150%, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
.linear #main>section.future {
|
|
||||||
-webkit-transform: translate(150%, 0);
|
|
||||||
-moz-transform: translate(150%, 0);
|
|
||||||
-ms-transform: translate(150%, 0);
|
|
||||||
-o-transform: translate(150%, 0);
|
|
||||||
transform: translate(150%, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
.linear #main section>section.past {
|
|
||||||
-webkit-transform: translate(0, -150%);
|
|
||||||
-moz-transform: translate(0, -150%);
|
|
||||||
-ms-transform: translate(0, -150%);
|
|
||||||
-o-transform: translate(0, -150%);
|
|
||||||
transform: translate(0, -150%);
|
|
||||||
}
|
|
||||||
.linear #main section>section.future {
|
|
||||||
-webkit-transform: translate(0, 150%);
|
|
||||||
-moz-transform: translate(0, 150%);
|
|
||||||
-ms-transform: translate(0, 150%);
|
|
||||||
-o-transform: translate(0, 150%);
|
|
||||||
transform: translate(0, 150%);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*********************************************
|
|
||||||
* OVERVIEW
|
|
||||||
*********************************************/
|
|
||||||
|
|
||||||
.overview #main section {
|
|
||||||
padding: 20px 0;
|
|
||||||
opacity: 1;
|
|
||||||
cursor: pointer;
|
|
||||||
background: rgba(0,0,0,0.1);
|
|
||||||
}
|
|
||||||
.overview #main section.present>section.present {
|
|
||||||
background: none;
|
|
||||||
}
|
|
||||||
.overview #main section>section {
|
|
||||||
opacity: 1;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.overview #main>section:hover {
|
|
||||||
background: rgba(0,0,0,0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.overview #main>section.present {
|
|
||||||
background: rgba(0,0,0,0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
* VIEW FRAGMENTS
|
* VIEW FRAGMENTS
|
||||||
*********************************************/
|
*********************************************/
|
||||||
|
|
@ -599,3 +406,450 @@ section img {
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*********************************************
|
||||||
|
* SLIDES
|
||||||
|
*********************************************/
|
||||||
|
|
||||||
|
#main {
|
||||||
|
position: absolute;
|
||||||
|
width: 900px;
|
||||||
|
height: 600px;
|
||||||
|
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
margin-left: -450px;
|
||||||
|
margin-top: -320px;
|
||||||
|
padding: 20px 0px;
|
||||||
|
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
-webkit-perspective: 600px;
|
||||||
|
-moz-perspective: 600px;
|
||||||
|
-ms-perspective: 600px;
|
||||||
|
perspective: 600px;
|
||||||
|
|
||||||
|
-webkit-perspective-origin: 50% 25%;
|
||||||
|
-moz-perspective-origin: 50% 25%;
|
||||||
|
-ms-perspective-origin: 50% 25%;
|
||||||
|
perspective-origin: 50% 25%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#main>section,
|
||||||
|
#main>section>section {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
min-height: 600px;
|
||||||
|
|
||||||
|
z-index: 10;
|
||||||
|
|
||||||
|
-webkit-transform-style: preserve-3d;
|
||||||
|
-moz-transform-style: preserve-3d;
|
||||||
|
-ms-transform-style: preserve-3d;
|
||||||
|
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);
|
||||||
|
-ms-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.present {
|
||||||
|
display: block;
|
||||||
|
z-index: 11;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*********************************************
|
||||||
|
* DEFAULT TRANSITION
|
||||||
|
*********************************************/
|
||||||
|
|
||||||
|
#main section.past {
|
||||||
|
display: block;
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
#main section.future {
|
||||||
|
display: block;
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
|
||||||
|
#main section>section.past {
|
||||||
|
display: block;
|
||||||
|
opacity: 0;
|
||||||
|
|
||||||
|
-webkit-transform: translate3d(0, -50%, 0) rotateX(70deg) translate3d(0, -50%, 0);
|
||||||
|
-moz-transform: translate3d(0, -50%, 0) rotateX(70deg) translate3d(0, -50%, 0);
|
||||||
|
-ms-transform: translate3d(0, -50%, 0) rotateX(70deg) translate3d(0, -50%, 0);
|
||||||
|
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);
|
||||||
|
-moz-transform: translate3d(0, 50%, 0) rotateX(-70deg) translate3d(0, 50%, 0);
|
||||||
|
-ms-transform: translate3d(0, 50%, 0) rotateX(-70deg) translate3d(0, 50%, 0);
|
||||||
|
transform: translate3d(0, 50%, 0) rotateX(-70deg) translate3d(0, 50%, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*********************************************
|
||||||
|
* CONCAVE TRANSITION
|
||||||
|
*********************************************/
|
||||||
|
|
||||||
|
.concave #main>section.past {
|
||||||
|
-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);
|
||||||
|
}
|
||||||
|
.concave #main>section.future {
|
||||||
|
-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);
|
||||||
|
}
|
||||||
|
|
||||||
|
.concave #main section>section.past {
|
||||||
|
-webkit-transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
|
||||||
|
-moz-transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
|
||||||
|
-ms-transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
|
||||||
|
transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
|
||||||
|
}
|
||||||
|
.concave #main section>section.future {
|
||||||
|
-webkit-transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
|
||||||
|
-moz-transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
|
||||||
|
-ms-transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
|
||||||
|
transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*********************************************
|
||||||
|
* LINEAR TRANSITION
|
||||||
|
*********************************************/
|
||||||
|
|
||||||
|
.linear #main>section.past {
|
||||||
|
-webkit-transform: translate(-150%, 0);
|
||||||
|
-moz-transform: translate(-150%, 0);
|
||||||
|
-ms-transform: translate(-150%, 0);
|
||||||
|
-o-transform: translate(-150%, 0);
|
||||||
|
transform: translate(-150%, 0);
|
||||||
|
}
|
||||||
|
.linear #main>section.future {
|
||||||
|
-webkit-transform: translate(150%, 0);
|
||||||
|
-moz-transform: translate(150%, 0);
|
||||||
|
-ms-transform: translate(150%, 0);
|
||||||
|
-o-transform: translate(150%, 0);
|
||||||
|
transform: translate(150%, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.linear #main section>section.past {
|
||||||
|
-webkit-transform: translate(0, -150%);
|
||||||
|
-moz-transform: translate(0, -150%);
|
||||||
|
-ms-transform: translate(0, -150%);
|
||||||
|
-o-transform: translate(0, -150%);
|
||||||
|
transform: translate(0, -150%);
|
||||||
|
}
|
||||||
|
.linear #main section>section.future {
|
||||||
|
-webkit-transform: translate(0, 150%);
|
||||||
|
-moz-transform: translate(0, 150%);
|
||||||
|
-ms-transform: translate(0, 150%);
|
||||||
|
-o-transform: translate(0, 150%);
|
||||||
|
transform: translate(0, 150%);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*********************************************
|
||||||
|
* BOX TRANSITION
|
||||||
|
*********************************************/
|
||||||
|
|
||||||
|
.box #main {
|
||||||
|
margin-top: -350px;
|
||||||
|
|
||||||
|
-webkit-perspective-origin: 50% 25%;
|
||||||
|
-moz-perspective-origin: 50% 25%;
|
||||||
|
-ms-perspective-origin: 50% 25%;
|
||||||
|
perspective-origin: 50% 25%;
|
||||||
|
|
||||||
|
-webkit-perspective: 1300px;
|
||||||
|
-moz-perspective: 1300px;
|
||||||
|
-ms-perspective: 1300px;
|
||||||
|
perspective: 1300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box #main section {
|
||||||
|
padding: 30px;
|
||||||
|
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
-moz-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.box #main section:not(.stack):before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
background: #292929;
|
||||||
|
border-radius: 4px;
|
||||||
|
|
||||||
|
-webkit-transform: translateZ( -20px );
|
||||||
|
-moz-transform: translateZ( -20px );
|
||||||
|
-ms-transform: translateZ( -20px );
|
||||||
|
-o-transform: translateZ( -20px );
|
||||||
|
transform: translateZ( -20px );
|
||||||
|
}
|
||||||
|
.box #main section:not(.stack):after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
display: block;
|
||||||
|
width: 90%;
|
||||||
|
height: 30px;
|
||||||
|
left: 5%;
|
||||||
|
bottom: 0;
|
||||||
|
background: none;
|
||||||
|
z-index: 1;
|
||||||
|
|
||||||
|
border-radius: 4px;
|
||||||
|
box-shadow: 0px 95px 25px rgba(0,0,0,0.2);
|
||||||
|
|
||||||
|
-webkit-transform: translateZ(-90px) rotateX( 65deg );
|
||||||
|
-moz-transform: translateZ(-90px) rotateX( 65deg );
|
||||||
|
-ms-transform: translateZ(-90px) rotateX( 65deg );
|
||||||
|
-o-transform: translateZ(-90px) rotateX( 65deg );
|
||||||
|
transform: translateZ(-90px) rotateX( 65deg );
|
||||||
|
}
|
||||||
|
|
||||||
|
.box #main section.stack {
|
||||||
|
padding: 0;
|
||||||
|
background: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box #main>section.past {
|
||||||
|
-webkit-transform-origin: 100% 0%;
|
||||||
|
-moz-transform-origin: 100% 0%;
|
||||||
|
-ms-transform-origin: 100% 0%;
|
||||||
|
transform-origin: 100% 0%;
|
||||||
|
|
||||||
|
-webkit-transform: translate3d(-100%, 0, 0) rotateY(-90deg);
|
||||||
|
-moz-transform: translate3d(-100%, 0, 0) rotateY(-90deg);
|
||||||
|
-ms-transform: translate3d(-100%, 0, 0) rotateY(-90deg);
|
||||||
|
transform: translate3d(-100%, 0, 0) rotateY(-90deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.box #main>section.future {
|
||||||
|
-webkit-transform-origin: 0% 0%;
|
||||||
|
-moz-transform-origin: 0% 0%;
|
||||||
|
-ms-transform-origin: 0% 0%;
|
||||||
|
transform-origin: 0% 0%;
|
||||||
|
|
||||||
|
-webkit-transform: translate3d(100%, 0, 0) rotateY(90deg);
|
||||||
|
-moz-transform: translate3d(100%, 0, 0) rotateY(90deg);
|
||||||
|
-ms-transform: translate3d(100%, 0, 0) rotateY(90deg);
|
||||||
|
transform: translate3d(100%, 0, 0) rotateY(90deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.box #main section>section.past {
|
||||||
|
-webkit-transform-origin: 0% 100%;
|
||||||
|
-moz-transform-origin: 0% 100%;
|
||||||
|
-ms-transform-origin: 0% 100%;
|
||||||
|
transform-origin: 0% 100%;
|
||||||
|
|
||||||
|
-webkit-transform: translate3d(0, -100%, 0) rotateX(90deg);
|
||||||
|
-moz-transform: translate3d(0, -100%, 0) rotateX(90deg);
|
||||||
|
-ms-transform: translate3d(0, -100%, 0) rotateX(90deg);
|
||||||
|
transform: translate3d(0, -100%, 0) rotateX(90deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.box #main section>section.future {
|
||||||
|
-webkit-transform-origin: 0% 0%;
|
||||||
|
-moz-transform-origin: 0% 0%;
|
||||||
|
-ms-transform-origin: 0% 0%;
|
||||||
|
transform-origin: 0% 0%;
|
||||||
|
|
||||||
|
-webkit-transform: translate3d(0, 100%, 0) rotateX(-90deg);
|
||||||
|
-moz-transform: translate3d(0, 100%, 0) rotateX(-90deg);
|
||||||
|
-ms-transform: translate3d(0, 100%, 0) rotateX(-90deg);
|
||||||
|
transform: translate3d(0, 100%, 0) rotateX(-90deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*********************************************
|
||||||
|
* PAGE TRANSITION
|
||||||
|
*********************************************/
|
||||||
|
|
||||||
|
.page #main {
|
||||||
|
margin-top: -350px;
|
||||||
|
|
||||||
|
-webkit-perspective-origin: 50% 50%;
|
||||||
|
-moz-perspective-origin: 50% 50%;
|
||||||
|
-ms-perspective-origin: 50% 50%;
|
||||||
|
perspective-origin: 50% 50%;
|
||||||
|
|
||||||
|
-webkit-perspective: 3000px;
|
||||||
|
-moz-perspective: 3000px;
|
||||||
|
-ms-perspective: 3000px;
|
||||||
|
perspective: 3000px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page #main section {
|
||||||
|
padding: 30px;
|
||||||
|
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
-moz-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.page #main section.past {
|
||||||
|
z-index: 12;
|
||||||
|
}
|
||||||
|
.page #main section:not(.stack):before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
background: #292929;
|
||||||
|
|
||||||
|
-webkit-transform: translateZ( -20px );
|
||||||
|
-moz-transform: translateZ( -20px );
|
||||||
|
-ms-transform: translateZ( -20px );
|
||||||
|
-o-transform: translateZ( -20px );
|
||||||
|
transform: translateZ( -20px );
|
||||||
|
}
|
||||||
|
.page #main section:not(.stack):after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
display: block;
|
||||||
|
width: 90%;
|
||||||
|
height: 30px;
|
||||||
|
left: 5%;
|
||||||
|
bottom: 0;
|
||||||
|
background: none;
|
||||||
|
z-index: 1;
|
||||||
|
|
||||||
|
border-radius: 4px;
|
||||||
|
box-shadow: 0px 95px 25px rgba(0,0,0,0.2);
|
||||||
|
|
||||||
|
-webkit-transform: translateZ(-90px) rotateX( 65deg );
|
||||||
|
}
|
||||||
|
|
||||||
|
.page #main section.stack {
|
||||||
|
padding: 0;
|
||||||
|
background: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page #main>section.past {
|
||||||
|
-webkit-transform-origin: 0% 0%;
|
||||||
|
-moz-transform-origin: 0% 0%;
|
||||||
|
-ms-transform-origin: 0% 0%;
|
||||||
|
transform-origin: 0% 0%;
|
||||||
|
|
||||||
|
-webkit-transform: translate3d(-40%, 0, 0) rotateY(-80deg);
|
||||||
|
-moz-transform: translate3d(-40%, 0, 0) rotateY(-80deg);
|
||||||
|
-ms-transform: translate3d(-40%, 0, 0) rotateY(-80deg);
|
||||||
|
transform: translate3d(-40%, 0, 0) rotateY(-80deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.page #main>section.future {
|
||||||
|
-webkit-transform-origin: 100% 0%;
|
||||||
|
-moz-transform-origin: 100% 0%;
|
||||||
|
-ms-transform-origin: 100% 0%;
|
||||||
|
transform-origin: 100% 0%;
|
||||||
|
|
||||||
|
-webkit-transform: translate3d(0, 0, 0);
|
||||||
|
-moz-transform: translate3d(0, 0, 0);
|
||||||
|
-ms-transform: translate3d(0, 0, 0);
|
||||||
|
transform: translate3d(0, 0, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.page #main section>section.past {
|
||||||
|
-webkit-transform-origin: 0% 0%;
|
||||||
|
-moz-transform-origin: 0% 0%;
|
||||||
|
-ms-transform-origin: 0% 0%;
|
||||||
|
transform-origin: 0% 0%;
|
||||||
|
|
||||||
|
-webkit-transform: translate3d(0, -40%, 0) rotateX(80deg);
|
||||||
|
-moz-transform: translate3d(0, -40%, 0) rotateX(80deg);
|
||||||
|
-ms-transform: translate3d(0, -40%, 0) rotateX(80deg);
|
||||||
|
transform: translate3d(0, -40%, 0) rotateX(80deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.page #main section>section.future {
|
||||||
|
-webkit-transform-origin: 0% 100%;
|
||||||
|
-moz-transform-origin: 0% 100%;
|
||||||
|
-ms-transform-origin: 0% 100%;
|
||||||
|
transform-origin: 0% 100%;
|
||||||
|
|
||||||
|
-webkit-transform: translate3d(0, 0, 0);
|
||||||
|
-moz-transform: translate3d(0, 0, 0);
|
||||||
|
-ms-transform: translate3d(0, 0, 0);
|
||||||
|
transform: translate3d(0, 0, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*********************************************
|
||||||
|
* NEON THEME
|
||||||
|
*********************************************/
|
||||||
|
|
||||||
|
.neon a,
|
||||||
|
.neon a:hover,
|
||||||
|
.neon .controls a.enabled {
|
||||||
|
color: #5de048;
|
||||||
|
}
|
||||||
|
|
||||||
|
.neon .progress span,
|
||||||
|
.neon .roll span:after {
|
||||||
|
background: #5de048;
|
||||||
|
}
|
||||||
|
|
||||||
|
a.image:hover img {
|
||||||
|
border-color: #5de048;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*********************************************
|
||||||
|
* OVERVIEW
|
||||||
|
*********************************************/
|
||||||
|
|
||||||
|
.overview #main section {
|
||||||
|
padding: 20px 0;
|
||||||
|
opacity: 1;
|
||||||
|
cursor: pointer;
|
||||||
|
background: rgba(0,0,0,0.1);
|
||||||
|
}
|
||||||
|
.overview #main section:after,
|
||||||
|
.overview #main section:before {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
.overview #main section>section {
|
||||||
|
opacity: 1;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.overview #main section:hover {
|
||||||
|
background: rgba(0,0,0,0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.overview #main section.present {
|
||||||
|
background: rgba(0,0,0,0.3);
|
||||||
|
}
|
||||||
|
.overview #main section.stack {
|
||||||
|
background: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
51
index.html
51
index.html
|
|
@ -195,6 +195,12 @@ linkify( 'a' );
|
||||||
<script src="js/reveal.js"></script>
|
<script src="js/reveal.js"></script>
|
||||||
<script src="lib/highlight.js"></script>
|
<script src="lib/highlight.js"></script>
|
||||||
<script>
|
<script>
|
||||||
|
// Parse the query string into a key/value object
|
||||||
|
var query = {};
|
||||||
|
location.search.replace( /[A-Z0-9]+?=(\w*)/gi, function(a) {
|
||||||
|
query[ a.split( '=' ).shift() ] = a.split( '=' ).pop();
|
||||||
|
} );
|
||||||
|
|
||||||
Reveal.initialize({
|
Reveal.initialize({
|
||||||
// Display controls in the bottom right corner
|
// Display controls in the bottom right corner
|
||||||
controls: true,
|
controls: true,
|
||||||
|
|
@ -205,13 +211,54 @@ linkify( 'a' );
|
||||||
// Apply a 3D roll to links on hover
|
// Apply a 3D roll to links on hover
|
||||||
rollingLinks: true,
|
rollingLinks: true,
|
||||||
|
|
||||||
// Styling themes, only affects transitions for now
|
// UI style
|
||||||
theme: 'default' // default/concave/linear
|
theme: query.theme || 'default', // default/neon
|
||||||
|
|
||||||
|
// Transition style
|
||||||
|
transition: query.transition || 'default' // default/box/page/concave/linear(2d),
|
||||||
});
|
});
|
||||||
|
|
||||||
hljs.initHighlightingOnLoad();
|
hljs.initHighlightingOnLoad();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Everything below this point is unrelated to the slideshow -->
|
||||||
|
|
||||||
|
<div style="position: absolute; bottom: 10px; left: 50%; margin-left: -160px">
|
||||||
|
<a href="http://twitter.com/share" class="twitter-share-button" data-text="reveal.js - a 3D slideshow tool from @hakimel." data-url="http://lab.hakim.se/reveal-js" data-count="small" data-related="hakimel"></a>
|
||||||
|
|
||||||
|
<iframe id="facebook-button" src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fapp.hakim.se%2Freveal-js%2F&layout=button_count&show_faces=false&width=93&action=like&font=arial&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:85px; height:24px; position: relative; top: 4px;" allowTransparency="true"></iframe>
|
||||||
|
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
|
||||||
|
|
||||||
|
<script type="text/javascript">
|
||||||
|
/* <![CDATA[ */
|
||||||
|
(function() {
|
||||||
|
var s = document.createElement('script'), t = document.getElementsByTagName('script')[0];
|
||||||
|
s.type = 'text/javascript';
|
||||||
|
s.async = true;
|
||||||
|
s.src = 'http://api.flattr.com/js/0.6/load.js?mode=auto';
|
||||||
|
t.parentNode.insertBefore(s, t);
|
||||||
|
})();
|
||||||
|
/* ]]> */
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<a class="FlattrButton" style="display:none;" rev="flattr;button:compact;" href="http://lab.hakim.se/reveal-js"></a>
|
||||||
|
<noscript><a href="http://flattr.com/thing/447435/Reveal-js" target="_blank">
|
||||||
|
<img src="http://api.flattr.com/button/flattr-badge-large.png" alt="Flattr this" title="Flattr this" border="0" /></a></noscript>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<a href="https://github.com/hakimel/reveal.js"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://a248.e.akamai.net/assets.github.com/img/7afbc8b248c68eb468279e8c17986ad46549fb71/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub"></a>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
16
js/reveal.js
16
js/reveal.js
|
|
@ -62,6 +62,9 @@
|
||||||
* version 1.1:
|
* version 1.1:
|
||||||
* - Optional progress bar UI element
|
* - Optional progress bar UI element
|
||||||
* - Slide overview available via SPACE
|
* - Slide overview available via SPACE
|
||||||
|
* - Added 'transition' option for specifying transition styles
|
||||||
|
* - Added 'theme' option for specifying UI styles
|
||||||
|
* - Slides that contain nested-slides are given the 'stack' class
|
||||||
*
|
*
|
||||||
* TODO:
|
* TODO:
|
||||||
* - Touch/swipe interactions
|
* - Touch/swipe interactions
|
||||||
|
|
@ -83,6 +86,7 @@ var Reveal = (function(){
|
||||||
// > {Boolean} controls
|
// > {Boolean} controls
|
||||||
// > {Boolean} progress
|
// > {Boolean} progress
|
||||||
// > {String} theme
|
// > {String} theme
|
||||||
|
// > {String} transition
|
||||||
// > {Boolean} rollingLinks
|
// > {Boolean} rollingLinks
|
||||||
config = {},
|
config = {},
|
||||||
|
|
||||||
|
|
@ -122,11 +126,12 @@ var Reveal = (function(){
|
||||||
config.rollingLinks = options.rollingLinks === undefined ? true : options.rollingLinks;
|
config.rollingLinks = options.rollingLinks === undefined ? true : options.rollingLinks;
|
||||||
config.controls = options.controls === undefined ? false : options.controls;
|
config.controls = options.controls === undefined ? false : options.controls;
|
||||||
config.progress = options.progress === undefined ? false : options.progress;
|
config.progress = options.progress === undefined ? false : options.progress;
|
||||||
|
config.transition = options.transition === undefined ? 'default' : options.transition;
|
||||||
config.theme = options.theme === undefined ? 'default' : options.theme;
|
config.theme = options.theme === undefined ? 'default' : options.theme;
|
||||||
|
|
||||||
// Fall back on the 2D transform theme 'linear'
|
// Fall back on the 2D transform theme 'linear'
|
||||||
if( supports3DTransforms === false ) {
|
if( supports3DTransforms === false ) {
|
||||||
config.theme = 'linear';
|
config.transition = 'linear';
|
||||||
}
|
}
|
||||||
|
|
||||||
if( config.controls ) {
|
if( config.controls ) {
|
||||||
|
|
@ -137,6 +142,10 @@ var Reveal = (function(){
|
||||||
dom.progress.style.display = 'block';
|
dom.progress.style.display = 'block';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if( config.transition !== 'default' ) {
|
||||||
|
document.body.classList.add( config.transition );
|
||||||
|
}
|
||||||
|
|
||||||
if( config.theme !== 'default' ) {
|
if( config.theme !== 'default' ) {
|
||||||
document.body.classList.add( config.theme );
|
document.body.classList.add( config.theme );
|
||||||
}
|
}
|
||||||
|
|
@ -417,6 +426,11 @@ var Reveal = (function(){
|
||||||
// Any element subsequent to index is given the 'future' class
|
// Any element subsequent to index is given the 'future' class
|
||||||
slide.setAttribute('class', 'future');
|
slide.setAttribute('class', 'future');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// If this element contains vertical slides
|
||||||
|
if( slide.querySelector( 'section' ) ) {
|
||||||
|
slide.classList.add( 'stack' );
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue