basic design, image loading logic for logo anim
This commit is contained in:
parent
c84d460f54
commit
feff3b9142
46
.gitignore
vendored
Normal file
46
.gitignore
vendored
Normal file
@ -0,0 +1,46 @@
|
||||
# Created by https://www.toptal.com/developers/gitignore/api/macos,nova,sass
|
||||
# Edit at https://www.toptal.com/developers/gitignore?templates=macos,nova,sass
|
||||
|
||||
### macOS ###
|
||||
# General
|
||||
.DS_Store
|
||||
.AppleDouble
|
||||
.LSOverride
|
||||
|
||||
# Icon must end with two \r
|
||||
Icon
|
||||
|
||||
|
||||
# Thumbnails
|
||||
._*
|
||||
|
||||
# Files that might appear in the root of a volume
|
||||
.DocumentRevisions-V100
|
||||
.fseventsd
|
||||
.Spotlight-V100
|
||||
.TemporaryItems
|
||||
.Trashes
|
||||
.VolumeIcon.icns
|
||||
.com.apple.timemachine.donotpresent
|
||||
|
||||
# Directories potentially created on remote AFP share
|
||||
.AppleDB
|
||||
.AppleDesktop
|
||||
Network Trash Folder
|
||||
Temporary Items
|
||||
.apdisk
|
||||
|
||||
### macOS Patch ###
|
||||
# iCloud generated files
|
||||
*.icloud
|
||||
|
||||
### nova ###
|
||||
.nova/*
|
||||
|
||||
### Sass ###
|
||||
.sass-cache/
|
||||
*.css.map
|
||||
*.sass.map
|
||||
*.scss.map
|
||||
|
||||
# End of https://www.toptal.com/developers/gitignore/api/macos,nova,sass
|
||||
86
css/main.css
Normal file
86
css/main.css
Normal file
File diff suppressed because one or more lines are too long
BIN
images/lf-anim-simple.gif
Normal file
BIN
images/lf-anim-simple.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 168 KiB |
BIN
images/lf-anim.gif
Normal file
BIN
images/lf-anim.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 MiB |
BIN
images/wood.png
Normal file
BIN
images/wood.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
30
index.html
30
index.html
@ -0,0 +1,30 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>lastfuture.de</title>
|
||||
<link rel="stylesheet" href="css/main.css">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Langar&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<logo
|
||||
x-data="logo"
|
||||
role="img" aria-label="animated lastfuture logo"
|
||||
@click="sidebar = !sidebar; togglePhase()"
|
||||
:class="sidebar ? 'sidebar' : ''">
|
||||
<span>lastfuture</span>
|
||||
</logo>
|
||||
<article class="main-article" x-data="{ expanded: false }">
|
||||
<h1
|
||||
@click="expanded = !expanded"
|
||||
>Untitled-1.txt</h1>
|
||||
<div class="content" x-cloak x-show="expanded">
|
||||
<p>Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Donec sed odio dui. <a href="//google.com/">Praesent commodo cursus magna</a>, vel scelerisque nisl consectetur et. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Donec id elit non mi porta gravida at eget metus.</p>
|
||||
|
||||
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia bibendum nulla sed consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
|
||||
</div>
|
||||
</article>
|
||||
<script src="js/main.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.11.1/dist/cdn.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
44
js/main.js
Normal file
44
js/main.js
Normal file
@ -0,0 +1,44 @@
|
||||
const loadImage = (url) => new Promise((resolve, reject) => {
|
||||
const img = new Image();
|
||||
img.addEventListener('load', () => resolve(img));
|
||||
img.addEventListener('error', (err) => reject(err));
|
||||
img.src = url;
|
||||
});
|
||||
|
||||
document.addEventListener('alpine:init', () => {
|
||||
Alpine.data('logo', () => ({
|
||||
logoPhase: 0,
|
||||
phases: {
|
||||
1: 'images/lf-anim-simple.gif',
|
||||
2: 'images/lf-anim.gif',
|
||||
},
|
||||
sidebar: true,
|
||||
init() {
|
||||
console.log("logo init");
|
||||
this.preloadPhase(1);
|
||||
},
|
||||
togglePhase() {
|
||||
var phase = this.sidebar ? 1 : 2;
|
||||
if (phase in this.phases) {
|
||||
console.log("reloading logo phase", phase);
|
||||
this.$el.style.backgroundImage = 'url(' + this.phases[phase] + ')';
|
||||
}
|
||||
},
|
||||
preloadPhase(phase) {
|
||||
console.log("loading logo phase", phase);
|
||||
console.log("phase exists", phase in this.phases);
|
||||
if (phase in this.phases) {
|
||||
this.logoPhase = phase;
|
||||
loadImage(this.phases[phase])
|
||||
.then(img => {
|
||||
console.log("swapping src")
|
||||
this.$el.style.backgroundImage = 'url(' + img.src + ')';
|
||||
this.preloadPhase(this.logoPhase+1);
|
||||
})
|
||||
.catch(err => console.error(err));
|
||||
} else {
|
||||
console.log("logo loading complete");
|
||||
}
|
||||
},
|
||||
}))
|
||||
})
|
||||
94
sass/main.scss
Normal file
94
sass/main.scss
Normal file
File diff suppressed because one or more lines are too long
Loading…
x
Reference in New Issue
Block a user