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

rough copy

Browse Source
This commit is contained in:
TreetopFlyer 2021-08-04 16:00:10 -04:00
parent 465f68d205
commit 608e5f1b6d
1 changed files with 197 additions and 162 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

161
index.html
View File

@ -11,6 +11,7 @@ section
position:relative; position:relative;
height: 100vh; height: 100vh;
box-sizing: border-box; box-sizing: border-box;
padding:50px;
} }
nav nav
{ {
@ -31,29 +32,9 @@ h2[data-spy='true']
color: white;; color: white;;
} }
</style> </style>
</head>
<body>
<nav>
<a href="#top" >Top</a>
<a href="#order">Order</a>
<a href="#video">Video</a>
<a href="#about">About</a>
<a href="#specs">Specs</a>
<a href="#email">Sign-up</a>
</nav>
<section id="video">
<h2 data-spy="0.2|0.8">Videos</h2>
</section>
<section id="about">
<h2 data-spy="0.2|0.8">About</h2>
</section>
<section id="specs">
<h2 data-spy="0.2|0.8">Specs</h2>
</section>
<script> <script>
var Time = var Time =
{ {
Jobs:[], Jobs:[],
Stamp:false, Stamp:false,
Queue:false, Queue:false,
@ -118,47 +99,11 @@ var Time =
Time.Queue = false; Time.Queue = false;
} }
} }
};
function JobDuration(inDuration, inHandler, inDone)
{
var timeCurrent = 0;
var timeLimit = inDuration*1000;
var timeRelative = 0;
var timeMaxed = false;
return function(inDelta)
{
timeCurrent += inDelta;
timeMaxed = timeCurrent > timeLimit;
if(timeMaxed)
{
inHandler(1);
inDone();
return false;
}
return inHandler(timeCurrent / timeLimit);
}; };
} </script>
<script>
var Spy =
document.querySelector("nav").addEventListener("click", function(inEvent) {
{
var domHtml = document.querySelector("html");
var domGoal = document.querySelector(inEvent.target.getAttribute("href"));
var posStart = domHtml.scrollTop - 200;
var posRange = domGoal.getBoundingClientRect().top;
var evtTick = function(inProgress){ domHtml.scrollTop = posStart + posRange*Math.sqrt(1 - Math.pow(1-(inProgress), 2)); };
var evtDone = function(){ Spy.Resume(); };
Spy.Suspend();
Time.Add( JobDuration(0.4, evtTick, evtDone) );
inEvent.preventDefault();
});
</script>
<script>
var Spy =
{
Attribute:"data-spy", Attribute:"data-spy",
Members:[], Members:[],
Defaults:[0, 1, 0, 1], Defaults:[0, 1, 0, 1],
@ -243,8 +188,98 @@ var Spy =
document.addEventListener("scroll", Spy.UpdateAll, {passive:true}); document.addEventListener("scroll", Spy.UpdateAll, {passive:true});
window.addEventListener("resize", Spy.UpdateAll, {passive:true}); window.addEventListener("resize", Spy.UpdateAll, {passive:true});
} }
}; };
</script>
</head>
<body>
<nav>
<a href="#top" >Top</a>
<a href="#order">Order</a>
<a href="#video">Video</a>
<a href="#about">About</a>
<a href="#specs">Specs</a>
<a href="#email">Sign-up</a>
</nav>
<section id="order">
<h2 data-spy="0.2|0.8">Order</h2>
<h3>Truth For Life</h3>
<h4>365 Daily Devotionals</h4>
<h5>by Alistair Begg</h5>
<p>
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.
Nullam semper ligula in est tincidunt, vel fringilla nunc vehicula. Nam tempus pellentesque ante, nec iaculis nisi porta id.
Ut aliquet purus nec mi egestas ornare.
</p>
<a href="https://truthforlife.org/store/buy/">Buy Now</a>
<span>$10.00 (free shipping)</span>
</section>
<section id="video">
<h2 data-spy="0.2|0.8">Videos</h2>
</section>
<section id="about">
<h2 data-spy="0.2|0.8">About</h2>
<p>
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.
Nullam semper ligula in est tincidunt, vel fringilla nunc vehicula. Nam tempus pellentesque ante, nec iaculis nisi porta id.
Ut aliquet purus nec mi egestas ornare.
</p>
<ul>
<li>
<strong>Head</strong><p>Nam tempus pellentesque ante, nec iaculis nisi porta id.</p>
</li>
<li>
<strong>Hands</strong><p>Vivamus augue enim, egestas a magna vitae, consequat facilisis urna.</p>
</li>
<li>
<strong>Heart</strong><p>Morbi blandit in ligula eu scelerisque. Maecenas hendrerit eu nunc non molestie.</p>
</li>
</ul>
<a href="#">Look Inside</a>
</section>
<section id="specs">
<h2 data-spy="0.2|0.8">Specs</h2>
</section>
<section id="email">
<h2 data-spy="0.2|0.8">Sign Up</h2>
</section>
<script>
Spy.Init(); Spy.Init();
function JobDuration(inDuration, inHandler, inDone)
{
var timeCurrent = 0;
var timeLimit = inDuration*1000;
var timeRelative = 0;
var timeMaxed = false;
return function(inDelta)
{
timeCurrent += inDelta;
timeMaxed = timeCurrent > timeLimit;
if(timeMaxed)
{
inHandler(1);
inDone();
return false;
}
return inHandler(timeCurrent / timeLimit);
};
}
document.querySelector("nav").addEventListener("click", function(inEvent)
{
var domHtml = document.querySelector("html");
var domGoal = document.querySelector(inEvent.target.getAttribute("href"));
var posStart = domHtml.scrollTop;
var posRange = domGoal.getBoundingClientRect().top;
var evtTick = function(inProgress){ domHtml.scrollTop = posStart + posRange*Math.sqrt(1 - Math.pow(1-(inProgress), 2)); };
var evtDone = function(){ Spy.Resume(); };
Spy.Suspend();
Time.Add( JobDuration(0.4, evtTick, evtDone) );
inEvent.preventDefault();
});
</script> </script>
</body> </body>
</html> </html>