keb/kesper
1
0
Fork 0
mirror of https://github.com/ZetaKebab/kesper.git synced 2025-11-04 08:09:49 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bouncy ball of love

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

100
assets/css/screen.css
View File

@@ -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.
========================================================================== */
========================================================================== */

33
assets/js/index.js
View File

@@ -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);