Применение эффекта масштабирования картинки в скрипте

Question

Есть вот такой вариант показа картинки в разных координатах и разного масштаба.

const fishImages = [
  {
    src:
      "https://habrastorage.org/webt/kk/cn/4_/kkcn4_t1mb8fdvqeo6smjw3vx-s.gif",
    imgpos: [70, 40],
    scale: 0.6
  },
  {
    src:
      "https://habrastorage.org/webt/ey/mp/x9/eympx9alcbxkkwwegpaea9zwf-a.gif",
    imgpos: [40, 80],
    scale: 0.4
  },
  {
    src:
      "https://habrastorage.org/webt/kk/cn/4_/kkcn4_t1mb8fdvqeo6smjw3vx-s.gif",
    imgpos: [40, 180],
    scale: 0.7
  },
  {
    src:
      "https://habrastorage.org/webt/ey/mp/x9/eympx9alcbxkkwwegpaea9zwf-a.gif",
    imgpos: [40, 40],
    scale: 1
  },
];

const img = document.querySelector(".fish img");

const delay = (t) => new Promise((r) => setTimeout(r, 1500));

async function cycle() {
  for (let f of fishImages) {
    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(4500);
  }
  img.style.display = "none";
}
cycle();

.fish img {
            position: absolute;
            transform: scale(var(--scale, 1));
        }

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

И есть у меня вот такой вариант открытки, где нет масштабирования рыбок и они выпрыгивают в одних и тех же координатах, представляю весь код открытки, чтобы всё было понятно где и что надо исправить.

var textNodes = [];
var textNodes_data = [];
var i=0;
function search_textNodes(b) {
    b = b.childNodes;
    for (var c = 0, d = b.length; c < d; c++) {
        var a = b[c];
        if (a.nodeType == 3) {
            textNodes.push(a);
            textNodes_data.push(a.data);
            a.data = ""
        } else a.hasChildNodes() && search_textNodes(a)
    }
};

var d = document.getElementById('test');
search_textNodes(d);
function str_write() {
    var a = textNodes_data[i];
    if (a) {
        textNodes[i].data += a.charAt(0);
        textNodes_data[i] = a.substr(1)
    } else i++;
    i < textNodes.length && setTimeout(arguments.callee, 160)
};
str_write()


const frazas = [
    {src: "https://habrastorage.org/webt/7e/zs/bh/7ezsbh3mvq1wrlzft96v5tt_j04.png",  
    imgpos: [180, 516],  
    text: "Час сидим<br> клёва нет.",   
    textpos: [208, 545]
    },            
    {src: "https://habrastorage.org/webt/pq/ep/mf/pqepmfu6zlmoloz4kwah3vjmn_e.png",  
    imgpos: [172, 739],  
    text: "Непруха <br> сегодня. ",   
    textpos: [200, 770]
    },                       
     {src: "https://habrastorage.org/webt/pq/ep/mf/pqepmfu6zlmoloz4kwah3vjmn_e.png",  
    imgpos: [165, 871],  
    text: "С клёвом <br> тишина.",  
    textpos: [195, 895]
    },      
   {src: "https://habrastorage.org/webt/7e/zs/bh/7ezsbh3mvq1wrlzft96v5tt_j04.png",  
    imgpos: [180, 516],  
    text: "Вот и Андрюха<br> на горизонте!",   
    textpos: [205, 528]
    },
    {src: "https://habrastorage.org/webt/pq/ep/mf/pqepmfu6zlmoloz4kwah3vjmn_e.png",  
    imgpos: [172, 739],  
    text: "Андрюха, <br> клёва нет!",   
    textpos: [197, 768]
    },                       
     {src: "https://habrastorage.org/webt/pq/ep/mf/pqepmfu6zlmoloz4kwah3vjmn_e.png",  
    imgpos: [165, 871],  
    text: "Клевать <br> не будет!",  
    textpos: [195, 899]
    },
     {src: "https://habrastorage.org/webt/7e/zs/bh/7ezsbh3mvq1wrlzft96v5tt_j04.png",  
    imgpos: [180, 519],  
    text: "У Андрюхи<br> жор начался!",   
    textpos: [205, 538]
    },
    {src: "https://habrastorage.org/webt/pq/ep/mf/pqepmfu6zlmoloz4kwah3vjmn_e.png",  
    imgpos: [172, 739],  
    text: "Во попёрло!!!",   
    textpos: [208, 755]
    },                       
     {src: "https://habrastorage.org/webt/pq/ep/mf/pqepmfu6zlmoloz4kwah3vjmn_e.png",  
    imgpos: [165, 871],  
    text: "Нам бы так!",  
    textpos: [203, 889]
    },

    {src: "https://habrastorage.org/webt/7e/zs/bh/7ezsbh3mvq1wrlzft96v5tt_j04.png",  
    imgpos: [180, 516],  
    text: "Сойди!!! <br> Сойди!!!",   
    textpos: [209, 546]
    },
    {src: "https://habrastorage.org/webt/pq/ep/mf/pqepmfu6zlmoloz4kwah3vjmn_e.png",  
    imgpos: [172, 739],  
    text: "У него <br> не сойдёт.",   
    textpos: [200, 763]
    },                       
     {src: "https://habrastorage.org/webt/pq/ep/mf/pqepmfu6zlmoloz4kwah3vjmn_e.png",  
    imgpos: [165, 871],  
    text: "Чем кормил?",  
    textpos: [203, 889]
    },
    {src: "https://habrastorage.org/webt/7e/zs/bh/7ezsbh3mvq1wrlzft96v5tt_j04.png",  
    imgpos: [180, 516],  
    text: "На что ловишь?",   
    textpos: [216, 528]
    },
    {src: "https://habrastorage.org/webt/pq/ep/mf/pqepmfu6zlmoloz4kwah3vjmn_e.png",  
    imgpos: [172, 739],  
    text: "Продай секрет.",   
    textpos: [208, 755]
    },                       
     {src: "https://habrastorage.org/webt/pq/ep/mf/pqepmfu6zlmoloz4kwah3vjmn_e.png",  
    imgpos: [165, 871],  
    text: "Ставлю литр!!!",  
    textpos: [202, 883]
    },
      {src: "https://habrastorage.org/webt/7e/zs/bh/7ezsbh3mvq1wrlzft96v5tt_j04.png",  
    imgpos: [180, 516],  
    text: "Рука не устала?",   
    textpos: [215, 526]
    },
    {src: "https://habrastorage.org/webt/pq/ep/mf/pqepmfu6zlmoloz4kwah3vjmn_e.png",  
    imgpos: [172, 739],  
    text: "Оставь <br> на завтра.",   
    textpos: [203, 762]
    },                       
     {src: "https://habrastorage.org/webt/pq/ep/mf/pqepmfu6zlmoloz4kwah3vjmn_e.png",  
    imgpos: [165, 871],  
    text: "Завтра ведро <br> побольше.",  
    textpos: [195, 889]
    },                                            
];
 
const fishImages = [
    {src: "https://habrastorage.org/webt/kk/cn/4_/kkcn4_t1mb8fdvqeo6smjw3vx-s.gif", pos: [330, 600]},
    {src: "https://habrastorage.org/webt/ey/mp/x9/eympx9alcbxkkwwegpaea9zwf-a.gif", pos: [345, 670]},
    {src: "https://habrastorage.org/webt/kk/cn/4_/kkcn4_t1mb8fdvqeo6smjw3vx-s.gif", pos: [330, 600]},
    {src: "https://habrastorage.org/webt/ey/mp/x9/eympx9alcbxkkwwegpaea9zwf-a.gif", pos: [345, 670]},
];
 
const fishImages_1 = [
    {src: "https://habrastorage.org/webt/kk/cn/4_/kkcn4_t1mb8fdvqeo6smjw3vx-s.gif", pos: [330, 600]},
    {src: "https://habrastorage.org/webt/u3/qd/9p/u3qd9pda2b9k5-zmrtauyhndxm0.gif", pos: [345, 670]},
    {src: "https://habrastorage.org/webt/kk/cn/4_/kkcn4_t1mb8fdvqeo6smjw3vx-s.gif", pos: [330, 600]},
    {src: "https://habrastorage.org/webt/ey/mp/x9/eympx9alcbxkkwwegpaea9zwf-a.gif", pos: [345, 670]},
    {src: "https://habrastorage.org/webt/kk/cn/4_/kkcn4_t1mb8fdvqeo6smjw3vx-s.gif", pos: [330, 600]},
    {src: "https://habrastorage.org/webt/ey/mp/x9/eympx9alcbxkkwwegpaea9zwf-a.gif", pos: [345, 670]},
    {src: "https://habrastorage.org/webt/kk/cn/4_/kkcn4_t1mb8fdvqeo6smjw3vx-s.gif", pos: [330, 600]},
    {src: "https://habrastorage.org/webt/ey/mp/x9/eympx9alcbxkkwwegpaea9zwf-a.gif", pos: [345, 670]},
    {src: "https://habrastorage.org/webt/kk/cn/4_/kkcn4_t1mb8fdvqeo6smjw3vx-s.gif", pos: [330, 600]},
    {src: "https://habrastorage.org/webt/ey/mp/x9/eympx9alcbxkkwwegpaea9zwf-a.gif", pos: [345, 670]},
    {src: "https://habrastorage.org/webt/kk/cn/4_/kkcn4_t1mb8fdvqeo6smjw3vx-s.gif", pos: [330, 600]},
    {src: "https://habrastorage.org/webt/ey/mp/x9/eympx9alcbxkkwwegpaea9zwf-a.gif", pos: [345, 670]},
     {src: "https://habrastorage.org/webt/kk/cn/4_/kkcn4_t1mb8fdvqeo6smjw3vx-s.gif", pos: [330, 600]},

];

const img = document.querySelector('.fraza img');
const txt = document.querySelector('.fraza b');
 
const delay = (t) => new Promise (r => setTimeout(r, t))
 
async function cycle () {  
    await delay(4500);
    for (let f of fishImages) {
        img.src = f.src;
        img.style = `top: ${f.pos[0]}px; left: ${f.pos[1]}px;`
        await delay(4500);
    }
    img.style = 'opacity: 0;'  
await delay(6500);
    for (let f of frazas) {
        img.src = f.src;
        img.style = `top: ${f.imgpos[0]}px; left: ${f.imgpos[1]}px; opacity: 1;`
        txt.innerHTML = f.text
        txt.style = `top: ${f.textpos[0]}px; left: ${f.textpos[1]}px; opacity: 1;`
        await delay(3000);
        img.style = `top: ${f.imgpos[0]}px; left: ${f.imgpos[1]}px; opacity: 0;`
        txt.innerHTML = f.text
        txt.style = `top: ${f.textpos[0]}px; left: ${f.textpos[1]}px; opacity: 0;`
        await delay(1500);
    }

    txt.textContent = '';    
    img.style.display = 'none';  
 
 
    img.style = 'opacity: 0;'  
    await delay(4500);
    for (let f of fishImages_1) {
        img.src = f.src;
        img.style = `top: ${f.pos[0]}px; left: ${f.pos[1]}px;`
        await delay(4500);
    }

}
 
cycle();

body {
      margin: 0;
    }
.container {

  width: 100%;
  margin: 0 auto;
  max-width: 1064px;
}

.image-stack::after {
    content: ' ';
    display: table;
    clear: both;
  }
  
.fraza img {
    position: absolute;
    opacity: 1;
    transition: opacity 1.5s;
}

.fraza b {
    position: absolute;
    font-size: 13px;
    opacity: 0;
    transition: opacity 1.5s;
}

img {
      float: left;         
      z-index: 4; 
  }

b {
      float: left;         
      z-index: 5; 
  }

.container_butylka {
      float: left;         
      z-index: 9; 
  }



#test {
      float: left;         
      z-index: 5; 
  }

.voda {
      float: left;         
      z-index: 1;
  }

.prud {
      float: left;         
      z-index: 1;
  }

.polkarasya {
 float: left;     
 z-index: 3;    
}

.dozavtra {
 float: left;     
 z-index: 3;    
}

.rybak {
 float: left;     
 z-index: 4;    
}

.bsi {
      float: left;           
      z-index: 5; 
}

.muz {
      float: left;           
      z-index: 10; 
}


.butylka {
      float: left;         
      z-index: 6; 
  }


.text_nadpis {
      float: left;         
      z-index: 6; 
  }

.stakan_l {
      float: left;         
      z-index: 6;
 }

.stakan_p {
      float: left;         
      z-index: 6; 
 }
@supports (display: grid) {
.image-stack {
    display: grid;
    position: relative;
    grid-template-columns: repeat(12, 1fr);
  }

.voda {
 width: 1064px;
height: 310px;
grid-column: 4 / -1;
grid-row: 1; 
margin-top: 20em;
margin-left: 0em;  
  }
  
  .prud {
grid-column: 4 / -1;
grid-row: 1; 
margin-top: 6.2em;
margin-left: 0em;  
  }

    
#test { 
width: 32vw;
height: 25vw;
position: absolute; 
top: 0;
left: -19em;
top: 4em;
right: 0;
margin: auto;

text-align: left;
  color: white;
  font:  500 30px/1.5 'Syncopate', sans-serif;
  font-style: italic;

  text-shadow: 
    0 1px 0 #ccc, 
        0 2px 0 #c9c9c9,
        0 3px 0 #bbb,
        0 4px 0 #b9b9b9,
        0 5px 0 #aaa,
        0 6px 1px   rgba(0,0,0, 0.10),
        0 0px 5px   rgba(0,0,0, 0.10),
        0 1px 3px   rgba(0,0,0, 0.30),
        0 3px 5px   rgba(0,0,0, 0.20),
        0 5px 10px  rgba(0,0,0, 0.25),
        0 10px 10px rgba(0,0,0, 0.20),
        0 20px 20px rgba(0,0,0, 0.15);
 
 font-size: 2vw; }

.rybak {
grid-row: 1;
grid-column: 1;
transform: scale(0.8);
position: relative;
margin-top: -33em;
margin-left: 5em;
opacity: 0;
transition: 2s;
animation: animRybak 131.5s linear 43.5s forwards;    
}
       @keyframes animRybak {
  0% {
    opacity:0;
  }
  2% {
    opacity: 1;
  }
  95% {
    opacity: 1;
  }
  100% {
   opacity:0;
  }
}

.polkarasya {
grid-row: 1;
grid-column: 1;
transform: scale(0.3);
position: relative;
margin-top: -22em;
margin-left: 35.5em;
animation: PolkarasyaAnimation 3.5s linear 181s forwards;
visibility: hidden; 
 }
@keyframes PolkarasyaAnimation {
to {visibility: visible;}
  } 

.dozavtra {
grid-row: 1;
grid-column: 1;
position: relative;
margin-left: 35.5em;
margin-top: -25.5em;
transform: scale(1);
opacity: 0;
animation: DozavtraAnimation 3.5s linear 181.3s forwards;
}
@keyframes DozavtraAnimation {
  0% {
    opacity:0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
   opacity:0;
  }
}

.container_butylka {
grid-row: 1;
grid-column: 1;
width: 100%;
margin-top: -15em;
margin-left: 30em;
max-width: 200px;
position: relative;
opacity: 0; 
transition: 3s;
animation: aniButylka 2s linear 187s forwards;
}
 @keyframes  aniButylka {
  0% {
    opacity:0;
  }
  50% {
    opacity: 0.5;
  }
  95% {
    opacity: 0.75;
  }
  100% {
   opacity:1;
  }
}

.text_nadpis {
grid-row: 1;
grid-column: 1;
position: relative;
margin-top: -25.5em;
margin-left: 10.3em;
}
 
.butylka {
grid-row: 1;
grid-column: 1;
transform: scale(0.85);
position: relative;
margin-top: -7em;
margin-left: 15.5em;
} 

.stakan_l {
grid-row: 1;
grid-column: 1;
position: relative;
margin-top: -5em;
margin-left:12em;
} 

.stakan_p {
grid-row: 1;
grid-column: 1;
position: relative;
margin-top: -5em;
margin-left:23em;
} 
 
.bsi { 
grid-row: 1;
grid-column: 1;
 position: relative;
margin-left:61em;
margin-top: -6em;

  -webkit-box-reflect: below -20px linear-gradient(transparent, rgba(0,0,0,.2));
}

.bsi span {
position: relative;
 display: inline-block;
  font-size: 30px;
  color: #fff;
 
text-shadow: 
    0 1px 0 #ccc, 
        0 2px 0 #c9c9c9,
        0 3px 0 #bbb,
        0 4px 0 #b9b9b9,
        0 5px 0 #aaa,
        0 6px 1px   rgba(0,0,0, 0.10),
        0 0px 5px   rgba(0,0,0, 0.10),
        0 1px 3px   rgba(0,0,0, 0.30),
        0 3px 5px   rgba(0,0,0, 0.20),
        0 5px 10px  rgba(0,0,0, 0.25),
        0 10px 10px rgba(0,0,0, 0.20),
        0 20px 20px rgba(0,0,0, 0.15);
 
 font-size: 2vw;

 text-transform: uppercase;
  animation: bsi 5s infinite;
  animation-delay: calc(.5s * var(--i))

}

@keyframes bsi {
  0%,40%,100% {
    transform: translateY(0)
  }
  20% {
    transform: translateY(-20px)
  }
}

.muz {
grid-row: 1;
grid-column: 1;
position: relative; 
transform: scale(0.5);  
margin-left : -2em;;
margin-top: -6em;
}

<div class="container">
  <div class="image-stack">

<img class="voda"
src="https://habrastorage.org/webt/7j/je/y1/7jjey1uhale7vcbfunz0hxqkfhu.gif" alt=""/>
    
<img class="prud"
src="https://habrastorage.org/webt/jo/kw/fh/jokwfh82qe5ugijblckqgdrg-kw.png" alt=""/>
 
<div class="fraza">
<img>
</div>

<div class="fraza">
<b>
</div>

<div id="test">
С днём рождения, Андрюха !<br>
Дорогой наш рыбачок,<br>
Пусть всегда, без промедления,<br>
Рыбка дёргает крючок.<br>
Чтобы ты её, родную, <br>
Не ждал полдня на берегу, <br>
А ловил её большую, <br>
В море, в речке и в пруду ! <br>
</div> 
  
  <img class="rybak" src="https://habrastorage.org/webt/-p/al/lu/-pallufhtqnl05crpsjdy2pekby.gif" alt=""/>  

<img class="polkarasya" src="https://habrastorage.org/webt/ou/dq/zb/oudqzbaulioejmvwf-pmx-vcvgq.gif" alt=""/>

<img class="dozavtra" src="https://habrastorage.org/webt/7k/1l/vj/7k1lvjypdml1sflhxrnd4cjyfos.png" alt=""/>

<div class="bsi">
   <span style="--i:1">B</span>
   <span style="--i:2">S</span>
   <span style="--i:3">I</span>     
</div>
    </div>

<audio controls class="muz">
  <source src="https://moosic.my.mail.ru/file/5a38b167bc1c86b7d83d1d1577b49ace.mp3" type="audio/ogg" />

  Your browser does not support the <code>audio</code> element.
</audio>

<div class="container_butylka">
 <img class="butylka" src="https://habrastorage.org/webt/7i/mp/vj/7impvjl59tcl9vnfcswnorizeie.png" alt=""/>
<img class="stakan_l" src="https://habrastorage.org/webt/wr/h0/jt/wrh0jtev85sz0b8kdw5sk6pqfx4.png" alt=""/>
 
<img class="stakan_p" src="https://habrastorage.org/webt/wr/h0/jt/wrh0jtev85sz0b8kdw5sk6pqfx4.png" alt=""/>


<div class="text_nadpis">
<svg
            id="svg1"
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            viewBox="0 0 170 280"
            width="300"
            height="500"
        >
            <defs>
                <path
                    id="path1"
                    d="m 119.81679,209.71055 -1.74551,1.62083 -1.99487,0.74808 -1.87019,0.12468 -1.74551,0.24936 h -1.74551 -1.87019 -1.37147 -0.74808 l -1.24679,0.24935 h -0.99743 l -1.74551,0.12468 -0.74808,-0.24936 h -0.37404 -0.87275 l -0.997435,-0.12467 h -1.246793 l -1.246793,-0.12468 -2.244228,-0.37404 -1.37147,-0.37404 h -0.748078 l -0.498716,-0.12468 -0.498718,-0.49872 -1.246791,-0.49871 -0.374039,-0.37404 -0.374038,-0.37404 -0.249357,-0.74808 v -0.87275 l 0.124677,-0.87275 0.12468,-0.87276 -0.12468,-1.24679 v -0.74808 -0.74808 l 0.12468,-0.49871 -0.12468,-0.6234 h -0.124677 v -0.37404 l 0.374036,-0.49871 0.374039,-1.24679 0.12468,-44.75987 0.249356,-16.8317 -0.498716,-0.99743 -0.249359,-0.87276 0.249359,-2.36891 0.12468,-1.74551 0.249359,-0.87275 0.249357,-1.37147 0.249359,-0.99744 0.997434,-1.62083 0.872755,-2.49358 0.623398,-1.62083 0.249356,-0.87276 0.498719,-1.49615 0.623395,-1.24679 0.374039,-0.87276 0.623395,-1.24679 0.374039,-1.24679 0.374039,-1.2468 0.623395,-0.99743 0.374039,-1.49615 0.12468,-0.6234 0.249356,-1.37147 0.872755,-0.99743 0.124679,-2.61827 V 85.405308 l 3.116983,-0.872754 1.87019,-0.24936 1.99487,0.24936 h 1.74551 0.87275 l 1.49615,0.623395 v 22.442271 l 7.10672,19.94869 1.37147,2.9923 0.49872,1.62083 v 1.24679 l 0.24936,2.49358 -0.12468,1.62084 -0.49872,0.37403 0.49872,63.58644 0.49872,0.49871 z"
                    fill="none"
                    stroke="none"
                />
            </defs>
 
            <text
                id="txt1"
                lengthAdjust="spacingAndGlyphs"
                textLength="40%"
                font-size="13"
                font-weight="bold"
         >   
                <textPath
                    id="result1"
                    method="align"
                    spacing="auto"
                    startOffset="-25%"
                    xlink:href="#path1"
                >
                    <tspan dy="-2" fill="yellow">Да наливай уже!</tspan>
                    <animate
                        id="a1"
                        dur="12s"
                        attributeName="startOffset"
                        values="-25%;119%"
                        begin="0s;a1.end+5s"
                    />
                </textPath>
            </text>
 
            <text
                id="txt1"
                lengthAdjust="spacingAndGlyphs"
                textLength="40%"
                font-size="13"
                font-weight="bold"
            >
                <textPath
                    id="result2"
                    method="align"
                    spacing="auto"
                    startOffset="-25%"
                    xlink:href="#path1"
                >
                    <tspan dy="-2" fill="yellow">Да наливай уже!</tspan>
                    <animate
                        id="a2"
                        dur="12s"
                        attributeName="startOffset"
                        values="-25%;119%"
                        begin="8.5s;a2.end+5s"
                    />
                </textPath>
            </text>
 
        </svg>
</div>

Надо как-то вариант масштабирования рыбок вставить в скрипт открытки. Всем спасибо за участие в решении моей проблемы. Что-то всё сдвинулось, а при предварительном просмотре всё было нормально. Вот ссылка для просмотре в codepen. Юбилей

БЛОГ НА HUSL

Применение эффекта масштабирования картинки в скрипте

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