setup

2021-08-04 13:12:35 -04:00 · 2021-08-04 13:12:35 -04:00 · cc6b18f401
commit cc6b18f401
1 changed files with 210 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -0,0 +1,210 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+body
+{
+    margin:0;
+}
+section
+{
+    position:relative;
+    height: 100vh;
+    box-sizing: border-box;
+}
+nav
+{
+    position:fixed;
+    right:50px;
+    bottom:50px;
+    z-index:10;
+}
+h2
+{
+    width:500px;
+    margin:0 auto;
+    text-align:center;
+}
+h2[data-spy='true']
+{
+    background:black;
+    color: white;;
+}
+</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>
+var Time =
+{
+    Jobs:[],
+    Stamp:false,
+    Queue:false,
+    Add:function(inJob)
+    {
+        if(!Time.Queue)
+        {
+            window.requestAnimationFrame(Time.Update);
+        }
+        Time.Queue = true;
+        Time.Jobs.push(inJob);
+    },
+    Update:function(inTimestamp)
+    {
+        var delta;
+        var i;
+
+        if(!Time.Stamp)
+        {
+            Time.Stamp = inTimestamp;
+        }
+        delta = inTimestamp - Time.Stamp;
+        Time.Stamp = inTimestamp;
+
+        for(i=0; i<Time.Jobs.length; i++)
+        {
+            if(!Time.Jobs[i](delta))
+            {
+                Time.Jobs.splice(i, 1);
+                i--;
+            }
+        }
+
+        if(Time.Jobs.length > 0)
+        {
+            window.requestAnimationFrame(Time.Update);
+        }
+        else
+        {
+            Time.Stamp = false;
+            Time.Queue = false;
+        }
+    }
+};
+
+function JobConic(inFrom, inRange, inDuration, inHandler)
+{
+    var timeCurrent = 0;
+    var timeLimit = inDuration*1000;
+    var timeRelative = 0;
+    var timeMaxed = false;
+    return function(inDelta)
+    {
+        timeCurrent += inDelta;
+        timeMaxed = timeCurrent > timeLimit;
+        if(timeMaxed){ timeCurrent = timeLimit; }
+        timeRelative = timeCurrent / timeLimit;
+        inHandler(inFrom + inRange*Math.sqrt(1 - Math.pow(1-(timeRelative), 2)));
+        return !timeMaxed;
+    };
+}
+
+
+document.querySelector("nav").addEventListener("click", function(inEvent)
+{
+    var href = inEvent.target.getAttribute("href");
+    var html = document.querySelector("html");
+    var goal = document.querySelector(href).getBoundingClientRect().top;
+
+    Time.Add( JobConic(html.scrollTop, goal, 0.4, function(inOutput){ html.scrollTop = inOutput; } ) );
+    inEvent.preventDefault();
+});
+
+</script>
+<script>
+var Spy =
+{
+    Attribute:"data-spy",
+    Members:[],
+    Defaults:[0, 1, 0, 1],
+    UpdateAll:function()
+    {
+        var i, member, aabb, top, bottom, left, right;
+        var visible;
+
+        for(i=0; i<Spy.Members.length; i++)
+        {
+            member = Spy.Members[i];
+
+            top =    window.innerHeight * member.Bounds[0];
+            bottom = window.innerHeight * member.Bounds[1];
+            left =   window.innerWidth *  member.Bounds[2];
+            right =  window.innerWidth *  member.Bounds[3];
+
+            aabb = member.Element.getBoundingClientRect();
+            visible = (aabb.top < bottom && aabb.bottom > top) && (aabb.left < right && aabb.right > left);
+            if(visible != member.Visible)
+            {
+                member.Element.setAttribute(Spy.Attribute, visible);
+                member.Visible = visible;
+                member.Change(visible);
+            }
+        }
+    },
+    Create:function(inElement)
+    {
+        var j, bounds;
+        var attr;
+        var obj;
+        attr = inElement.getAttribute(Spy.Attribute)||"";
+        inElement.removeAttribute(Spy.Attribute);
+        bounds = attr.split("|");
+        for(j=0; j<Spy.Defaults.length; j++)
+        {
+            if(bounds[j])
+            {
+                bounds[j] = parseFloat(bounds[j]);
+            }
+            else
+            {
+                bounds[j] = Spy.Defaults[j];
+            }
+        }
+        obj = {
+            Element:inElement,
+            Bounds:bounds,
+            Visible:undefined,
+            Change:function(){}
+        };
+        Spy.Members.push(obj);
+        return obj;
+    },
+    CreateAll:function()
+    {
+        var i, elements;
+        elements = document.querySelectorAll("*["+Spy.Attribute+"]");
+
+        for(i=0; i<elements.length; i++)
+        {
+            Spy.Create(elements[i]);
+        }
+    },
+    Init:function()
+    {
+        Spy.CreateAll();
+        Spy.UpdateAll();
+        document.addEventListener("scroll", Spy.UpdateAll, {passive:true});
+        window.addEventListener("resize", Spy.UpdateAll, {passive:true});
+    }
+};
+Spy.Init();
+</script>
+</body>
+</html>