interaktionsweise/hippie
1
1
Fork 0
Code Issues Pull requests Releases 3 Activity Actions

feat: Add background animation to FPV

Browse source
This commit is contained in:
sthag 2026-03-24 20:43:53 +01:00
parent 5480e83e29
commit 45b0aef67d
1 changed files with 29 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

30
source/style/modules/_game.scss
View file

@ -1,7 +1,34 @@
@use 'sass:list';
@use "sass:map";
@use "../hippie-style/hippie";
$colors: hippie.$color_palette;
$steps: (0, 14.28, 28.57, 42.85, 57.14, 71.43, 100);
@function getColor($index, $colors) {
$color_keys: map.keys($colors);
$key_count: list.length($color_keys);
$cycled_index: ($index % $key_count) + 1;
$key: list.nth($color_keys, $cycled_index);
@return map.get($colors, $key);
}
@mixin fadeColors($steps, $colors) {
@keyframes fadeColor {
@for $i from 1 through list.length($steps) {
$percent: list.nth($steps, $i);
$color: getColor($i - 1, $colors);
#{$percent}% {
background-color: $color;
}
}
}
animation: fadeColor 16s infinite linear;
}
.body_game {
@extend .h_full_view;
background-color: hotpink;
@ -32,9 +59,10 @@
@extend .h_full_view;
canvas {
@include fadeColors($steps, $colors);
display: block;
cursor: none;
background-color: lightblue;
}
.controls {