mirror of
https://github.com/EsotericSoftware/spine-runtimes.git
synced 2026-02-04 14:24:53 +08:00
Moved team example in its own page.
This commit is contained in:
Davide Tantillo
parent
e305358692
commit
cbbc88afdd
@ -196,6 +196,7 @@
|
||||
<li>Widget (Webcomponent)</li>
|
||||
<ul>
|
||||
<li><a href="/spine-widget/example/tutorial.html">Example</a></li>
|
||||
<li><a href="/spine-widget/example/team.html">Team</a></li>
|
||||
<li><a href="/spine-widget/example/gui.html">GUI</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
|
||||
121
spine-ts/spine-widget/example/team.html
Normal file
121
spine-ts/spine-widget/example/team.html
Normal file
@ -0,0 +1,121 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Webcomponent GUI</title>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 16px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div style=" background-color: #fff; max-width: 800px; margin: auto;">
|
||||
<h2 style="text-align: center; color: #333;">Meet our team!</h2>
|
||||
<h3 style="text-align: center; color: #333;">Hover to the widgets to make them jump, or click on them to change randomly the default animation.</h3>
|
||||
<div id="team-container" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; width: 100%;">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="module">
|
||||
import { createSpineWidget } from '../dist/esm/spine-widget.mjs';
|
||||
|
||||
const container = document.getElementById("team-container");
|
||||
|
||||
const members = [
|
||||
{ skin: "mario", name: "Mario", role: "Developer" },
|
||||
{ skin: "misaki", name: "Misaki", role: "Artist" },
|
||||
{ skin: "erikari", name: "Erika", role: "Artist" },
|
||||
{ skin: "nate", name: "Nate", role: "Developer" },
|
||||
{ skin: "luke", name: "Luke", role: "Support" },
|
||||
{ skin: "sinisa", name: "Sinisa", role: "Artist" },
|
||||
{ skin: "harri", name: "Harri", role: "Developer" },
|
||||
{ skin: "soeren", name: "Sören", role: "Artist" },
|
||||
{ skin: "spineboy", name: "Spineboy", role: "Mascotte" },
|
||||
];
|
||||
|
||||
const style = document.createElement("style");
|
||||
style.innerHTML = `
|
||||
.team-member:hover {
|
||||
transform: scale(1.25);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
|
||||
members.forEach(async (member, i) => {
|
||||
const div1 = document.createElement("div");
|
||||
container.appendChild(div1);
|
||||
div1.style.display = "flex";
|
||||
div1.style.flexDirection = "column";
|
||||
div1.style.alignItems = "center";
|
||||
div1.style.textAlign = "center";
|
||||
div1.style.backgroundColor = "#f9f9f9";
|
||||
div1.style.padding = "1rem";
|
||||
div1.style.borderRadius = "8px";
|
||||
div1.style.boxShadow = "0 4px 6px rgba(0,0,0,0.1)";
|
||||
div1.style.transition = "transform 0.3s ease";
|
||||
div1.classList.add("team-member");
|
||||
|
||||
|
||||
const div2 = document.createElement("div");
|
||||
div1.appendChild(div2);
|
||||
div2.style.width = "150px";
|
||||
div2.style.height = "150px";
|
||||
div2.style.border = "4px solid #333";
|
||||
|
||||
const widget = createSpineWidget({
|
||||
identifier: member.skin,
|
||||
atlasPath: "assets/pwd/chibi-stickers-pro-pwd-test.atlas",
|
||||
skeletonPath: "assets/pwd/chibi-stickers.json",
|
||||
skin: member.skin,
|
||||
animation: "emotes/wave",
|
||||
padTop: "0.05",
|
||||
padBottom: "0.05",
|
||||
isInteractive: true,
|
||||
});
|
||||
|
||||
div2.appendChild(widget);
|
||||
|
||||
const div3 = document.createElement("div");
|
||||
div1.appendChild(div3);
|
||||
div3.style.marginTop = "15px";
|
||||
div3.style.width = "100%";
|
||||
|
||||
const div4 = document.createElement("div");
|
||||
div3.appendChild(div4);
|
||||
div4.innerHTML = member.name;
|
||||
div4.style.fontWeight = "bold";
|
||||
div4.style.fontSize = "1.1rem";
|
||||
div4.style.marginBottom = "5px";
|
||||
div4.style.color = "#333";
|
||||
|
||||
const div5 = document.createElement("div");
|
||||
div3.appendChild(div5);
|
||||
div5.classList.add("team-member-role");
|
||||
div5.innerHTML = member.role;
|
||||
div5.style.fontSize = "0.9rem";
|
||||
div5.style.color = "#666";
|
||||
|
||||
await widget.whenReady;
|
||||
|
||||
const emotes = widget.skeleton.data.animations.reduce((acc, { name }) => name.startsWith("emotes") ? [...acc, name] : acc, []);
|
||||
let leaveAnimation = "emotes/wave";
|
||||
widget.cursorEventCallback = (event) => {
|
||||
if (event === "enter") widget.state.setAnimation(0, "emotes/hooray", true).mixDuration = .15;
|
||||
else if (event === "leave") widget.state.setAnimation(0, leaveAnimation, true).mixDuration = .25;
|
||||
else if (event === "down") {
|
||||
leaveAnimation = emotes[Math.floor(Math.random() * emotes.length)];
|
||||
widget.state.setAnimation(0, leaveAnimation, true).mixDuration = .25;
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -3436,230 +3436,6 @@ const darkPicker = document.getElementById("dark-picker");
|
||||
///////
|
||||
-->
|
||||
|
||||
|
||||
<!--
|
||||
/////////////////////
|
||||
// start section //
|
||||
/////////////////////
|
||||
-->
|
||||
<div class="section vertical-split">
|
||||
<div class="split-left" style="min-height: 0;">
|
||||
<p>You could use some Spine widgets to show your team.</p>
|
||||
<p>Hover to the widgets to make them jump, or click on them to change randomly the default animation.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style=" background-color: #fff;">
|
||||
<h2 style="text-align: center; padding: 2rem; color: #333;">Meet our team!</h2>
|
||||
<div id="team-container" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; width: 100%;">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const container = document.getElementById("team-container");
|
||||
|
||||
const members = [
|
||||
{ skin: "mario", name: "Mario", role: "Developer" },
|
||||
{ skin: "misaki", name: "Misaki", role: "Artist" },
|
||||
{ skin: "erikari", name: "Erika", role: "Artist" },
|
||||
{ skin: "nate", name: "Nate", role: "Developer" },
|
||||
{ skin: "luke", name: "Luke", role: "Support" },
|
||||
{ skin: "sinisa", name: "Sinisa", role: "Artist" },
|
||||
{ skin: "harri", name: "Harri", role: "Developer" },
|
||||
{ skin: "soeren", name: "Sören", role: "Artist" },
|
||||
{ skin: "spineboy", name: "Spineboy", role: "Mascotte" },
|
||||
];
|
||||
|
||||
const style = document.createElement("style");
|
||||
style.innerHTML = `
|
||||
.team-member:hover {
|
||||
transform: scale(1.25);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
|
||||
members.forEach(async (member, i) => {
|
||||
const div1 = document.createElement("div");
|
||||
container.appendChild(div1);
|
||||
div1.style.display = "flex";
|
||||
div1.style.flexDirection = "column";
|
||||
div1.style.alignItems = "center";
|
||||
div1.style.textAlign = "center";
|
||||
div1.style.backgroundColor = "#f9f9f9";
|
||||
div1.style.padding = "1rem";
|
||||
div1.style.borderRadius = "8px";
|
||||
div1.style.boxShadow = "0 4px 6px rgba(0,0,0,0.1)";
|
||||
div1.style.transition = "transform 0.3s ease";
|
||||
div1.classList.add("team-member");
|
||||
|
||||
|
||||
const div2 = document.createElement("div");
|
||||
div1.appendChild(div2);
|
||||
div2.style.width = "150px";
|
||||
div2.style.height = "150px";
|
||||
div2.style.border = "4px solid #333";
|
||||
|
||||
|
||||
const widget = spine.createSpineWidget({
|
||||
identifier: member.skin,
|
||||
atlasPath: "assets/pwd/chibi-stickers-pro-pwd-test.atlas",
|
||||
skeletonPath: "assets/pwd/chibi-stickers.json",
|
||||
skin: member.skin,
|
||||
animation: "emotes/wave",
|
||||
padTop: "0.05",
|
||||
padBottom: "0.05",
|
||||
isInteractive: true,
|
||||
});
|
||||
|
||||
div2.appendChild(widget);
|
||||
|
||||
const div3 = document.createElement("div");
|
||||
div1.appendChild(div3);
|
||||
div3.style.marginTop = "15px";
|
||||
div3.style.width = "100%";
|
||||
|
||||
const div4 = document.createElement("div");
|
||||
div3.appendChild(div4);
|
||||
div4.innerHTML = member.name;
|
||||
div4.style.fontWeight = "bold";
|
||||
div4.style.fontSize = "1.1rem";
|
||||
div4.style.marginBottom = "5px";
|
||||
div4.style.color = "#333";
|
||||
|
||||
const div5 = document.createElement("div");
|
||||
div3.appendChild(div5);
|
||||
div5.classList.add("team-member-role");
|
||||
div5.innerHTML = member.role;
|
||||
div5.style.fontSize = "0.9rem";
|
||||
div5.style.color = "#666";
|
||||
|
||||
await widget.whenReady;
|
||||
|
||||
const emotes = widget.skeleton.data.animations.reduce((acc, { name }) => name.startsWith("emotes") ? [...acc, name] : acc, []);
|
||||
let leaveAnimation = "emotes/wave";
|
||||
widget.cursorEventCallback = (event) => {
|
||||
if (event === "enter") widget.state.setAnimation(0, "emotes/hooray", true).mixDuration = .15;
|
||||
else if (event === "leave") widget.state.setAnimation(0, leaveAnimation, true).mixDuration = .25;
|
||||
else if (event === "down") {
|
||||
leaveAnimation = emotes[Math.floor(Math.random() * emotes.length)];
|
||||
widget.state.setAnimation(0, leaveAnimation, true).mixDuration = .25;
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="split-bottom">
|
||||
<pre><code id="code-display">
|
||||
<script>escapeHTMLandInject(`
|
||||
<div style=" background-color: #fff;">
|
||||
<h2 style="text-align: center; padding: 2rem; color: #333;">Meet our team!</h2>
|
||||
<div id="team-container" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; width: 100%;">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
const container = document.getElementById("team-container");
|
||||
|
||||
const members = [
|
||||
{ skin: "mario", name: "Mario", role: "Developer" },
|
||||
{ skin: "misaki", name: "Misaki", role: "Artist" },
|
||||
{ skin: "erikari", name: "Erika", role: "Artist" },
|
||||
{ skin: "nate", name: "Nate", role: "Developer" },
|
||||
{ skin: "luke", name: "Luke", role: "Support" },
|
||||
{ skin: "sinisa", name: "Sinisa", role: "Artist" },
|
||||
{ skin: "harri", name: "Harri", role: "Developer" },
|
||||
{ skin: "soeren", name: "Sören", role: "Artist" },
|
||||
{ skin: "spineboy", name: "Spineboy", role: "Mascotte" },
|
||||
];
|
||||
|
||||
const style = document.createElement("style");
|
||||
style.innerHTML = \`
|
||||
.team-member:hover {
|
||||
transform: scale(1.25);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
\`;
|
||||
document.head.appendChild(style);
|
||||
|
||||
members.forEach(async (member, i) => {
|
||||
const div1 = document.createElement("div");
|
||||
container.appendChild(div1);
|
||||
div1.style.display = "flex";
|
||||
div1.style.flexDirection = "column";
|
||||
div1.style.alignItems = "center";
|
||||
div1.style.textAlign = "center";
|
||||
div1.style.backgroundColor = "#f9f9f9";
|
||||
div1.style.padding = "1rem";
|
||||
div1.style.borderRadius = "8px";
|
||||
div1.style.boxShadow = "0 4px 6px rgba(0,0,0,0.1)";
|
||||
div1.style.transition = "transform 0.3s ease";
|
||||
div1.classList.add("team-member");
|
||||
|
||||
|
||||
const div2 = document.createElement("div");
|
||||
div1.appendChild(div2);
|
||||
div2.style.width = "150px";
|
||||
div2.style.height = "150px";
|
||||
div2.style.border = "4px solid #333";
|
||||
|
||||
|
||||
const widget = spine.createSpineWidget({
|
||||
identifier: member.skin,
|
||||
atlasPath: "assets/pwd/chibi-stickers-pro-pwd-test.atlas",
|
||||
skeletonPath: "assets/pwd/chibi-stickers.json",
|
||||
skin: member.skin,
|
||||
animation: "emotes/wave",
|
||||
padTop: "0.05",
|
||||
padBottom: "0.05",
|
||||
isInteractive: true,
|
||||
});
|
||||
|
||||
div2.appendChild(widget);
|
||||
|
||||
const div3 = document.createElement("div");
|
||||
div1.appendChild(div3);
|
||||
div3.style.marginTop = "15px";
|
||||
div3.style.width = "100%";
|
||||
|
||||
const div4 = document.createElement("div");
|
||||
div3.appendChild(div4);
|
||||
div4.innerHTML = member.name;
|
||||
div4.style.fontWeight = "bold";
|
||||
div4.style.fontSize = "1.1rem";
|
||||
div4.style.marginBottom = "5px";
|
||||
div4.style.color = "#333";
|
||||
|
||||
const div5 = document.createElement("div");
|
||||
div3.appendChild(div5);
|
||||
div5.classList.add("team-member-role");
|
||||
div5.innerHTML = member.role;
|
||||
div5.style.fontSize = "0.9rem";
|
||||
div5.style.color = "#666";
|
||||
|
||||
await widget.whenReady;
|
||||
|
||||
const emotes = widget.skeleton.data.animations.reduce((acc, { name }) => name.startsWith("emotes") ? [...acc, name] : acc, []);
|
||||
let leaveAnimation = "emotes/wave";
|
||||
widget.cursorEventCallback = (event) => {
|
||||
if (event === "enter") widget.state.setAnimation(0, "emotes/hooray", true).mixDuration = .15;
|
||||
else if (event === "leave") widget.state.setAnimation(0, leaveAnimation, true).mixDuration = .25;
|
||||
else if (event === "down") {
|
||||
leaveAnimation = emotes[Math.floor(Math.random() * emotes.length)];
|
||||
widget.state.setAnimation(0, leaveAnimation, true).mixDuration = .25;
|
||||
}
|
||||
}
|
||||
});`
|
||||
);</script>
|
||||
</code></pre>
|
||||
</div>
|
||||
|
||||
<!--
|
||||
/////////////////////
|
||||
// end section //
|
||||
///////
|
||||
-->
|
||||
|
||||
|
||||
<!--
|
||||
/////////////////////
|
||||
// start section //
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user