Bouncy ball of love

assets/css/screen.css

@@ -475,6 +475,7 @@ margin on the iframe, cause it breaks stuff. */
     text-align: center;
     background: #222 no-repeat center center;
     background-size: cover;
+    overflow: hidden;
 }
 
 .main-header .inner {
@@ -487,6 +488,57 @@ margin on the iframe, cause it breaks stuff. */
     margin: 0 0 30px 0;
 }
 
+/* Create a bouncing scroll-down arrow on homepage with cover image */
+.scroll-down {
+    display: block;
+    position: absolute;
+    z-index: 100;
+    bottom: 45px;
+    left: 50%;
+    margin-left: -16px;
+    width: 34px;
+    height: 34px;
+    font-size: 34px;
+    text-align: center;
+    color: rgba(255,255,255,0.6);
+    transform: rotate(-90deg);
+    -webkit-animation: bounce 4s 2s infinite;
+    animation: bounce 4s 2s infinite;
+}
+
+/* Stop it bouncing and increase contrast when hovered */
+.scroll-down:hover {
+    color: #fff;
+    -webkit-animation: none;
+    animation: none;
+}
+
+/* Put a semi-opaque radial gradient behind the icon to make it more visible
+   on photos which happen to have a light background. */
+.home-template .main-header:after {
+    display: block;
+    content: " ";
+    width: 300px;
+    height: 300px;
+    border-radius: 100%;
+    position: absolute;
+    bottom: -150px;
+    left: 50%;
+    margin-left: -150px;
+    background: -moz-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 70%, rgba(0,0,0,0) 100%);
+    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(0,0,0,0.2)), color-stop(70%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0)));
+    background: -webkit-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.2) 0%,rgba(0,0,0,0) 70%,rgba(0,0,0,0) 100%);
+    background: radial-gradient(ellipse at center,  rgba(0,0,0,0.2) 0%,rgba(0,0,0,0) 70%,rgba(0,0,0,0) 100%);
+}
+
+/* Hide when there's no cover image or on page2+ */
+.no-cover .scroll-down,
+.no-cover.main-header:after,
+.archive-template .scroll-down,
+.archive-template .main-header:after {
+    display: none
+}
+
 /* Appears in the top right corner of your home page */
 .blog-logo {
     display: block;
@@ -495,14 +547,13 @@ margin on the iframe, cause it breaks stuff. */
     border: none !important;
 }
 
-
 .blog-logo img {
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
     display: block;
     height: 38px;
-    padding: 2px 0 6px 0;
+    padding: 1px 0 5px 0;
     width: auto;
 }
 
@@ -559,12 +610,12 @@ margin on the iframe, cause it breaks stuff. */
     top: 0;
     left: 0;
     right: 0;
-    height: 60px;
+    height: 70px;
     border: none;
-    background: -moz-linear-gradient(top, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%);
+    background: -moz-linear-gradient(top, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 100%);
-    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.3)), color-stop(100%,rgba(0,0,0,0)));
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.2)), color-stop(100%,rgba(0,0,0,0)));
-    background: -webkit-linear-gradient(top, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
+    background: -webkit-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0) 100%);
-    background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
+    background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0) 100%);
 }
 .no-cover .main-nav.overlay {
     background: none;
@@ -1350,6 +1401,8 @@ body:not(.post-template) .post-title {
         padding: 15% 0;
     }
 
+    .scroll-down { display: none; }
+
     .archive-template .main-header {
         min-height: 180px;
         padding: 10% 0;
@@ -1695,6 +1748,7 @@ body:not(.post-template) .post-title {
    13. Animations
    ========================================================================== */
 
+/* Used to fade in title/desc on the home page */
 @-webkit-keyframes fade-in-down {
     0% {
         opacity: 0;
@@ -1720,8 +1774,38 @@ body:not(.post-template) .post-title {
     }
 }
 
+/* Used to bounce .scroll-down on home page */
+@-webkit-keyframes bounce {
+    0%, 10%, 25%, 40%, 50% {
+        -webkit-transform: translateY(0) rotate(-90deg);
+                transform: translateY(0) rotate(-90deg);
+    }
+    20% {
+        -webkit-transform: translateY(-10px) rotate(-90deg);
+                transform: translateY(-10px) rotate(-90deg);
+    }
+    30% {
+        -webkit-transform: translateY(-5px) rotate(-90deg);
+                transform: translateY(-5px) rotate(-90deg);
+    }
+}
+@keyframes bounce {
+    0%, 20%, 50%, 80%, 100% {
+        -webkit-transform: translateY(0) rotate(-90deg);
+                transform: translateY(0) rotate(-90deg);
+    }
+    40% {
+        -webkit-transform: translateY(-10px) rotate(-90deg);
+                transform: translateY(-10px) rotate(-90deg);
+    }
+    60% {
+        -webkit-transform: translateY(-5px) rotate(-90deg);
+                transform: translateY(-5px) rotate(-90deg);
+    }
+}
+
 
 /* ==========================================================================
    End of file. Animations should be the last thing here. Do not add stuff
    below this point, or it will probably fuck everything up.
-   ========================================================================== */
+   ========================================================================== */

assets/js/index.js

@@ -26,6 +26,8 @@
         casperFullImg();
         $(window).smartresize(casperFullImg);
 
+        $(".scroll-down").arctic_scroll();
+
     });
 
 }(jQuery));
@@ -56,4 +58,33 @@
   // smartresize 
   jQuery.fn[sr] = function(fn){  return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };
 
-})(jQuery,'smartresize');
+})(jQuery,'smartresize');
+
+// Arctic Scroll by Paul Adam Davis
+// https://github.com/PaulAdamDavis/Arctic-Scroll
+(function ($) {
+    $.fn.arctic_scroll = function (options) {
+
+        var defaults = {
+            elem: $(this),
+            speed: 500
+        };
+        var options = $.extend(defaults, options);
+
+        options.elem.click(function(event){     
+            event.preventDefault();
+            var offset = ($(this).attr('data-offset')) ? $(this).attr('data-offset') : false,
+                position = ($(this).attr('data-position')) ? $(this).attr('data-position') : false;         
+            if (offset) {
+                var toMove = parseInt(offset);
+                $('html,body').stop(true, false).animate({scrollTop: ($(this.hash).offset().top + toMove) }, options.speed);
+            } else if (position) {
+                var toMove = parseInt(position);
+                $('html,body').stop(true, false).animate({scrollTop: toMove }, options.speed);
+            } else {
+                $('html,body').stop(true, false).animate({scrollTop: ($(this.hash).offset().top) }, options.speed);
+            }
+        });
+
+    };
+})(jQuery);

index.hbs

@@ -13,10 +13,11 @@
             <h2 class="page-description">{{@blog.description}}</h2>
         </div>
     </div>
+    <a class="scroll-down icon-arrow-left" href="#content" data-offset="-45"><span class="hidden">Scroll Down</span></a>
 </header>
 
 {{! The main content area on the homepage }}
-<main class="content" role="main">
+<main id="content" class="content" role="main">
 
     {{! The tag below includes the post loop - partials/loop.hbs }}
     {{> "loop"}}