Bouncy ball of love

This commit is contained in:
John O'Nolan 2014-07-22 13:21:33 +02:00
parent 5dc787d572
commit 00eca81a1e
3 changed files with 126 additions and 10 deletions

View File

@ -475,6 +475,7 @@ margin on the iframe, cause it breaks stuff. */
text-align: center; text-align: center;
background: #222 no-repeat center center; background: #222 no-repeat center center;
background-size: cover; background-size: cover;
overflow: hidden;
} }
.main-header .inner { .main-header .inner {
@ -487,6 +488,57 @@ margin on the iframe, cause it breaks stuff. */
margin: 0 0 30px 0; 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 */ /* Appears in the top right corner of your home page */
.blog-logo { .blog-logo {
display: block; display: block;
@ -495,14 +547,13 @@ margin on the iframe, cause it breaks stuff. */
border: none !important; border: none !important;
} }
.blog-logo img { .blog-logo img {
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
display: block; display: block;
height: 38px; height: 38px;
padding: 2px 0 6px 0; padding: 1px 0 5px 0;
width: auto; width: auto;
} }
@ -559,12 +610,12 @@ margin on the iframe, cause it breaks stuff. */
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
height: 60px; height: 70px;
border: none; 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 { .no-cover .main-nav.overlay {
background: none; background: none;
@ -1350,6 +1401,8 @@ body:not(.post-template) .post-title {
padding: 15% 0; padding: 15% 0;
} }
.scroll-down { display: none; }
.archive-template .main-header { .archive-template .main-header {
min-height: 180px; min-height: 180px;
padding: 10% 0; padding: 10% 0;
@ -1695,6 +1748,7 @@ body:not(.post-template) .post-title {
13. Animations 13. Animations
========================================================================== */ ========================================================================== */
/* Used to fade in title/desc on the home page */
@-webkit-keyframes fade-in-down { @-webkit-keyframes fade-in-down {
0% { 0% {
opacity: 0; opacity: 0;
@ -1720,6 +1774,36 @@ 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 End of file. Animations should be the last thing here. Do not add stuff

View File

@ -26,6 +26,8 @@
casperFullImg(); casperFullImg();
$(window).smartresize(casperFullImg); $(window).smartresize(casperFullImg);
$(".scroll-down").arctic_scroll();
}); });
}(jQuery)); }(jQuery));
@ -57,3 +59,32 @@
jQuery.fn[sr] = function(fn){ return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); }; 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);

View File

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