rough copy
This commit is contained in:
parent
465f68d205
commit
608e5f1b6d
359
index.html
359
index.html
@ -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,9 +32,166 @@ h2[data-spy='true']
|
|||||||
color: white;;
|
color: white;;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
<script>
|
||||||
|
var Time =
|
||||||
|
{
|
||||||
|
Jobs:[],
|
||||||
|
Stamp:false,
|
||||||
|
Queue:false,
|
||||||
|
Loop:false,
|
||||||
|
Add:function(inJob)
|
||||||
|
{
|
||||||
|
if(Time.Loop)
|
||||||
|
{
|
||||||
|
console.log("cannot modify queue while processing");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if(!Time.Queue)
|
||||||
|
{
|
||||||
|
window.requestAnimationFrame(Time.Update);
|
||||||
|
}
|
||||||
|
Time.Queue = true;
|
||||||
|
Time.Jobs.push(inJob);
|
||||||
|
},
|
||||||
|
Remove:function(inJob)
|
||||||
|
{
|
||||||
|
if(Time.Loop)
|
||||||
|
{
|
||||||
|
console.log("cannot modify queue while processing");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
var index = Time.Jobs.indexOf(inJob);
|
||||||
|
if(index > -1)
|
||||||
|
{
|
||||||
|
Time.Jobs.splice(index, 1);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
Update:function(inTimestamp)
|
||||||
|
{
|
||||||
|
var delta;
|
||||||
|
var i;
|
||||||
|
|
||||||
|
if(!Time.Stamp)
|
||||||
|
{
|
||||||
|
Time.Stamp = inTimestamp;
|
||||||
|
}
|
||||||
|
delta = inTimestamp - Time.Stamp;
|
||||||
|
Time.Stamp = inTimestamp;
|
||||||
|
|
||||||
|
Time.Loop = true;
|
||||||
|
for(i=0; i<Time.Jobs.length; i++)
|
||||||
|
{
|
||||||
|
if(Time.Jobs[i](delta) === false)
|
||||||
|
{
|
||||||
|
Time.Jobs.splice(i, 1);
|
||||||
|
i--;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
Time.Loop = false;
|
||||||
|
|
||||||
|
if(Time.Jobs.length > 0)
|
||||||
|
{
|
||||||
|
window.requestAnimationFrame(Time.Update);
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
Time.Stamp = false;
|
||||||
|
Time.Queue = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<script>
|
||||||
|
var Spy =
|
||||||
|
{
|
||||||
|
Attribute:"data-spy",
|
||||||
|
Members:[],
|
||||||
|
Defaults:[0, 1, 0, 1],
|
||||||
|
Disabled:false,
|
||||||
|
Suspend:function()
|
||||||
|
{
|
||||||
|
Spy.Disabled = true;
|
||||||
|
},
|
||||||
|
Resume:function()
|
||||||
|
{
|
||||||
|
Spy.Disabled = false;
|
||||||
|
Spy.UpdateAll();
|
||||||
|
},
|
||||||
|
UpdateAll:function()
|
||||||
|
{
|
||||||
|
var i, member, aabb, top, bottom, left, right;
|
||||||
|
var visible;
|
||||||
|
|
||||||
|
if(Spy.Disabled){ return; }
|
||||||
|
|
||||||
|
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});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<nav>
|
<nav>
|
||||||
<a href="#top" >Top</a>
|
<a href="#top" >Top</a>
|
||||||
<a href="#order">Order</a>
|
<a href="#order">Order</a>
|
||||||
@ -42,84 +200,53 @@ h2[data-spy='true']
|
|||||||
<a href="#specs">Specs</a>
|
<a href="#specs">Specs</a>
|
||||||
<a href="#email">Sign-up</a>
|
<a href="#email">Sign-up</a>
|
||||||
</nav>
|
</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">
|
<section id="video">
|
||||||
<h2 data-spy="0.2|0.8">Videos</h2>
|
<h2 data-spy="0.2|0.8">Videos</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">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>
|
||||||
<section id="specs">
|
<section id="specs">
|
||||||
<h2 data-spy="0.2|0.8">Specs</h2>
|
<h2 data-spy="0.2|0.8">Specs</h2>
|
||||||
</section>
|
</section>
|
||||||
|
<section id="email">
|
||||||
|
<h2 data-spy="0.2|0.8">Sign Up</h2>
|
||||||
|
</section>
|
||||||
<script>
|
<script>
|
||||||
var Time =
|
Spy.Init();
|
||||||
{
|
|
||||||
Jobs:[],
|
|
||||||
Stamp:false,
|
|
||||||
Queue:false,
|
|
||||||
Loop:false,
|
|
||||||
Add:function(inJob)
|
|
||||||
{
|
|
||||||
if(Time.Loop)
|
|
||||||
{
|
|
||||||
console.log("cannot modify queue while processing");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if(!Time.Queue)
|
|
||||||
{
|
|
||||||
window.requestAnimationFrame(Time.Update);
|
|
||||||
}
|
|
||||||
Time.Queue = true;
|
|
||||||
Time.Jobs.push(inJob);
|
|
||||||
},
|
|
||||||
Remove:function(inJob)
|
|
||||||
{
|
|
||||||
if(Time.Loop)
|
|
||||||
{
|
|
||||||
console.log("cannot modify queue while processing");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
var index = Time.Jobs.indexOf(inJob);
|
|
||||||
if(index > -1)
|
|
||||||
{
|
|
||||||
Time.Jobs.splice(index, 1);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
Update:function(inTimestamp)
|
|
||||||
{
|
|
||||||
var delta;
|
|
||||||
var i;
|
|
||||||
|
|
||||||
if(!Time.Stamp)
|
|
||||||
{
|
|
||||||
Time.Stamp = inTimestamp;
|
|
||||||
}
|
|
||||||
delta = inTimestamp - Time.Stamp;
|
|
||||||
Time.Stamp = inTimestamp;
|
|
||||||
|
|
||||||
Time.Loop = true;
|
|
||||||
for(i=0; i<Time.Jobs.length; i++)
|
|
||||||
{
|
|
||||||
if(Time.Jobs[i](delta) === false)
|
|
||||||
{
|
|
||||||
Time.Jobs.splice(i, 1);
|
|
||||||
i--;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Time.Loop = false;
|
|
||||||
|
|
||||||
if(Time.Jobs.length > 0)
|
|
||||||
{
|
|
||||||
window.requestAnimationFrame(Time.Update);
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
Time.Stamp = false;
|
|
||||||
Time.Queue = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
function JobDuration(inDuration, inHandler, inDone)
|
function JobDuration(inDuration, inHandler, inDone)
|
||||||
{
|
{
|
||||||
var timeCurrent = 0;
|
var timeCurrent = 0;
|
||||||
@ -139,13 +266,11 @@ function JobDuration(inDuration, inHandler, inDone)
|
|||||||
return inHandler(timeCurrent / timeLimit);
|
return inHandler(timeCurrent / timeLimit);
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
document.querySelector("nav").addEventListener("click", function(inEvent)
|
document.querySelector("nav").addEventListener("click", function(inEvent)
|
||||||
{
|
{
|
||||||
var domHtml = document.querySelector("html");
|
var domHtml = document.querySelector("html");
|
||||||
var domGoal = document.querySelector(inEvent.target.getAttribute("href"));
|
var domGoal = document.querySelector(inEvent.target.getAttribute("href"));
|
||||||
var posStart = domHtml.scrollTop - 200;
|
var posStart = domHtml.scrollTop;
|
||||||
var posRange = domGoal.getBoundingClientRect().top;
|
var posRange = domGoal.getBoundingClientRect().top;
|
||||||
var evtTick = function(inProgress){ domHtml.scrollTop = posStart + posRange*Math.sqrt(1 - Math.pow(1-(inProgress), 2)); };
|
var evtTick = function(inProgress){ domHtml.scrollTop = posStart + posRange*Math.sqrt(1 - Math.pow(1-(inProgress), 2)); };
|
||||||
var evtDone = function(){ Spy.Resume(); };
|
var evtDone = function(){ Spy.Resume(); };
|
||||||
@ -155,96 +280,6 @@ document.querySelector("nav").addEventListener("click", function(inEvent)
|
|||||||
inEvent.preventDefault();
|
inEvent.preventDefault();
|
||||||
});
|
});
|
||||||
|
|
||||||
</script>
|
|
||||||
<script>
|
|
||||||
var Spy =
|
|
||||||
{
|
|
||||||
Attribute:"data-spy",
|
|
||||||
Members:[],
|
|
||||||
Defaults:[0, 1, 0, 1],
|
|
||||||
Disabled:false,
|
|
||||||
Suspend:function()
|
|
||||||
{
|
|
||||||
Spy.Disabled = true;
|
|
||||||
},
|
|
||||||
Resume:function()
|
|
||||||
{
|
|
||||||
Spy.Disabled = false;
|
|
||||||
Spy.UpdateAll();
|
|
||||||
},
|
|
||||||
UpdateAll:function()
|
|
||||||
{
|
|
||||||
var i, member, aabb, top, bottom, left, right;
|
|
||||||
var visible;
|
|
||||||
|
|
||||||
if(Spy.Disabled){ return; }
|
|
||||||
|
|
||||||
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>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Loading…
Reference in New Issue
Block a user