SethTrowbridge/devo-book
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

correct title animations

Browse Source
This commit is contained in:
TreetopFlyer 2021-08-10 10:38:48 -04:00
parent 5e8aae48fa
commit a1011b18f9
1 changed files with 47 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
index.html
View File

@ -29,42 +29,55 @@ section
padding:50px; padding:50px;
} }
h2 h2
{ {
display:flex;
align-items: center;
box-sizing:border-box;
width:500px; width:500px;
margin:0 auto; margin:0 auto;
padding:5px 15px 5px 15px; padding:5px 20px 5px 20px;
text-align:center; text-align:center;
text-transform:uppercase; text-transform:uppercase;
font-size:36px; font-size:36px;
} }
h2::before, h2::after h2 > span
{
position: relative;
flex:1;
}
h2 > span:first-child::before, h2 > span:last-child::before
{ {
display: inline-block;
content: "⬦"; content: "⬦";
font-size: 61px; line-height: 7px;
line-height: 8px; font-size: 60px;
width: 0px; text-indent:-37px;
display: block;
position: absolute;
top: -2px;
width: 0%;
height: 5px; height: 5px;
background: #000; background: #000;
text-align: left;
text-indent: -37px;
vertical-align: middle;
margin-top: -10px;
transition: width 0.4s; transition: width 0.4s;
} }
h2::before h2 > span:first-child::before
{ {
transform: translateX(-10px) text-align:left;
direction:ltr;
right: 0;
} }
h2::after h2 > span:last-child::before
{ {
transform: translateX(10px) rotate(180deg); text-align:right;
direction:rtl;
left: 0;
} }
h2[data-spy='true']::before, h2[data-spy='true']::after h2[data-spy='true'] > span:first-child::before, h2[data-spy='true'] > span:last-child::before
{ {
width:100px; width: 100%;
} }
.CTA .CTA
{ {
position:relative; position:relative;
@ -267,30 +280,12 @@ h2[data-spy='true']::before, h2[data-spy='true']::after
</head> </head>
<body> <body>
<style>
.Filler
{
display: flex;
width:50%;
}
.Filler::before, .Filler::after
{
content:" ";
display:block;
height:1em;
flex:1;
background:red;
}
</style>
<div class="Filler">
Random Content
</div>
<style> <style>
nav nav
{ {
position: fixed; position: fixed;
display: flex;
flex-direction: column;
top:50px; top:50px;
right: 0px; right: 0px;
width: 200px; width: 200px;
@ -300,32 +295,25 @@ nav
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3); box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
border-left:10px solid black; border-left:10px solid black;
} }
nav ul nav > *
{ {
flex: 1;
}
nav > ul
{
flex:0;
margin:0; margin:0;
padding:0; padding:0;
text-align:right; text-align:right;
} }
nav::before, nav::after nav > span
{ {
content:" "; margin:20px;
display:block; background:red;
width:50px;
height:50px;
background:black;
position:absolute;
left:0;
}
nav::before
{
top:-25px;
}
nav::after
{
bottom:-25px;
} }
</style> </style>
<nav> <nav>
<span></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>
@ -334,7 +322,9 @@ nav::after
<li><a href="#specs">Specs</a></li> <li><a href="#specs">Specs</a></li>
<li><a href="#email">Sign-up</a></li> <li><a href="#email">Sign-up</a></li>
</ul> </ul>
<span></span>
</nav> </nav>
<main>
<section id="order"> <section id="order">
<style> <style>
@ -397,7 +387,7 @@ nav::after
</div> </div>
<h2 data-spy="0.2|0.8">Order</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>
<h5>by Alistair Begg</h5> <h5>by Alistair Begg</h5>
@ -411,11 +401,11 @@ nav::after
<span>$10.00 (free shipping)</span> <span>$10.00 (free shipping)</span>
</section> </section>
<section id="video"> <section id="video">
<h2 data-spy="0.2|0.8">Videos</h2> <h2 data-spy="0.2|0.8"><span></span><span>Videos</span><span></span></h2>
</section> </section>
<section id="about"> <section id="about">
<h2 data-spy="0.2|0.8">About</h2> <h2 data-spy="0.2|0.8"><span></span><span>About</span><span></span></h2>
<p> <p>
Duis augue neque, dignissim at diam ac, mattis cursus justo. Morbi blandit in ligula eu scelerisque. Duis augue neque, dignissim at diam ac, mattis cursus justo. Morbi blandit in ligula eu scelerisque.
Maecenas hendrerit eu nunc non molestie. Vivamus augue enim, egestas a magna vitae, consequat facilisis urna. Maecenas hendrerit eu nunc non molestie. Vivamus augue enim, egestas a magna vitae, consequat facilisis urna.
@ -441,6 +431,7 @@ nav::after
<section id="email"> <section id="email">
<h2 data-spy="0.2|0.8">Sign Up</h2> <h2 data-spy="0.2|0.8">Sign Up</h2>
</section> </section>
</main>
<script> <script>
Spy.Init(); Spy.Init();
function JobDuration(inDuration, inHandler, inDone) function JobDuration(inDuration, inHandler, inDone)