nav animation
This commit is contained in:
parent
dbc82b0711
commit
61ee90400e
217
index.html
217
index.html
@ -1,6 +1,7 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" >
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
|
||||
@ -26,7 +27,7 @@ section
|
||||
position:relative;
|
||||
height: 100vh;
|
||||
box-sizing: border-box;
|
||||
padding:50px;
|
||||
padding:20px;
|
||||
}
|
||||
|
||||
|
||||
@ -35,7 +36,8 @@ h2
|
||||
display:flex;
|
||||
align-items: center;
|
||||
box-sizing:border-box;
|
||||
width:500px;
|
||||
width:100%;
|
||||
max-width:500px;
|
||||
margin:0 auto;
|
||||
padding:5px 20px 5px 20px;
|
||||
text-align:center;
|
||||
@ -283,90 +285,135 @@ var Spy =
|
||||
<style>
|
||||
nav
|
||||
{
|
||||
border: 20px solid #0000;
|
||||
/* margin: 20px; */
|
||||
/* padding: 20px; */
|
||||
/* margin: 7px; */
|
||||
/* padding: 10px; */
|
||||
position: fixed;
|
||||
display: block;
|
||||
top: 0px;
|
||||
bottom: 0;
|
||||
right: 0px;
|
||||
width: 200px;
|
||||
z-index: 10;
|
||||
height: 85px;
|
||||
height: 66px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0px 3px 10px black;
|
||||
transition: height 0.4s;
|
||||
box-sizing: border-box;
|
||||
/* box-sizing: border-box; */
|
||||
}
|
||||
nav:hover{
|
||||
height:100%;
|
||||
}
|
||||
nav > span.cap
|
||||
nav > .detail
|
||||
{
|
||||
display:block;
|
||||
position:absolute;
|
||||
left:0;
|
||||
width:33px;
|
||||
right:0;
|
||||
transition: width 0.4s 0.4s;
|
||||
}
|
||||
|
||||
[nav-open] nav
|
||||
{
|
||||
height:100%;
|
||||
}
|
||||
[nav-open] nav > .detail
|
||||
{
|
||||
width:100%;
|
||||
|
||||
}
|
||||
nav > .detail.cap
|
||||
{
|
||||
height:33px;
|
||||
}
|
||||
nav > span.cap--top
|
||||
nav > .detail.cap--top
|
||||
{
|
||||
top:0;
|
||||
top:10px;
|
||||
}
|
||||
nav > span.cap--bottom
|
||||
nav > .detail.cap--bottom
|
||||
{
|
||||
bottom:0;
|
||||
bottom:10px;
|
||||
}
|
||||
nav > span.cap::before
|
||||
nav > .detail.cap::before
|
||||
{
|
||||
position: relative;
|
||||
left: -10px;
|
||||
content: "⬦";
|
||||
line-height: 37px;
|
||||
font-size: 60px;
|
||||
font-weight:900;
|
||||
text-indent:-10px;
|
||||
display: block;
|
||||
position: relative;
|
||||
top: 0px;
|
||||
width: 0%;
|
||||
height: 31px;
|
||||
background: #000;
|
||||
transition: width 0.4s;
|
||||
font-weight: 900;
|
||||
text-indent: -10px;
|
||||
}
|
||||
nav > span.edge
|
||||
nav > .detail.edge
|
||||
{
|
||||
border: 30px solid transparent;
|
||||
border: 40px solid transparent;
|
||||
border-right: 0px;
|
||||
border-left: 0px;
|
||||
content: " ";
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
nav > .detail.edge::before
|
||||
{
|
||||
content: " ";
|
||||
display: block;
|
||||
position: absolute;
|
||||
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 14px;
|
||||
width: 5px;
|
||||
height: 100%;
|
||||
|
||||
box-sizing: border-box;
|
||||
background: #000;
|
||||
}
|
||||
nav > span.edge::before
|
||||
nav .button
|
||||
{
|
||||
content:" ";
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left:0%;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 66px;
|
||||
transition: left 0.4s 0.4s;
|
||||
}
|
||||
nav .button::before, nav .button::after
|
||||
{
|
||||
|
||||
display:block;
|
||||
position:absolute;
|
||||
top:0;
|
||||
left:-16px;
|
||||
width:5px;
|
||||
height:100%;
|
||||
background:black;
|
||||
top:20px;
|
||||
left:0;
|
||||
width:100%;
|
||||
text-align: center;
|
||||
text-transform:uppercase;
|
||||
font-weight:900;
|
||||
}
|
||||
nav .button::before
|
||||
{
|
||||
content:"Menu";
|
||||
}
|
||||
nav .button::after
|
||||
{
|
||||
content:"Close";
|
||||
left:-100%;
|
||||
}
|
||||
[nav-open] nav .button
|
||||
{
|
||||
left:100%;
|
||||
}
|
||||
nav > ul
|
||||
{
|
||||
position:relative;
|
||||
padding:10px;
|
||||
margin:32px 0 32px 0;
|
||||
position: absolute;
|
||||
padding: 31px;
|
||||
margin: 0;
|
||||
top: 50vh;
|
||||
left:100%;
|
||||
width:100%;
|
||||
transform: translateY(-50%);
|
||||
transition:left 0.4s 0.5s;
|
||||
}
|
||||
[nav-open] nav > ul
|
||||
{
|
||||
left:0%;
|
||||
}
|
||||
</style>
|
||||
<nav>
|
||||
<span class="cap cap--top"></span>
|
||||
<span class="cap cap--bottom"></span>
|
||||
<span class="edge"></span>
|
||||
<span class="detail edge"></span>
|
||||
<span class="detail cap cap--top"></span>
|
||||
<span class="detail cap cap--bottom"></span>
|
||||
|
||||
<ul>
|
||||
<li><a href="#top" >Top</a></li>
|
||||
<li><a href="#order">Order</a></li>
|
||||
@ -376,70 +423,11 @@ nav > ul
|
||||
<li><a href="#email">Sign-up</a></li>
|
||||
</ul>
|
||||
|
||||
<span class="button"></span>
|
||||
</nav>
|
||||
<main>
|
||||
<section id="order">
|
||||
|
||||
<style>
|
||||
.shot3d
|
||||
{
|
||||
transform: perspective(1000px) rotateY(25deg);
|
||||
transform-style: preserve-3d;
|
||||
perspective-origin: 50% 50%;
|
||||
|
||||
position: relative;
|
||||
width: 350px;
|
||||
height: 350px;
|
||||
line-height: 350px;
|
||||
|
||||
text-align:center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.shot3d__shadow
|
||||
{
|
||||
display: inline;
|
||||
position: relative;
|
||||
|
||||
outline: 2px solid blue;
|
||||
font-size: 0px;
|
||||
line-height:0;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
.shot3d__shadow::after, .shot3d__shadow::before
|
||||
{
|
||||
transform-origin: center 30px;
|
||||
position: absolute;
|
||||
padding: 0 6px 0 6px;
|
||||
content: " ";
|
||||
top: 100%;
|
||||
left: -6px;
|
||||
width: 100%;
|
||||
height: 6px;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0px 30px 14px black, 0px 43px 22px black, 0px 60px 33px black;
|
||||
}
|
||||
|
||||
.shot3d__shadow::before{ transform: translateY(-30px) rotateX(-90deg) translateY( 5px); }
|
||||
.shot3d__shadow::after { transform: translateY(-30px) rotateX( 90deg) translateY( 5px); }
|
||||
|
||||
.shot3d__shadow img
|
||||
{
|
||||
vertical-align: bottom;
|
||||
display: inline;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div class="shot3d">
|
||||
<div class="shot3d__shadow">
|
||||
<img class="panel panel--front" src="https://placekitten.com/400/800"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h2 data-spy="0.2|0.8"><span></span><span>Order</span><span></span></h2>
|
||||
<h3>Truth For Life</h3>
|
||||
<h4>365 Daily Devotionals</h4>
|
||||
@ -486,6 +474,21 @@ nav > ul
|
||||
</section>
|
||||
</main>
|
||||
<script>
|
||||
|
||||
|
||||
function $(inSelector){ return document.querySelectorAll(inSelector); }
|
||||
$("nav .button")[0].addEventListener("click", function()
|
||||
{
|
||||
if(document.body.hasAttribute("nav-open"))
|
||||
{
|
||||
document.body.removeAttribute("nav-open");
|
||||
}
|
||||
else
|
||||
{
|
||||
document.body.setAttribute("nav-open", true);
|
||||
}
|
||||
})
|
||||
|
||||
Spy.Init();
|
||||
function JobDuration(inDuration, inHandler, inDone)
|
||||
{
|
||||
|
||||
Loading…
Reference in New Issue
Block a user