comic-bubbles
Version:
Animated comic bubbles - what else?
70 lines (51 loc) • 1.76 kB
HTML
<!-- index.html -->
<html>
<head> </head>
<body>
<div class="center" id="showGif"></div>
<script type="module">
import { settingScene, stopScene } from './index.mjs'
import { wait } from './javascript/helperFunctions.mjs'
async function go(sceneId) {
/* await stop(sceneId)
await wait(1000) */
await start(sceneId)
/* await wait(1000)
await stop(sceneId)
await wait(1000)
await start(sceneId) */
}
go('scene1')
async function start(sceneId) {
const showGif = document.getElementById('showGif')
let comicDiv = document.createElement('div')
comicDiv.style.position = 'relative'
let bubbleCanvas = document.createElement('canvas')
bubbleCanvas.setAttribute('id', sceneId)
bubbleCanvas.style.position = 'absolute'
bubbleCanvas.style.left = '150px'
bubbleCanvas.style.transform = 'scale(4)'
bubbleCanvas.style.imageRendering = 'pixelated'
bubbleCanvas.style.transformOrigin = 'left top'
let angryImg = document.createElement('img')
angryImg.src = 'resources/angry-holm-animated.gif'
angryImg.style.imageRendering = 'pixelated'
angryImg.style.width = '240px'
comicDiv.appendChild(bubbleCanvas)
comicDiv.appendChild(angryImg)
while (showGif.firstChild) {
showGif.removeChild(showGif.firstChild)
}
showGif.appendChild(comicDiv)
settingScene(sceneId)
}
async function stop(sceneId) {
await stopScene(sceneId)
while (showGif.firstChild) {
showGif.removeChild(showGif.firstChild)
}
}
</script>
</body>
</html>