Konami code makes background scroll infinitely (#13)

Konami code makes background scroll infinitely

Co-authored-by: Kevin Belisle <kev.belisle@gmail.com>
Reviewed-on: https://git.etztech.xyz/BirbMC/birbmc.com/pulls/13
Reviewed-by: Etzelia <etzelia@hotmail.com>
pull/1/head
klutz 2020-10-30 05:07:53 +01:00 committed by Etzelia
parent c27ae28a20
commit 3798cf0b62
2 changed files with 43 additions and 2 deletions

View File

@ -120,9 +120,35 @@
speed: 1000
});
// Easter Eggs
// Logo Easter Egg
document.querySelector("span.logo").addEventListener("dblclick", (e) => {
e.currentTarget.classList.toggle("rotated");
});
// Konami Code Easter Egg
var pattern = ['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowLeft', 'ArrowRight', 'b', 'a'];
var current = 0;
var keyHandler = function (event) {
// If the key isn't in the pattern, or isn't the current key in the pattern, reset
if (pattern.indexOf(event.key) < 0 || event.key !== pattern[current]) {
current = 0;
return;
}
// Update how much of the pattern is complete
current++;
// If complete, alert and reset
if (pattern.length === current) {
current = 0;
document.querySelector("body").classList.add("animate");
}
};
// Listen for keydown events
document.addEventListener('keydown', keyHandler, false);
})(jQuery);

View File

@ -41,9 +41,11 @@ body {
@include vendor(
"background-image",
(
"linear-gradient(45deg, #{_palette(accent)} 15%, #{_palette(accent1)} 29%, #{_palette(accent2)} 43%, #{_palette(accent3)} 57%, #{_palette(accent4)} 71%, #{_palette(accent5) 85%})"
"linear-gradient(45deg,#{_palette(accent)} 0.00%,#{_palette(accent1)} 6.67%,#{_palette(accent2)} 13.33%,#{_palette(accent3)} 20.00%,#{_palette(accent4)} 26.67%,#{_palette(accent5)} 33.33%,#{_palette(accent4)} 40.00%,#{_palette(accent3)} 46.67%,#{_palette(accent2)} 53.33%,#{_palette(accent1)} 60.00%,#{_palette(accent)} 66.67%,#{_palette(accent1)} 73.33%,#{_palette(accent2)} 80.00%,#{_palette(accent3)} 86.67%,#{_palette(accent4)} 93.33%,#{_palette(accent5)} 100.00%)"
)
);
background-size: 300% 300%;
background-position: 100% 0%;
// Stops initial animations until page loads.
&.is-preload {
@ -54,4 +56,17 @@ body {
@include vendor("transition", "none !important");
}
}
&.animate {
animation: ScrollBackground 5s linear infinite;
}
}
@keyframes ScrollBackground {
0% {
background-position: 100% 0%;
}
100% {
background-position: 0% 100%;
}
}