New scroll mechanic
This commit is contained in:
212
toptest.html
Normal file
212
toptest.html
Normal file
@@ -0,0 +1,212 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<style>
|
||||
#spaceTakerUpper {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="slide" id="top">
|
||||
<div id="mast">
|
||||
<h1 style="display:none;">Chuck Dries</h1>
|
||||
<img src="cd.png" alt="Chuck Dries">
|
||||
<h2 id="tagline"><a href="#tech" onclick="smoothScroll('tech'); return false;">Tech</a> / <a href="#design">Design</a> / <a href="#photography">Photography</a> / <a href="#leadership">Leadership</a></h2>
|
||||
<div class="hideable">
|
||||
<p>Digital Developer, <span class="sub">The State Press</span></p>
|
||||
<p>Computer Science Student, <span class="sub">Arizona State University</span></p>
|
||||
<p><a href="mailto:chuck@chuckdries.com">chuck@chuckdries.com</a> / 602.618.0414</p>
|
||||
<p>
|
||||
<a href="http://github.com/chuckdries">Github</a> /
|
||||
<a href="https://www.linkedin.com/in/chuckdries/">LinkedIn</a> /
|
||||
<a href="CharlesDriesResumeCurrent.pdf">Resume [pdf]</a> /
|
||||
<a href="https://medium.com/@chuckdries">Blog</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="spaceTakerUpper">
|
||||
|
||||
</div>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer risus lorem, pretium non suscipit vel, dapibus non dolor.
|
||||
Suspendisse potenti. Phasellus interdum tempus placerat. Vivamus nec interdum mauris. Integer eu neque lacus. Nulla
|
||||
turpis turpis, fermentum in elementum nec, aliquam sed elit. Maecenas fringilla tristique leo quis mattis. In tempor
|
||||
justo id vehicula porta. Ut metus tortor, laoreet quis iaculis ac, aliquet et metus. Suspendisse potenti. Nullam
|
||||
at hendrerit neque. Vestibulum scelerisque turpis felis, et mollis risus suscipit eget. Donec condimentum ornare
|
||||
dictum. Vivamus rhoncus felis nisl, suscipit imperdiet ante tempus sit amet. Nullam lobortis sem ultricies, tempus
|
||||
felis a, hendrerit lacus. Suspendisse potenti. Suspendisse sollicitudin purus vitae felis molestie placerat. Vivamus
|
||||
aliquam tincidunt velit, id cursus purus euismod vitae. Praesent a rhoncus quam, non scelerisque lorem. Aenean mollis
|
||||
dapibus odio, ut bibendum arcu mattis vitae. Maecenas id faucibus arcu. Aenean ullamcorper urna id cursus semper.
|
||||
Sed aliquet, est ut interdum ultrices, arcu libero venenatis lacus, ut viverra ante massa id elit. Mauris molestie
|
||||
enim sit amet neque viverra, luctus laoreet dolor efficitur. Mauris non mi auctor, tincidunt odio in, ultricies sapien.
|
||||
Sed mollis ligula vitae magna malesuada imperdiet. Aliquam quis felis urna. Morbi feugiat metus sed massa finibus
|
||||
dapibus at sed augue. Curabitur in eleifend neque. Sed malesuada rutrum tellus, sit amet tempus enim pretium sed.
|
||||
Mauris nisi eros, facilisis a ornare sit amet, efficitur vitae mauris. Aliquam in nibh placerat, mollis augue sit
|
||||
amet, interdum felis. Morbi justo felis, semper ac lorem in, lobortis pharetra purus. Curabitur ut neque vitae magna
|
||||
interdum pulvinar ac vitae dui. Donec consequat est ex, et tincidunt tellus rhoncus nec. Donec a dictum nisi, mollis
|
||||
egestas lectus. Quisque vel fringilla justo, ultricies pharetra dui. Morbi egestas libero et turpis congue tincidunt.
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ante ipsum primis in faucibus orci luctus et
|
||||
ultrices posuere cubilia Curae; Aenean ullamcorper luctus dolor, nec consectetur erat placerat at. Phasellus a metus
|
||||
sed lorem molestie euismod finibus id turpis. Integer iaculis dignissim eleifend. Ut enim risus, bibendum ac ultricies
|
||||
tempus, blandit ut justo. Morbi id nulla tincidunt, aliquet quam et, consectetur purus. Quisque lobortis leo lorem,
|
||||
sit amet pellentesque leo eleifend non. Fusce consectetur sapien risus, id sagittis velit ornare vitae. Duis ultricies,
|
||||
sem sed facilisis lacinia, ex libero finibus ex, vel egestas ex lacus in dui. Quisque eros nulla, placerat a massa
|
||||
et, fringilla feugiat purus. Proin ipsum neque, varius in turpis id, facilisis convallis justo. Donec vulputate sapien
|
||||
pharetra erat blandit semper. Vestibulum mollis, ante sit amet tristique ullamcorper, leo dolor iaculis ligula, eget
|
||||
dapibus nulla lorem viverra felis. Nulla eleifend fermentum ipsum a posuere. Curabitur sed placerat elit, ac molestie
|
||||
metus. Pellentesque id eros volutpat, volutpat leo nec, finibus justo. Fusce euismod, mi bibendum ornare tincidunt,
|
||||
lorem nisi interdum turpis, vulputate pretium lectus augue eget sem. Nam et nibh purus. Cras volutpat sagittis accumsan.
|
||||
Vestibulum semper dui hendrerit, iaculis nunc at, imperdiet ligula. Cras fringilla nunc eros, non bibendum lorem
|
||||
cursus non. Quisque scelerisque mauris accumsan risus ultrices maximus. Aenean tristique gravida suscipit. Mauris
|
||||
sit amet varius tellus. Suspendisse interdum dolor sit amet lacinia consequat. Class aptent taciti sociosqu ad litora
|
||||
torquent per conubia nostra, per inceptos himenaeos. Integer nec mattis nisi. Orci varius natoque penatibus et magnis
|
||||
dis parturient montes, nascetur ridiculus mus. Sed quis enim at sapien scelerisque tristique non et libero.</p>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<script>
|
||||
sc();
|
||||
document.addEventListener("scroll", sc);
|
||||
function sc() {
|
||||
var ypos = getScrollY();
|
||||
var wheight = window.innerHeight;
|
||||
//top thing
|
||||
var topDiv = document.getElementById("top");
|
||||
var mast = document.getElementById("mast");
|
||||
var topHeight = wheight - ypos;
|
||||
var mastHeight = mast.clientHeight;
|
||||
var halfHeight = Math.floor((topHeight / 2) - (mastHeight / 2));
|
||||
if(topHeight < 300){
|
||||
mast.className = "small";
|
||||
console.log("boop!");
|
||||
}else{
|
||||
mast.className = "large";
|
||||
}
|
||||
if (topHeight > 100) {
|
||||
topDiv.style.height = topHeight + "px";
|
||||
mast.style.marginTop = halfHeight + "px";
|
||||
}
|
||||
|
||||
//background thing
|
||||
var p = ((wheight - ypos) / wheight); //calulate ratio of scroll
|
||||
// x.innerHTML = " " + String(parseInt(p * 100)); //display it
|
||||
var rgb = Math.floor(Math.abs(1 - p) * 255); //set the color
|
||||
var colorString = "rgb(" + rgb + "," + rgb + "," + rgb + ")";
|
||||
document.body.style.backgroundColor = colorString;
|
||||
console.log("wheight = " + wheight);
|
||||
|
||||
}
|
||||
function bgColor() {
|
||||
|
||||
}
|
||||
function getScrollY() {
|
||||
//internet explorer does not have a window.scrollY property, so we need to make our own
|
||||
return typeof window.scrollY === "undefined" ? window.pageYOffset : window.scrollY;
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user