Cubic scroll, move some constants

Author: adamhb123

_sass/_slider.scss

@@ -1,5 +1,5 @@
-$carousel-scroll-down-button-font-size-larger: 2rem;
-$carousel-scroll-down-button-font-size-smaller: 1.25rem; 
+$carousel-scroll-down-button-font-size-larger: 2.5rem;
+$carousel-scroll-down-button-font-size-smaller: 1.75rem; 
 
 #slider {
     width: 100%;
@@ -13,7 +13,7 @@ $carousel-scroll-down-button-font-size-smaller: 1.25rem;
 }
 
 #carousel-scroll-down-button:before {
-    content: 'ᐯ';
+    content: 'ˬ';
     font-size: $carousel-scroll-down-button-font-size-larger;
     font-weight: bold;
     text-shadow:0px 0px 10px black, 0px 0px 10px black;

assets/js/slider.js

@@ -1,3 +1,6 @@
+const SCROLL_ANIMATION_DURATION = 1000;
+const CAROUSEL_SCROLL_DOWN_BUTTON_OFFSET = {X: -7, Y: -45};
+
 $(document).ready(() => {
     let slider = $("#slider");
     if (slider.length) {
@@ -10,27 +13,28 @@ $(document).ready(() => {
         });
     }
     // Setup carousel scroll-down button click event
-    let carouselsdb = $("#carousel-scroll-down-button");
+    let carousel_scroll_down_button = $("#carousel-scroll-down-button");
     let scrollTopOffset = 1;
-    carouselsdb.on("click", () => {
-        $("html, body").animate({ scrollTop: slider.find("img").height() + scrollTopOffset - $("nav").outerHeight() }, "slow");
-        carouselsdb.blur();
+    carousel_scroll_down_button.on("click", () => {
+        let calculateFinalPosition = () => slider.find("img").height() + scrollTopOffset - $("nav").outerHeight();
+        let animateProperties = { scrollTop: calculateFinalPosition() }
+        $("html, body").animate(animateProperties, {duration: SCROLL_ANIMATION_DURATION, specialEasing: {scrollTop: "easeOutCubic"}, step: function(now, fx) {fx.end = calculateFinalPosition();}} );
+        carousel_scroll_down_button.blur();
     });
 
     // Position carousel scroll-down button
-    let carouselsdbOffset = {X: -7, Y: -35};
     $(window).on("scroll",  () => {
         let sliderBottom = slider.height() + slider.offset().top;
         let windowBottom = $(window).scrollTop() + $(window).height();
         if ($(window).scrollTop() > sliderBottom) {
-            carouselsdb.css("visibility", "hidden");
+            carousel_scroll_down_button.css("visibility", "hidden");
         } else {
             if(windowBottom < sliderBottom){
-                carouselsdb.css("transform", `translate3d(${-carouselsdb.width()/2 + carouselsdbOffset.X}px, ${windowBottom-carouselsdb.height() + carouselsdbOffset.Y}px,0px)`);
+                carousel_scroll_down_button.css("transform", `translate3d(${-carousel_scroll_down_button.width()/2 + CAROUSEL_SCROLL_DOWN_BUTTON_OFFSET.X}px, ${windowBottom-carousel_scroll_down_button.height() + CAROUSEL_SCROLL_DOWN_BUTTON_OFFSET.Y}px,0px)`);
             } else{
-                carouselsdb.css("transform", `translate3d(${-carouselsdb.width()/2 + carouselsdbOffset.X}px, ${slider.height()-carouselsdb.height() + carouselsdbOffset.Y}px, 0px)`);
+                carousel_scroll_down_button.css("transform", `translate3d(${-carousel_scroll_down_button.width()/2 + CAROUSEL_SCROLL_DOWN_BUTTON_OFFSET.X}px, ${slider.height()-carousel_scroll_down_button.height() + CAROUSEL_SCROLL_DOWN_BUTTON_OFFSET.Y}px, 0px)`);
             }
-            carouselsdb.css("visibility", "visible");
+            carousel_scroll_down_button.css("visibility", "visible");
         }
     }).scroll();
     $(window).on("load resize focus blur",()=>$(window).scroll());