Bouncy ball of love
This commit is contained in:
parent
5dc787d572
commit
00eca81a1e
|
@ -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
|
||||||
|
|
|
@ -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);
|
|
@ -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"}}
|
||||||
|
|
Loading…
Reference in New Issue