asteroid/css/modules/_outer-nav.sass

113 lines
2.1 KiB
Sass

// tympanus.net/codrops/2013/12/18/perspective-page-view-navigation/
.perspective
position: relative
width: 100%
height: 100%
overflow: hidden
&--modalview
position: fixed
perspective: 1500px
.container
position: relative
transform: translateZ(0) translateX(0) rotateY(0deg)
min-height: 100%
outline: 30px solid $highlight
transition: transform .4s
.modalview
.container
position: absolute
width: 100%
height: 100%
overflow: hidden
backface-visibility: hidden
.effect-rotate-left
.container
transform-origin: 0% 50%
transition: transform .4s
&--animate
.container
transform: translateZ(-1800px) translateX(-50%) rotateY(45deg)
outline: 30px solid $highlight
.outer-nav
position: absolute
top: 50%
left: 55%
transform: translateY(-50%)
transform-style: preserve-3d
margin: 0
padding: 0
list-style: none
text-align: center
visibility: hidden
transition: visibility 0s .2s
&.is-vis
visibility: visible
&--return
position: absolute
top: 0
left: 0
width: 100%
height: 100%
display: none
cursor: pointer
z-index: 11
&.is-vis
display: block
& > li
transform-style: preserve-3d
transform: translateX(350px) translateZ(-1000px)
font-size: 55px
font-weight: 900
opacity: 0
cursor: pointer
transition: transform .2s, opacity .2s
&.is-vis
transform: translateX(0) translateZ(0)
opacity: 1
transition: transform .4s, opacity .4s
&::before
content: ""
position: absolute
top: 50%
left: 50%
transform: translate(-50%, -25%)
width: 110%
height: 15px
opacity: 0
background-color: $highlight
&.is-active::before
opacity: 1
@media (max-width: 767px)
font-size: 44px
@media (max-width: 600px)
font-size: 34px
li.is-vis:nth-child(2)
transition-delay: .04s
li.is-vis:nth-child(3)
transition-delay: .08s
li.is-vis:nth-child(4)
transition-delay: .12s
li.is-vis:nth-child(5)
transition-delay: .16s