From 9b5bec516141d26116da44f94a9ad4efd7eca860 Mon Sep 17 00:00:00 2001 From: Chuck Dries Date: Tue, 14 Feb 2017 03:19:58 -0700 Subject: [PATCH] Smooth scrolling and jump links --- index.html | 60 +++++++++++++++++++++++++-------------------------- scroll.js | 31 ++++++++++++++++++++++++++ style.css | 12 ++++++----- style.css.map | 2 +- style.scss | 8 ++++++- 5 files changed, 75 insertions(+), 38 deletions(-) create mode 100644 scroll.js diff --git a/index.html b/index.html index eb91c68..cd6cce9 100644 --- a/index.html +++ b/index.html @@ -43,7 +43,7 @@

Chuck Dries

Chuck Dries -

Tech / Design / Photography / Leadership

+

Tech / Design / Photography / Leadership

Digital Developer, The State Press

Computer Science Student, Arizona State University

chuck@chuckdries.com / 602.618.0414

@@ -59,9 +59,9 @@

Learn more

-
+
-

Tech

+

Tech

Overview

I'm currently studying Computer Science, and I have a wealth of experience through hackathons, odd jobs, @@ -95,25 +95,6 @@

Experience: Jobs

Experience: Projects

-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
@@ -130,6 +111,21 @@
+
+
+

Photography

+

Skills

+

Replace this with something better

+
+ + + + + +
DesignPhotoshop, InDesign, After Effects, Premiere Pro
+
+
+
+ \ No newline at end of file diff --git a/scroll.js b/scroll.js new file mode 100644 index 0000000..8d1c0ac --- /dev/null +++ b/scroll.js @@ -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); + } + +} \ No newline at end of file diff --git a/style.css b/style.css index d0871b6..986147b 100644 --- a/style.css +++ b/style.css @@ -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; } diff --git a/style.css.map b/style.css.map index 5bc3ced..f66e5bd 100644 --- a/style.css.map +++ b/style.css.map @@ -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" diff --git a/style.scss b/style.scss index b990cba..d6f53d3 100644 --- a/style.scss +++ b/style.scss @@ -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; + } } }