alina
/
lastfuture-de
1
0
Fork 0
Code Issues Projects Releases Activity

added mini logo animation

main
Alina Marquardt 2023-02-28 16:11:56 +00:00
parent a44f874bb9
commit eb52ae8480
4 changed files with 6 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
css/main.css
View File

@ -108,8 +108,8 @@ logo {
logo.sidebar {
width: 300px;
height: 230px;
background-size: 289px 170px;
background-position: -15px 5px;
background-size: 285px 190px;
background-position: 0px -9px;
left: 30px;
top: 30px;
z-index: 10;

BIN
images/lf-mini.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 210 KiB

3
js/main.js
View File

@ -19,6 +19,7 @@ document.addEventListener('alpine:init', () => {
phases: {
1: 'images/lf-anim-simple.gif',
2: 'images/lf-anim.gif',
9: 'images/lf-mini.gif',
},
sidebar: false,
init() {
@ -26,7 +27,7 @@ document.addEventListener('alpine:init', () => {
this.preloadPhase(1);
},
togglePhase() {
var phase = this.sidebar ? 1 : 2;
var phase = this.sidebar ? 9 : 2;
if (phase in this.phases) {
console.log("reloading logo phase", phase);
this.$el.style.backgroundImage = 'url(' + this.phases[phase] + ')';

4
sass/main.scss
View File

@ -110,8 +110,8 @@ logo {
&.sidebar {
width: 300px;
height: 230px;
background-size: 289px 170px;
background-position: -15px 5px;
background-size: 285px 190px;
background-position: 0px -9px;
left: 30px;
top: 30px;
z-index: 10;