Bouncy ball of love
This commit is contained in:
John O'Nolan
parent
5dc787d572
commit
00eca81a1e
3 changed files with 126 additions and 10 deletions
|
|
@ -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: -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-linear-gradient(top, rgba(0,0,0,0.3) 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: -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.2)), color-stop(100%,rgba(0,0,0,0)));
|
||||
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.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.
|
||||
========================================================================== */
|
||||
========================================================================== */
|
||||
|
|
@ -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);
|
||||
|
|
@ -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"}}
|
||||
|
|
|
|||
Loading…
Reference in a new issue