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

Smooth scrolling and jump links

Browse Source
This commit is contained in:
Chuck Dries 2017-02-14 03:19:58 -07:00
parent 7dd70078c9
commit 9b5bec5161
5 changed files with 75 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
index.html
View File

@ -43,7 +43,7 @@
<div>
<h1 style="display:none;">Chuck Dries</h1>
<img src="cd.png" alt="Chuck Dries">
<h2 id="tagline">Tech / Design / Photography / Leadership</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>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>
@ -59,9 +59,9 @@
<h2>Learn more <span id="db" class="arrow"></span></h2>
</div>
</div>
<div class="slide">
<div id="tech" class="slide">
<div class="copy">
<h1>Tech</h1>
<h1><a href="#tech" onclick="smoothScroll('tech'); return false;">Tech</a></h1>
<h2>Overview</h2>
<div class="right">
<p>I'm currently studying Computer Science, and I have a wealth of experience through hackathons, odd jobs,
@ -95,25 +95,6 @@
<h2>Experience: Jobs</h2>
<!--we can do some product page like stuff with pictures and everything-->
<h2>Experience: Projects</h2>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</div>
</div>
<div class="slide">
@ -130,6 +111,21 @@
</div>
</div>
</div>
<div class="slide">
<div class="copy">
<h1>Photography</h1>
<h2>Skills</h2>
<p>Replace this with something better</p>
<div>
<table>
<tr>
<td class="ld">Design</td>
<td>Photoshop, InDesign, After Effects, Premiere Pro</td>
</tr>
</table>
</div>
</div>
</div>
<!--
<div class="slide slide-full vcwrapper">
<h1 class="under">Design</h1>
@ -144,15 +140,16 @@
</div>
-->
<script>
x = document.getElementById("db");
mast = document.getElementById("mast");
style = window.getComputedStyle(mast);
var color = style.getPropertyValue('color');
if (color == "rgb(255, 255, 255)") { //we should check that the stylesheet is being applied to avoid making the entire page unreadable
document.getElementById("jscanary").className = "js";
bgColor();
document.addEventListener("scroll", bgColor);
}
x = document.getElementById("db");
mast = document.getElementById("mast");
style = window.getComputedStyle(mast);
var color = style.getPropertyValue('color');
if (color == "rgb(255, 255, 255)") { //we should check that the stylesheet is being applied to avoid making the entire page unreadable
document.getElementById("jscanary").className = "js";
bgColor();
document.addEventListener("scroll", bgColor);
window.addEventListener("resize", bgColor);
}
</script>
<script>
(function (i, s, o, g, r, a, m) {
@ -170,6 +167,7 @@
ga('create', 'UA-34100225-1', 'auto');
ga('send', 'pageview');
</script>
<script src="scroll.js"></script>
</body>
</html>

31
scroll.js Normal file
View File

@ -0,0 +1,31 @@
/* A super simple smooth scroller without all the baggage. Written by Chuck Dries in 2017*/
//settings
var speed = .002; //speed multiplier
//setup necissary stuff
var target = null;
var targetHeight = null;
var currentHeight = null;
var startTime = null;
/* does some basic checking then calls animate() to do the heavy lifting */
function smoothScroll(targetId){
target = document.getElementById(targetId);//grab the element
targetHeight = target.offsetTop; //get its height
currentHeight = window.scrollY; //grab the current scroll position
startTime = null; //we have to reset the start time every time the animation runs
if(currentHeight != targetHeight){
window.requestAnimationFrame(animateScroll);//schedule the animation
}
}
function animateScroll(timeStamp){
if (startTime == null) startTime = timeStamp; //record the time the animation started if we're just starting
var deltaStep = (timeStamp - startTime) * speed; //timeStamp - startTime gives us miliseconds since the animation started, we scale this down because its usually in the hundreds.
currentHeight = window.scrollY; //record the current scroll position of the window
var offsetScroll = targetHeight - currentHeight; //calculate how far we still need to go
var deltaScroll = deltaStep * offsetScroll; //decide how far to scroll this tick
window.scroll(0, currentHeight + deltaScroll); //scroll!
currentHeight = window.scrollY;//re-record the current height after scrolling for comparison
if(currentHeight != targetHeight){ //schedule another tick if we need to
window.requestAnimationFrame(animateScroll);
}
}

12
style.css
View File

@ -2,15 +2,15 @@
padding: 0px;
margin: 0px;
clear: both; }
*{
transition-duration: .2s;
}
* {
transition-duration: .2s; }
body {
font-family: serif;
font-size: 1em;
line-height: 1.6;
transition: none;
}
transition: none; }
#mast {
background: none;
@ -31,6 +31,8 @@ body {
.copy h1 {
text-decoration: underline;
font-style: italic; }
.copy h1 a {
color: black; }
.nojs body {
background: white; }

2
style.css.map
View File

@ -1,6 +1,6 @@
{
"version": 3,
"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,mBAAmB,EAAE,GAAG;;AAG5B,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,EAzBN,OAAO;EA2BV,UAAK;IACD,UAAU,EAAE,MAAM;IAClB,KAAK,EA9BN,IAAI;EAgCP,SAAI;IACA,KAAK,EAAE,IAAI;IACX,SAAS,EAAE,KAAK;;AAKpB,QAAG;EACC,eAAe,EAAE,SAAS;EAC1B,UAAU,EAAE,MAAM;;AAKtB,UAAK;EACD,UAAU,EAAE,KAAK;AAErB,WAAM;EACF,UAAU,EAAE,KAAK;;AASzB,MAAO;EAEH,OAAO,EAAE,GAAG;EACZ,UAAI;IACA,kBAAkB;IAClB,SAAS,EAjET,KAAK;IAkEL,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;;AAEf,CAAC;EACG,mBAAmB,EAAE,GAAG;;AAI5B,IAAK;EAED,WAAW,EAAE,KAAK;EAClB,SAAS,EAAE,GAAG;EACd,WAAW,EAAE,GAAG;EAChB,UAAU,EAAC,IAAI;;AAGnB,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",
"sources": ["style.scss"],
"names": [],
"file": "style.css"

8
style.scss
View File

@ -7,6 +7,9 @@ $pink: #ed1a76;
margin: 0px;
clear: both;
}
*{
transition-duration: .2s;
}
//sections
body {
@ -14,7 +17,7 @@ body {
font-family: serif;
font-size: 1em;
line-height: 1.6;
transition-duration: .2s;
transition:none;
}
#mast {
@ -42,6 +45,9 @@ body {
h1 {
text-decoration: underline;
font-style: italic;
a{
color: black;
}
}
}