III,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<style type="text/css">
.kartink {
position: relative;
width: 400px;
height: 400px;
}
.kartink img {
position: absolute;
transform: scale(var(--scale, 1));
}
</style>
</head>
<body>
<div class="kartink">
<img>
</div>
<script>
const flower = [{
src: "https://habrastorage.org/webt/ro/xv/b8/roxvb8fy1dml_inxatpcqwopgl8.jpeg",
imgpos: [140, 40],
scale: .5
},
{
src: "https://habrastorage.org/webt/ro/xv/b8/roxvb8fy1dml_inxatpcqwopgl8.jpeg",
imgpos: [40, 80],
scale: .3
},
{
src: "https://habrastorage.org/webt/ro/xv/b8/roxvb8fy1dml_inxatpcqwopgl8.jpeg",
imgpos: [40, 180],
scale: .7
},
{
src: "https://habrastorage.org/webt/ro/xv/b8/roxvb8fy1dml_inxatpcqwopgl8.jpeg",
imgpos: [40, 40],
scale: .25
}
];
const img = document.querySelector('.kartink img');
const delay = (t) => new Promise(r => setTimeout(r, 1500));
async function cycle() {
await delay(2500);
for (let f of flower) {
img.src = f.src;
Object.assign(img.style, {
top: `${f.imgpos[0]}px`,
left: `${f.imgpos[1]}px`,
opacity: 1,
})
img.style.setProperty("--scale", f.scale);
await delay(2500);
}
img.style.display = 'none';
}
cycle();
</script>
</body>
</html>