Возможность масштабирования в данном скрипте

Question

Всем привет. Есть у меня вот такой скрипт:

const fishImages = [
    {src: "https://habrastorage.org/webt/kk/cn/4_/kkcn4_t1mb8fdvqeo6smjw3vx-s.gif", pos: [30, 60]},
    {src: "https://habrastorage.org/webt/ey/mp/x9/eympx9alcbxkkwwegpaea9zwf-a.gif", pos: [45, 70]},
    {src: "https://habrastorage.org/webt/kk/cn/4_/kkcn4_t1mb8fdvqeo6smjw3vx-s.gif", pos: [30, 60]},
    {src: "https://habrastorage.org/webt/ey/mp/x9/eympx9alcbxkkwwegpaea9zwf-a.gif", pos: [45, 70]},
];
 
const img = document.querySelector('.fish img');

const delay = (t) => new Promise (r => setTimeout(r, t))
 
async function cycle () {  
    await delay(500);
    for (let f of fishImages) {
        img.src = f.src;
        img.style = `top: ${f.pos[0]}px; left: ${f.pos[1]}px;`
        await delay(2500);
    }          
}
 
cycle();

<div class="fish">
<img>
</div>

Хотелось бы тут добавить масштабирование картинки. Показ картинок происходит по разным координатам и в зависимости от этого должен меняться их размер. Что надо добавить в скрипт, чтобы решить эту задачу? Я сам в скриптах мало что соображаю, но хотелось бы решить эту задачу. Всем спасибо.

Answer 1

Надо было сделать так.

const flower = [{
                src: "https://habrastorage.org/webt/kk/cn/4_/kkcn4_t1mb8fdvqeo6smjw3vx-s.gif",
                imgpos: [100, 40],
                scale: .5
 
            },
            {
                src: "https://habrastorage.org/webt/ey/mp/x9/eympx9alcbxkkwwegpaea9zwf-a.gif",
                imgpos: [40, 80],
                scale: .3
            },
            {
                src: "https://habrastorage.org/webt/kk/cn/4_/kkcn4_t1mb8fdvqeo6smjw3vx-s.gif",
                imgpos: [40, 180],
                scale: .7
            },
            {
                src: "https://habrastorage.org/webt/ey/mp/x9/eympx9alcbxkkwwegpaea9zwf-a.gif",
                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();

 .kartink {
            position: relative;
            width: 400px;
            height: 400px;
        }
 
        .kartink img {
            position: absolute;
            transform: scale(var(--scale, 1));
        }

 <div class="kartink">
        <img>
    </div>

БЛОГ НА HUSL

Возможность масштабирования в данном скрипте

Ответы (1 шт):