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 { logo.sidebar {
width: 300px; width: 300px;
height: 230px; height: 230px;
background-size: 289px 170px; background-size: 285px 190px;
background-position: -15px 5px; background-position: 0px -9px;
left: 30px; left: 30px;
top: 30px; top: 30px;
z-index: 10; 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: { phases: {
1: 'images/lf-anim-simple.gif', 1: 'images/lf-anim-simple.gif',
2: 'images/lf-anim.gif', 2: 'images/lf-anim.gif',
9: 'images/lf-mini.gif',
}, },
sidebar: false, sidebar: false,
init() { init() {
@ -26,7 +27,7 @@ document.addEventListener('alpine:init', () => {
this.preloadPhase(1); this.preloadPhase(1);
}, },
togglePhase() { togglePhase() {
var phase = this.sidebar ? 1 : 2; var phase = this.sidebar ? 9 : 2;
if (phase in this.phases) { if (phase in this.phases) {
console.log("reloading logo phase", phase); console.log("reloading logo phase", phase);
this.$el.style.backgroundImage = 'url(' + this.phases[phase] + ')'; this.$el.style.backgroundImage = 'url(' + this.phases[phase] + ')';

4
sass/main.scss
View File

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