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

Merge branch 'master' of https://github.com/chuckdries/Personal-Website

Browse Source
This commit is contained in:
Chuck Dries 2017-06-25 18:22:04 -07:00
commit 6cb34ea2a1
3 changed files with 30 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
css/style.css
View File

@ -152,7 +152,6 @@ body {
padding-top: 10px; padding-top: 10px;
width: 100%; width: 100%;
position: fixed; position: fixed;
background: black;
z-index: 999; } z-index: 999; }
#top div { #top div {
margin: auto; margin: auto;
@ -179,15 +178,15 @@ body {
transition-property: size; transition-property: size;
transition-duration: .2s; } transition-duration: .2s; }
.small .hideable { .small {
display: none; background: black; }
opacity: 0; } .small .hideable {
display: none;
.small img { opacity: 0; }
max-width: 200px; } .small img {
max-width: 200px; }
.small h2 { .small h2 {
font-size: 1em; } font-size: 1em; }
.large img { .large img {
width: 100%; width: 100%;

37
index.html
View File

@ -20,7 +20,8 @@
<style> <style>
#spaceTakerUpper { #spaceTakerUpper {
height: 98vh; height: 100vh;
background: black;
} }
</style> </style>
</head> </head>
@ -74,7 +75,7 @@
<ul> <ul>
<li>HTML5</li> <li>HTML5</li>
<li>CSS3 &amp; Sass</li> <li>CSS3 &amp; Sass</li>
<li>Javascript, TypeScript, &amp; Node</li> <li>Javascript, TypeScript, VueJS, &amp; Node</li>
</ul> </ul>
</td> </td>
</tr> </tr>
@ -190,15 +191,15 @@
var sp = document.getElementById("scrollprompt"); var sp = document.getElementById("scrollprompt");
document.addEventListener("scroll", function() { document.addEventListener("scroll", function() {
last_known_scroll = getScrollY(); last_known_scroll = getScrollY();
sc(last_known_scroll); // sc(last_known_scroll);
// Usually an important performance consideration, this ends up significantly delaying the resizing of the top box, which is important to stay sized correctly // Usually an important performance consideration, this ends up significantly delaying the resizing of the top box, which is important to stay sized correctly
// if (!queueing) { if (!queueing) {
// window.requestAnimationFrame(function() { window.requestAnimationFrame(function() {
// sc(last_known_scroll); sc(last_known_scroll);
// queueing = false; queueing = false;
// }); });
// } }
// queueing = true; queueing = true;
}); });
sc(last_known_scroll); sc(last_known_scroll);
@ -206,11 +207,11 @@
//execute scroll style modifications //execute scroll style modifications
function sc(ypos) { function sc(ypos) {
var wheight = window.innerHeight; var windowHeight = window.innerHeight;
//top thing //top thing
var topDiv = document.getElementById("top"); var topDiv = document.getElementById("top");
var mast = document.getElementById("mast"); var mast = document.getElementById("mast");
var hcalc = wheight - ypos; var hcalc = windowHeight - ypos;
var topHeight = 100; var topHeight = 100;
if (hcalc > 100) { if (hcalc > 100) {
topHeight = hcalc; topHeight = hcalc;
@ -219,17 +220,17 @@
} }
// var mastHeight = mast.clientHeight; // var mastHeight = mast.clientHeight;
// var halfHeight = Math.floor((topHeight / 2) - (mastHeight / 2)); // var halfHeight = Math.floor((topHeight / 2) - (mastHeight / 2));
if (topHeight < 300) { if (topHeight < 315) {
mast.className = "small"; topDiv.className = "small";
} else { } else {
mast.className = "large"; topDiv.className = "large";
} }
topDiv.style.height = topHeight + "px"; topDiv.style.height = topHeight - 10 + "px"; //subtract 10 to account for padding-top on #top
// console.log("topheight is " + topHeight + " and topDiv.style.height = " + topDiv.style.height); // console.log("topheight is " + topHeight + " and topDiv.style.height = " + topDiv.style.height);
// mast.style.marginTop = halfHeight + "px"; // mast.style.marginTop = halfHeight + "px";
//background thing //background thing
var p = ((wheight - ypos) / wheight); //calulate ratio of scroll var p = ((windowHeight - ypos) / windowHeight); //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 + ")";
@ -238,7 +239,7 @@
} }
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, it has pageYOffset
return typeof window.scrollY === "undefined" ? window.pageYOffset : window.scrollY; return typeof window.scrollY === "undefined" ? window.pageYOffset : window.scrollY;
} }

3
sass/style.scss
View File

@ -38,7 +38,7 @@ body {
padding-top: 10px; padding-top: 10px;
width: 100%; width: 100%;
position: fixed; position: fixed;
background: black; // background: black;
z-index: 999; z-index: 999;
div { div {
margin: auto; margin: auto;
@ -76,6 +76,7 @@ body {
//small and large classes are applied to #top //small and large classes are applied to #top
.small { .small {
background: black;
.hideable { .hideable {
display: none; display: none;
opacity: 0; opacity: 0;