nav animation
This commit is contained in:
parent
dbc82b0711
commit
61ee90400e
207
index.html
207
index.html
@ -1,6 +1,7 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" >
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<style>
|
<style>
|
||||||
|
|
||||||
@ -26,7 +27,7 @@ section
|
|||||||
position:relative;
|
position:relative;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding:50px;
|
padding:20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@ -35,7 +36,8 @@ h2
|
|||||||
display:flex;
|
display:flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
box-sizing:border-box;
|
box-sizing:border-box;
|
||||||
width:500px;
|
width:100%;
|
||||||
|
max-width:500px;
|
||||||
margin:0 auto;
|
margin:0 auto;
|
||||||
padding:5px 20px 5px 20px;
|
padding:5px 20px 5px 20px;
|
||||||
text-align:center;
|
text-align:center;
|
||||||
@ -283,90 +285,135 @@ var Spy =
|
|||||||
<style>
|
<style>
|
||||||
nav
|
nav
|
||||||
{
|
{
|
||||||
border: 20px solid #0000;
|
/* margin: 7px; */
|
||||||
/* margin: 20px; */
|
/* padding: 10px; */
|
||||||
/* padding: 20px; */
|
|
||||||
position: fixed;
|
position: fixed;
|
||||||
display: block;
|
display: block;
|
||||||
top: 0px;
|
bottom: 0;
|
||||||
right: 0px;
|
right: 0px;
|
||||||
width: 200px;
|
width: 200px;
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
height: 85px;
|
height: 66px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
box-shadow: 0px 3px 10px black;
|
|
||||||
transition: height 0.4s;
|
transition: height 0.4s;
|
||||||
box-sizing: border-box;
|
/* box-sizing: border-box; */
|
||||||
}
|
}
|
||||||
nav:hover{
|
nav > .detail
|
||||||
height:100%;
|
|
||||||
}
|
|
||||||
nav > span.cap
|
|
||||||
{
|
{
|
||||||
display:block;
|
display:block;
|
||||||
position:absolute;
|
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%;
|
width:100%;
|
||||||
|
|
||||||
|
}
|
||||||
|
nav > .detail.cap
|
||||||
|
{
|
||||||
height:33px;
|
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: "⬦";
|
content: "⬦";
|
||||||
line-height: 37px;
|
line-height: 37px;
|
||||||
font-size: 60px;
|
font-size: 60px;
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
text-indent: -10px;
|
text-indent: -10px;
|
||||||
display: block;
|
|
||||||
position: relative;
|
|
||||||
top: 0px;
|
|
||||||
width: 0%;
|
|
||||||
height: 31px;
|
|
||||||
background: #000;
|
|
||||||
transition: width 0.4s;
|
|
||||||
}
|
}
|
||||||
nav > span.edge
|
nav > .detail.edge
|
||||||
{
|
{
|
||||||
border: 30px solid transparent;
|
border: 40px solid transparent;
|
||||||
border-right: 0px;
|
border-right: 0px;
|
||||||
|
border-left: 0px;
|
||||||
content: " ";
|
content: " ";
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
nav > span.edge::before
|
nav > .detail.edge::before
|
||||||
{
|
{
|
||||||
content: " ";
|
content: " ";
|
||||||
display: block;
|
display: block;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left:-16px;
|
left: 14px;
|
||||||
width: 5px;
|
width: 5px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background:black;
|
background: #000;
|
||||||
|
}
|
||||||
|
nav .button
|
||||||
|
{
|
||||||
|
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: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
|
nav > ul
|
||||||
{
|
{
|
||||||
position:relative;
|
position: absolute;
|
||||||
padding:10px;
|
padding: 31px;
|
||||||
margin:32px 0 32px 0;
|
margin: 0;
|
||||||
|
top: 50vh;
|
||||||
|
left:100%;
|
||||||
|
width:100%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
transition:left 0.4s 0.5s;
|
||||||
|
}
|
||||||
|
[nav-open] nav > ul
|
||||||
|
{
|
||||||
|
left:0%;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<nav>
|
<nav>
|
||||||
<span class="cap cap--top"></span>
|
<span class="detail edge"></span>
|
||||||
<span class="cap cap--bottom"></span>
|
<span class="detail cap cap--top"></span>
|
||||||
<span class="edge"></span>
|
<span class="detail cap cap--bottom"></span>
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="#top" >Top</a></li>
|
<li><a href="#top" >Top</a></li>
|
||||||
<li><a href="#order">Order</a></li>
|
<li><a href="#order">Order</a></li>
|
||||||
@ -376,70 +423,11 @@ nav > ul
|
|||||||
<li><a href="#email">Sign-up</a></li>
|
<li><a href="#email">Sign-up</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
|
<span class="button"></span>
|
||||||
</nav>
|
</nav>
|
||||||
<main>
|
<main>
|
||||||
<section id="order">
|
<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>
|
<h2 data-spy="0.2|0.8"><span></span><span>Order</span><span></span></h2>
|
||||||
<h3>Truth For Life</h3>
|
<h3>Truth For Life</h3>
|
||||||
<h4>365 Daily Devotionals</h4>
|
<h4>365 Daily Devotionals</h4>
|
||||||
@ -486,6 +474,21 @@ nav > ul
|
|||||||
</section>
|
</section>
|
||||||
</main>
|
</main>
|
||||||
<script>
|
<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();
|
Spy.Init();
|
||||||
function JobDuration(inDuration, inHandler, inDone)
|
function JobDuration(inDuration, inHandler, inDone)
|
||||||
{
|
{
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user