feat: Add background animation to FPV
This commit is contained in:
parent
5480e83e29
commit
45b0aef67d
1 changed files with 29 additions and 1 deletions
|
|
@ -1,7 +1,34 @@
|
||||||
|
@use 'sass:list';
|
||||||
@use "sass:map";
|
@use "sass:map";
|
||||||
|
|
||||||
@use "../hippie-style/hippie";
|
@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 {
|
.body_game {
|
||||||
@extend .h_full_view;
|
@extend .h_full_view;
|
||||||
background-color: hotpink;
|
background-color: hotpink;
|
||||||
|
|
@ -32,9 +59,10 @@
|
||||||
@extend .h_full_view;
|
@extend .h_full_view;
|
||||||
|
|
||||||
canvas {
|
canvas {
|
||||||
|
@include fadeColors($steps, $colors);
|
||||||
|
|
||||||
display: block;
|
display: block;
|
||||||
cursor: none;
|
cursor: none;
|
||||||
background-color: lightblue;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.controls {
|
.controls {
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue