chuckdries/Personal-Website
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

New scroll mechanic

Browse Source
This commit is contained in:
Chuck Dries 2017-02-16 19:28:20 -07:00
parent 65636fb834
commit c76f7a8f46
6 changed files with 638 additions and 358 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
Chuck.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.1 MiB

374
index.html
View File

@ -1,180 +1,196 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Chuck Dries</title> <title>Chuck Dries</title>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<script> <script>
//we're going to do a quick thing to measure how long it takes the page to load //we're going to do a quick thing to measure how long it takes the page to load
var timerStart = Date.now(); var timerStart = Date.now();
window.onload = function () { window.onload = function () {
var time = Date.now() - timerStart; var time = Date.now() - timerStart;
console.log(time); console.log(time);
if (time > 1000) { if (time > 1000) {
//browser is fast enough, run download and run animation scripts! //browser is fast enough, run download and run animation scripts!
} }
} }
var x; var x;
var mast; var mast;
function bgColor() { function bgColor() {
var p = ((window.innerHeight - getScrollY()) / window.innerHeight); //calulate ratio of scroll var p = ((window.innerHeight - getScrollY()) / window.innerHeight); //calulate ratio of scroll
x.innerHTML = " " + String(parseInt(p * 100)); //display it x.innerHTML = " " + String(parseInt(p * 100)); //display it
var rgb = Math.floor(Math.abs(1 - p) * 255); //set the color var rgb = Math.floor(Math.abs(1 - p) * 255); //set the color
var colorString = "rgb(" + rgb + "," + rgb + "," + rgb + ")"; var colorString = "rgb(" + rgb + "," + rgb + "," + rgb + ")";
document.body.style.backgroundColor = colorString; document.body.style.backgroundColor = colorString;
} }
function getScrollY(){ function getScrollY() {
//internet explorer does not have a window.scrollY property, so we need to make our own //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; return typeof window.scrollY === "undefined" ? window.pageYOffset : window.scrollY;
} }
</script> </script>
<style> <style>
/*fallback styles*/ /*fallback styles*/
</style> </style>
</head> </head>
<body id="jscanary" class="nojs"> <body id="jscanary" class="nojs">
<div class="slide slide-full " id="mast"> <div class="slide slide-full " id="mast">
<div class="vcwrapper full"> <div class="vcwrapper full">
<!--Gross markup to facilitate vertical centering--> <!--Gross markup to facilitate vertical centering-->
<div style="display:table-row;height:100%;"> <div style="display:table-row;height:100%;">
<!--ewwww tables--> <!--ewwww tables-->
<div style="display:table-cell;vertical-align:middle;"> <div style="display:table-cell;vertical-align:middle;">
<div> <div>
<h1 style="display:none;">Chuck Dries</h1> <h1 style="display:none;">Chuck Dries</h1>
<img src="cd.png" alt="Chuck Dries"> <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> <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>
<p>Digital Developer, <span class="sub">The State Press</span></p> <p>Digital Developer, <span class="sub">The State Press</span></p>
<p>Computer Science Student, <span class="sub">Arizona State University</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="mailto:chuck@chuckdries.com">chuck@chuckdries.com</a> / 602.618.0414</p>
<p> <p>
<a href="http://github.com/chuckdries">Github</a> / <a href="http://github.com/chuckdries">Github</a> /
<a href="https://www.linkedin.com/in/chuckdries/">LinkedIn</a> / <a href="https://www.linkedin.com/in/chuckdries/">LinkedIn</a> /
<a href="CharlesDriesResumeCurrent.pdf">Resume [pdf]</a> / <a href="CharlesDriesResumeCurrent.pdf">Resume [pdf]</a> /
<a href="https://medium.com/@chuckdries">Blog</a> <a href="https://medium.com/@chuckdries">Blog</a>
</p> </p>
</div> </div>
</div> </div>
</div> </div>
<h2>Learn more <span id="db" class="arrow"></span></h2> <h2>Learn more <span id="db" class="arrow"></span></h2>
</div> </div>
</div> </div>
<div id="tech" class="slide"> <div id="tech" class="slide">
<div class="copy"> <div class="copy">
<h1><a href="#tech" onclick="smoothScroll('tech'); return false;">Tech</a></h1> <h1><a href="#tech" onclick="smoothScroll('tech'); return false;">Tech</a></h1>
<h2>Overview</h2> <!--<h2>Overview</h2>-->
<div class="right"> <div class="right">
<p>I'm currently studying Computer Science, and I have a wealth of experience through hackathons, odd jobs, <p>I'm a motivated Computer Science student at ASU with a focus on the intersection of humanities and computers.
and working with multiple tech support clients. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
Curabitur vitae quam ut felis blandit luctus. Suspendisse potenti. Vivamus a metus ex. Pellentesque habitant </div>
morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec eget dapibus tortor, auctor <h2>Skills</h2>
dignissim metus. Aliquam at sollicitudin tortor. Donec finibus faucibus erat, vitae cursus urna maximus
sed. Quisque tristique sit amet risus et tempus. Pellentesque sed metus nec nunc bibendum fringilla. <div>
Curabitur accumsan ultrices est ut dapibus. <table>
</p> <tr>
</div> <td class="ld">Web</td>
<h2>Skills</h2> <td>HTML5, CSS3, Javascript &amp; Node</td>
</tr>
<div> <tr>
<table> <td class="ld">Programming</td>
<tr> <td>Java, C, C# with Unity, C++, Python, Scheme, Bash</td>
<td class="ld">Web</td> </tr>
<td>HTML5, CSS3, Javascript &amp; Node</td>
</tr> <tr>
<tr> <td class="ld">Etcetera</td>
<td class="ld">Programming</td> <td>Leadership experience, KVM/LibVirt/QEMU, ESXi</td>
<td>Java, C, C# with Unity, C++, Python, Scheme, Bash</td> </tr>
</tr> </table>
</div>
<tr> <h2>Experience: Jobs</h2>
<td class="ld">Etcetera</td> <!--we can do some product page like stuff with pictures and everything-->
<td>Leadership experience, KVM/LibVirt/QEMU, ESXi</td> <ul>
</tr> <li>
</table> <h3>The State Press</h3>
</div> </li>
<h2>Experience: Jobs</h2> <li>
<!--we can do some product page like stuff with pictures and everything--> <h3>Desert Community Robotics</h3>
<h2>Experience: Projects</h2> </li>
</div> </ul>
</div> <h2>Experience: Projects</h2>
<div id="design" class="slide"> <ul>
<div class="copy"> <li>
<h1>Design</h1> <h3>Volunteer Management Portal</h3>
<h2>Skills</h2> </li>
<div> <li>
<table> <h3>PaperBoy</h3>
<tr> </li>
<td class="ld">Design</td> <li>
<td>Photoshop, InDesign, After Effects, Premiere Pro</td> <h3>Linker</h3>
</tr> </li>
</table> <li>
</div> <h3>Sorting Algorithm Visualizer</h3>
</div> </li>
</div> </ul>
<div id="photography" class="slide"> </div>
<div class="copy"> </div>
<h1>Photography</h1> <div id="design" class="slide">
<h2>Skills</h2> <div class="copy">
<p>Replace this with something better</p> <h1>Design</h1>
<div> <h2>Skills</h2>
<table> <div>
<tr> <table>
<td class="ld">Design</td> <tr>
<td>Photoshop, InDesign, After Effects, Premiere Pro</td> <td class="ld">Design</td>
</tr> <td>Photoshop, InDesign, After Effects, Premiere Pro</td>
</table> </tr>
</div> </table>
</div> </div>
</div> </div>
<div id="leadership" class="slide"> </div>
<div class="copy"> <div id="photography" class="slide">
<h1>Leadership</h1> <div class="copy">
<h2>Skills</h2> <h1>Photography</h1>
<p>A skills list is definitely not relevant or helpful here!</p> <h2>Skills</h2>
<div> <p>Replace this with something better</p>
<table> <div>
<tr> <table>
<td class="ld">Design</td> <tr>
<td>Photoshop, InDesign, After Effects, Premiere Pro</td> <td class="ld">Design</td>
</tr> <td>Photoshop, InDesign, After Effects, Premiere Pro</td>
</table> </tr>
</div> </table>
</div> </div>
</div> </div>
<script> </div>
/*why is this so indented?*/ <div id="leadership" class="slide">
x = document.getElementById("db"); //db is the scroll counter. Why is it called that? <div class="copy">
//mast = document.getElementById("mast"); <h1>Leadership</h1>
//style = window.getComputedStyle(mast); <h2>Skills</h2>
//var color = style.getPropertyValue('color'); <p>A skills list is definitely not relevant or helpful here!</p>
//if (color == "rgb(255, 255, 255)") { //we should check that the stylesheet is being applied to avoid making the entire page unreadable <div>
document.getElementById("jscanary").className = "js"; <table>
bgColor(); <tr>
document.addEventListener("scroll", bgColor); <td class="ld">Design</td>
window.addEventListener("resize", bgColor); <td>Photoshop, InDesign, After Effects, Premiere Pro</td>
//} </tr>
</script> </table>
<script> </div>
(function (i, s, o, g, r, a, m) { </div>
i['GoogleAnalyticsObject'] = r; </div>
i[r] = i[r] || function () { <script>
(i[r].q = i[r].q || []).push(arguments) /*why is this so indented?*/
}, i[r].l = 1 * new Date(); x = document.getElementById("db"); //db is the scroll counter. Why is it called that?
a = s.createElement(o), //mast = document.getElementById("mast");
m = s.getElementsByTagName(o)[0]; //style = window.getComputedStyle(mast);
a.async = 1; //var color = style.getPropertyValue('color');
a.src = g; //if (color == "rgb(255, 255, 255)") { //we should check that the stylesheet is being applied to avoid making the entire page unreadable
m.parentNode.insertBefore(a, m) document.getElementById("jscanary").className = "js";
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga'); bgColor();
document.addEventListener("scroll", bgColor);
ga('create', 'UA-34100225-1', 'auto'); window.addEventListener("resize", bgColor);
ga('send', 'pageview'); //}
</script> </script>
<script src="scroll.js"></script> <script>
</body> (function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-34100225-1', 'auto');
ga('send', 'pageview');
</script>
<script src="scroll.js"></script>
</body>
</html> </html>

163
style.css
View File

@ -1,70 +1,93 @@
.reset, body, .slide { .reset, body, .slide {
padding: 0px; padding: 0px;
margin: 0px; margin: 0px;
clear: both; } clear: both; }
* { body {
transition-duration: .2s; } font-family: serif;
font-size: 1em;
body { line-height: 1.6;
font-family: serif; transition: none; }
font-size: 1em;
line-height: 1.6; #top {
transition: none; } position: fixed;
background: black; }
#mast {
background: none; #mast {
line-height: 1.2; background: none;
color: white; } line-height: 1.2;
#mast a { color: white; }
color: white; #mast a {
font-style: italic; } color: white;
#mast a:hover { font-style: italic; }
color: #ed1a76; } #mast a:hover {
#mast .sub { color: #ed1a76; }
font-style: italic; #mast .sub {
color: #ccc; } font-style: italic;
#mast img { color: #ccc; }
width: 100%; #mast img {
max-width: 400px; } transition-duration: .2s; }
#mast .hideable {
.copy h1 { transition-duration: .2s; }
text-decoration: underline; #mast h2 {
font-style: italic; } transition-property: size;
.copy h1 a { transition-duration: .2s; }
color: black; }
.small .hideable {
.nojs body { display: none;
background: white; } opacity: 0; }
.nojs #mast { .small img {
background: black; } max-width: 200px; }
.small h2 {
.slide { font-size: 1em; }
padding: 0px; }
.slide div { .large img {
/*width wrapping*/ width: 100%;
max-width: 800px; max-width: 400px; }
margin: auto; } .large .hideable {
opacity: 1; }
.full {
height: 100vh; .copy h1 {
width: 100%; } text-decoration: underline;
font-style: italic; }
.vcwrapper { .copy h1 a {
display: table; } color: black; }
.arrow { .nojs body {
font-variant-position: sub; background: white; }
font-size: .6em; } .nojs #mast {
background: black; }
.arrow:before {
content: "\0025BC"; } .slide {
padding: 0px;
h1 { width: 100%; }
font-size: 2em; } .slide div {
/*width wrapping*/
h2 { max-width: 800px;
font-weight: normal; margin: auto; }
font-style: italic; }
.full {
/*# sourceMappingURL=style.css.map */ height: 100vh;
width: 100%; }
.vcwrapper {
display: table; }
.arrow {
font-variant-position: sub;
font-size: .6em; }
.arrow:before {
content: "\0025BC"; }
h1 {
font-size: 2em; }
h2 {
font-weight: normal;
font-style: italic; }
a {
transition-duration: .2s; }
/*# sourceMappingURL=style.css.map */

14
style.css.map
View File

@ -1,7 +1,7 @@
{ {
"version": 3, "version": 3,
"mappings": "AAIA,oBAAO;EACH,OAAO,EAAE,GAAG;EACZ,MAAM,EAAE,GAAG;EACX,KAAK,EAAE,IAAI;;AAEf,CAAC;EACG,mBAAmB,EAAE,GAAG;;AAI5B,IAAK;EAED,WAAW,EAAE,KAAK;EAClB,SAAS,EAAE,GAAG;EACd,WAAW,EAAE,GAAG;EAChB,UAAU,EAAE,IAAI;;AAGpB,KAAM;EACF,UAAU,EAAE,IAAI;EAChB,WAAW,EAAE,GAAG;EAChB,KAAK,EAAE,KAAK;EACZ,OAAE;IACE,KAAK,EAAE,KAAK;IACZ,UAAU,EAAE,MAAM;EAEtB,aAAO;IACH,KAAK,EA5BN,OAAO;EA8BV,UAAK;IACD,UAAU,EAAE,MAAM;IAClB,KAAK,EAjCN,IAAI;EAmCP,SAAI;IACA,KAAK,EAAE,IAAI;IACX,SAAS,EAAE,KAAK;;AAKpB,QAAG;EACC,eAAe,EAAE,SAAS;EAC1B,UAAU,EAAE,MAAM;EAClB,UAAC;IACG,KAAK,EAAE,KAAK;;AAMpB,UAAK;EACD,UAAU,EAAE,KAAK;AAErB,WAAM;EACF,UAAU,EAAE,KAAK;;AASzB,MAAO;EAEH,OAAO,EAAE,GAAG;EACZ,UAAI;IACA,kBAAkB;IAClB,SAAS,EAvET,KAAK;IAwEL,MAAM,EAAE,IAAI;;AAIpB,KAAM;EACF,MAAM,EAAE,KAAK;EACb,KAAK,EAAE,IAAI;;AAGf,UAAW;EACP,OAAO,EAAE,KAAK;;AAGlB,MAAO;EACH,qBAAqB,EAAE,GAAG;EAC1B,SAAS,EAAE,IAAI;;AAGnB,aAAc;EACV,OAAO,EAAE,SAAS;;AAGtB,EAAG;EACC,SAAS,EAAE,GAAG;;AAGlB,EAAG;EACC,WAAW,EAAE,MAAM;EACnB,UAAU,EAAE,MAAM", "mappings": "AAIA,oBAAO;EACH,OAAO,EAAE,GAAG;EACZ,MAAM,EAAE,GAAG;EACX,KAAK,EAAE,IAAI;;AAIf,IAAK;EAED,WAAW,EAAE,KAAK;EAClB,SAAS,EAAE,GAAG;EACd,WAAW,EAAE,GAAG;EAChB,UAAU,EAAE,IAAI;;AAEpB,IAAI;EACA,QAAQ,EAAE,KAAK;EACf,UAAU,EAAE,KAAK;;AAErB,KAAM;EACF,UAAU,EAAE,IAAI;EAChB,WAAW,EAAE,GAAG;EAChB,KAAK,EAAE,KAAK;EACZ,OAAE;IACE,KAAK,EAAE,KAAK;IACZ,UAAU,EAAE,MAAM;EAEtB,aAAQ;IACJ,KAAK,EA5BN,OAAO;EA8BV,UAAK;IACD,UAAU,EAAE,MAAM;IAClB,KAAK,EAjCN,IAAI;EAmCP,SAAG;IACC,mBAAmB,EAAE,GAAG;EAE5B,eAAS;IACL,mBAAmB,EAAE,GAAG;EAE5B,QAAE;IACE,mBAAmB,EAAE,IAAI;IACzB,mBAAmB,EAAE,GAAG;;AAK5B,gBAAU;EACN,OAAO,EAAE,IAAI;EACb,OAAO,EAAE,CAAC;AAEd,UAAG;EACC,SAAS,EAAE,KAAK;AAEpB,SAAE;EACE,SAAS,EAAE,GAAG;;AAItB,UAAI;EACI,KAAK,EAAE,IAAI;EACX,SAAS,EAAE,KAAK;AAEpB,gBAAS;EACL,OAAO,EAAE,CAAC;;AAMd,QAAG;EACC,eAAe,EAAE,SAAS;EAC1B,UAAU,EAAE,MAAM;EAClB,UAAE;IACE,KAAK,EAAE,KAAK;;AAMpB,UAAK;EACD,UAAU,EAAE,KAAK;AAErB,WAAM;EACF,UAAU,EAAE,KAAK;;AAKzB,MAAO;EAEH,OAAO,EAAE,GAAG;EACZ,KAAK,EAAE,IAAI;EACX,UAAI;IACA,kBAAkB;IAClB,SAAS,EAjGT,KAAK;IAkGL,MAAM,EAAE,IAAI;;AAIpB,KAAM;EACF,MAAM,EAAE,KAAK;EACb,KAAK,EAAE,IAAI;;AAGf,UAAW;EACP,OAAO,EAAE,KAAK;;AAGlB,MAAO;EACH,qBAAqB,EAAE,GAAG;EAC1B,SAAS,EAAE,IAAI;;AAGnB,aAAc;EACV,OAAO,EAAE,SAAS;;AAGtB,EAAG;EACC,SAAS,EAAE,GAAG;;AAGlB,EAAG;EACC,WAAW,EAAE,MAAM;EACnB,UAAU,EAAE,MAAM;;AAEtB,CAAC;EACG,mBAAmB,EAAE,GAAG",
"sources": ["style.scss"], "sources": ["style.scss"],
"names": [], "names": [],
"file": "style.css" "file": "style.css"
} }

233
style.scss
View File

@ -1,103 +1,132 @@
//setup //setup
$width: 800px; $width: 800px;
$grey: #ccc; $grey: #ccc;
$pink: #ed1a76; $pink: #ed1a76;
.reset { .reset {
padding: 0px; padding: 0px;
margin: 0px; margin: 0px;
clear: both; clear: both;
} }
*{
transition-duration: .2s; //sections
} body {
@extend .reset;
//sections font-family: serif;
body { font-size: 1em;
@extend .reset; line-height: 1.6;
font-family: serif; transition: none;
font-size: 1em; }
line-height: 1.6; #top{
transition: none; position: fixed;
} background: black;
}
#mast { #mast {
background: none; background: none;
line-height: 1.2; line-height: 1.2;
color: white; color: white;
a { a {
color: white; color: white;
font-style: italic; font-style: italic;
} }
a:hover{ a:hover {
color: $pink; color: $pink;
} }
.sub { .sub {
font-style: italic; font-style: italic;
color: $grey; color: $grey;
} }
img { img{
width: 100%; transition-duration: .2s;
max-width: 400px; }
} .hideable{
} transition-duration: .2s;
}
.copy { h2{
h1 { transition-property: size;
text-decoration: underline; transition-duration: .2s;
font-style: italic; }
a{ }
color: black;
} .small {
} .hideable {
} display: none;
opacity: 0;
.nojs { }
body { img{
background: white; max-width: 200px;
} }
#mast { h2{
background: black; font-size: 1em;
} }
} }
.large{
//standalone elements img {
p { width: 100%;
// max-width: 600px; max-width: 400px;
} }
.hideable{
.slide { opacity: 1;
@extend .reset;
padding: 0px; }
div { }
/*width wrapping*/
max-width: $width; .copy {
margin: auto; h1 {
} text-decoration: underline;
} font-style: italic;
a {
.full { color: black;
height: 100vh; }
width: 100%; }
} }
.vcwrapper { .nojs {
display: table; body {
} background: white;
}
.arrow { #mast {
font-variant-position: sub; background: black;
font-size: .6em; }
} }
.arrow:before { //standalone elements
content: "\0025BC"; .slide {
} @extend .reset;
padding: 0px;
h1 { width: 100%;
font-size: 2em; div {
} /*width wrapping*/
max-width: $width;
h2 { margin: auto;
font-weight: normal; }
font-style: italic; }
.full {
height: 100vh;
width: 100%;
}
.vcwrapper {
display: table;
}
.arrow {
font-variant-position: sub;
font-size: .6em;
}
.arrow:before {
content: "\0025BC";
}
h1 {
font-size: 2em;
}
h2 {
font-weight: normal;
font-style: italic;
}
a{
transition-duration: .2s;
} }

212
toptest.html Normal file
View 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>