added new transitions (box/page) and a ui theme (neon)
This commit is contained in:
Hakim El Hattab
parent
1ac6386eef
commit
c7c7735e7a
3 changed files with 511 additions and 196 deletions
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
|
||||
*********************************************/
|
||||
|
|
@ -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="lib/highlight.js"></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({
|
||||
// Display controls in the bottom right corner
|
||||
controls: true,
|
||||
|
|
@ -205,13 +211,54 @@ linkify( 'a' );
|
|||
// Apply a 3D roll to links on hover
|
||||
rollingLinks: true,
|
||||
|
||||
// Styling themes, only affects transitions for now
|
||||
theme: 'default' // default/concave/linear
|
||||
// UI style
|
||||
theme: query.theme || 'default', // default/neon
|
||||
|
||||
// Transition style
|
||||
transition: query.transition || 'default' // default/box/page/concave/linear(2d),
|
||||
});
|
||||
|
||||
hljs.initHighlightingOnLoad();
|
||||
</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>
|
||||
</html>
|
||||
16
js/reveal.js
16
js/reveal.js
|
|
@ -62,6 +62,9 @@
|
|||
* version 1.1:
|
||||
* - Optional progress bar UI element
|
||||
* - 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:
|
||||
* - Touch/swipe interactions
|
||||
|
|
@ -83,6 +86,7 @@ var Reveal = (function(){
|
|||
// > {Boolean} controls
|
||||
// > {Boolean} progress
|
||||
// > {String} theme
|
||||
// > {String} transition
|
||||
// > {Boolean} rollingLinks
|
||||
config = {},
|
||||
|
||||
|
|
@ -122,11 +126,12 @@ var Reveal = (function(){
|
|||
config.rollingLinks = options.rollingLinks === undefined ? true : options.rollingLinks;
|
||||
config.controls = options.controls === undefined ? false : options.controls;
|
||||
config.progress = options.progress === undefined ? false : options.progress;
|
||||
config.transition = options.transition === undefined ? 'default' : options.transition;
|
||||
config.theme = options.theme === undefined ? 'default' : options.theme;
|
||||
|
||||
// Fall back on the 2D transform theme 'linear'
|
||||
if( supports3DTransforms === false ) {
|
||||
config.theme = 'linear';
|
||||
config.transition = 'linear';
|
||||
}
|
||||
|
||||
if( config.controls ) {
|
||||
|
|
@ -137,6 +142,10 @@ var Reveal = (function(){
|
|||
dom.progress.style.display = 'block';
|
||||
}
|
||||
|
||||
if( config.transition !== 'default' ) {
|
||||
document.body.classList.add( config.transition );
|
||||
}
|
||||
|
||||
if( config.theme !== 'default' ) {
|
||||
document.body.classList.add( config.theme );
|
||||
}
|
||||
|
|
@ -417,6 +426,11 @@ var Reveal = (function(){
|
|||
// Any element subsequent to index is given the 'future' class
|
||||
slide.setAttribute('class', 'future');
|
||||
}
|
||||
|
||||
// If this element contains vertical slides
|
||||
if( slide.querySelector( 'section' ) ) {
|
||||
slide.classList.add( 'stack' );
|
||||
}
|
||||
}
|
||||
}
|
||||
else {
|
||||
|
|
|
|||
Loading…
Reference in a new issue