Smooth scrolling and jump links

index.html

@@ -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>
@@ -152,6 +148,7 @@
                                              document.getElementById("jscanary").className = "js";
                                              bgColor();
                                              document.addEventListener("scroll", bgColor);
+                                             window.addEventListener("resize", bgColor);
                                          }
     </script>
     <script>
@@ -170,6 +167,7 @@
         ga('create', 'UA-34100225-1', 'auto');
         ga('send', 'pageview');
     </script>
+    <script src="scroll.js"></script>
 </body>
 
 </html>

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);
+    }
+
+}

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; }

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"

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;
+        }
     }
 }