jeffemmett
/
folk-canvas
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

quick and dirty space morph thing

This commit is contained in:
Orion Reed 2024-12-02 19:28:31 -05:00
parent a5b5d390dd
commit 9ef6bc302b
2 changed files with 132 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
demo/space-morph.html Normal file
View File

@ -0,0 +1,60 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Folk Space Demo</title>
<style>
html,
body {
margin: 0;
height: 100%;
}
folk-space {
width: 100%;
height: 100%;
}
folk-shape {
background: rgb(187, 178, 178);
}
</style>
</head>
<body>
<folk-space id="space">
<div slot="front">
<folk-shape x="100" y="100" width="50" height="50"></folk-shape>
<folk-shape x="200" y="200" width="75" height="75" rotation="90"></folk-shape>
<folk-shape x="50" y="250" width="25" height="25" rotation="180"></folk-shape>
<folk-shape x="350" y="50" width="100" height="100" rotation="270"></folk-shape>
<folk-shape x="500" y="500" width="150" height="150" rotation="360"></folk-shape>
<folk-shape x="600" y="600" width="200" height="200" rotation="450"></folk-shape>
<folk-shape x="700" y="700" width="250" height="250" rotation="540"></folk-shape>
</div>
<div slot="back">
<folk-shape x="150" y="150" width="50" height="50" rotation="45"></folk-shape>
<folk-shape x="300" y="400" width="150" height="50" rotation="45"></folk-shape>
<folk-shape x="250" y="350" width="100" height="100" rotation="135"></folk-shape>
<folk-shape x="400" y="200" width="75" height="75" rotation="225"></folk-shape>
<folk-shape x="200" y="450" width="50" height="50" rotation="315"></folk-shape>
<folk-shape x="600" y="600" width="200" height="200" rotation="405"></folk-shape>
<folk-shape x="700" y="700" width="250" height="250" rotation="495"></folk-shape>
</div>
</folk-space>
<script type="module">
import { FolkSpace } from '../src/folk-space.ts';
import { FolkShape } from '../src/folk-shape.ts';
FolkSpace.define();
FolkShape.define();
const space = document.getElementById('space');
document.addEventListener('keydown', (event) => {
if (event.key === 'Enter') {
space.transition();
}
});
</script>
</body>
</html>

72
src/folk-space.ts Normal file
View File

@ -0,0 +1,72 @@
import { html } from './common/tags';
declare global {
interface HTMLElementTagNameMap {
'folk-space': FolkSpace;
}
}
export class FolkSpace extends HTMLElement {
static tagName = 'folk-space';
static define() {
customElements.define(this.tagName, this);
}
constructor() {
super();
const shadowRoot = this.attachShadow({ mode: 'open' });
shadowRoot.innerHTML = html`
<style>
:host {
display: block;
perspective: 1000px;
position: relative;
width: 100%;
height: 100%;
}
.space {
position: absolute;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transform-origin: center;
transition: transform 0.6s;
}
.space.rotate {
transform: rotateX(-90deg);
}
.face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.front {
transform: rotateX(0deg);
}
.back {
transform: rotateX(90deg);
}
</style>
<div class="space">
<div class="face front">
<slot name="front"></slot>
</div>
<div class="face back">
<slot name="back"></slot>
</div>
</div>
`;
}
transition() {
const space = this.shadowRoot?.querySelector('.space');
space?.classList.toggle('rotate');
}
}