Один из способов сделать это с несколькими изменениями:
1) background-position, должно быть "left top", "top", "right top", "left", "center", " справа »,« внизу слева »,« внизу в центре »и« внизу справа », чтобы разделить изображения на 9 частей.
https://www.w3schools.com/cssref/pr_background-position.asp
2) Поскольку размеры исходного изображения 2400 x 1600, установите «background-size» меньшим, а затем рассчитайте, используя cal c в соответствии с меньшими размерами, скажем:
width: calc(600px / 3);
height: calc(600px / 3);
3) Установите абсолютное положение плиток.
4) Назначьте абсолютные позиции каждой плитки, используя верхнюю и левую сторону.
5) Назначьте каждую плитку с уникальными идентификаторами.
6) Используйте setInterval javascript и оператор if else, чтобы изменить абсолютные позиции элементов, используя идентификатор каждого элемента, чтобы решить, как их верхний и левый атрибуты должны изменяться со временем.
7) В примере я использую кнопку «Click Me» для выполнения скрипта, но вы можете сделать это с помощью onload или, если хотите, вызвать функцию moveElements().
<style>
/* The photo resolution: 2400 x 1600 */
.slideshow {
display: grid;
grid-template-rows: auto auto auto;
grid-template-columns: auto auto auto;
}
.tile {
background-image: url(https://unsplash.com/photos/hzgs56Ze49s/download?force=true&w=2400);
background-size: 600px 600px;
/* width: 800px;
height: 533px; */
width: calc(600px / 3);
height: calc(600px / 3);
transform: scale(0.5, 0.5);
position:absolute;
}
.piece1 {
background-position: left top;
grid-row: 1/1;
grid-column: 1/1;
top:0;
left:0;
}
.piece2 {
background-position: top;
grid-row: 1/1;
grid-column: 2/2;
top:0;
left:250;
}
.piece3 {
background-position: right top;
grid-row: 1/1;
grid-column: 3/3;
top:0;
left:500;
}
.piece4 {
background-position: left;
grid-row: 2/2;
grid-column: 1/1;
top:250;
left:0;
}
.piece5 {
background-position: center;
grid-row: 2/2;
grid-column: 2/2;
top:250;
left: 250;
}
.piece6 {
background-position: right;
grid-row: 2/2;
grid-column: 3/3;
top:250;
left:500;
}
.piece7 {
background-position: bottom left;
grid-row: 3/3;
grid-column: 1/1;
top:500;
left:0;
}
.piece8 {
background-position: bottom center;
grid-row: 3/3;
grid-column: 2/2;
top:500;
left:250;
}
.piece9 {
background-position: bottom right;
grid-row: 3/3;
grid-column: 3/3;
top:500;
left:500;
}
</style>
<p><button onclick="moveElements()">Click Me</button></p>
<div class="slideshow">
<div id="topleft" class="tile piece1"></div>
<div id="top" class="tile piece2"></div>
<div id="topright" class="tile piece3"></div>
<div id="left" class="tile piece4"></div>
<div id="center" class="tile piece5"></div>
<div id="right" class="tile piece6"></div>
<div id="bottomleft" class="tile piece7"></div>
<div id="bottomcenter" class="tile piece8"></div>
<div id="bottomright" class="tile piece9"></div>
</div>
<script>
function moveElements() {
var elem1 = document.getElementById("topleft");
var pos1 = 0;
var id1 = setInterval(frame1, 5);
function frame1() {
if (pos1 == 151) {
clearInterval(id1);
} else {
pos1++;
elem1.style.top = pos1 + "px";
elem1.style.left = pos1 + "px";
}
}
var elem2 = document.getElementById("top");
var pos2 = 0;
var id2 = setInterval(frame2, 5);
function frame2() {
if (pos2 == 151) {
clearInterval(id2);
} else {
pos2++;
elem2.style.top = pos2 + "px";
}
}
var elem3 = document.getElementById("topright");
var pos3t = 0;
var pos3l = 500;
var id3 = setInterval(frame3, 5);
function frame3() {
if (pos3t == 151) {
clearInterval(id3);
} else {
pos3t++;
pos3l--;
elem3.style.top = pos3t + "px";
elem3.style.left = pos3l + "px";
}
}
var elem4 = document.getElementById("left");
var pos4 = 0;
var id4 = setInterval(frame4, 5);
function frame4() {
if (pos4 == 151) {
clearInterval(id4);
} else {
pos4++;
elem4.style.left = pos4 + "px";
}
}
// element5, the center tile stays still
var elem6 = document.getElementById("right");
var pos6 = 500;
var id6 = setInterval(frame6, 5);
function frame6() {
if (pos6 == 349) {
clearInterval(id6);
} else {
pos6--;
elem6.style.left = pos6 + "px";
}
}
var elem7 = document.getElementById("bottomleft");
var pos7t = 500;
var pos7l = 0;
var id7 = setInterval(frame7, 5);
function frame7() {
if (pos7t == 349) {
clearInterval(id7);
} else {
pos7t--;
pos7l++;
elem7.style.top = pos7t + "px";
elem7.style.left = pos7l + "px";
}
}
var elem8 = document.getElementById("bottomcenter");
var pos8 = 500;
var id8 = setInterval(frame8, 5);
function frame8() {
if (pos8 == 349) {
clearInterval(id8);
} else {
pos8--;
elem8.style.top = pos8 + "px";
}
}
var elem9 = document.getElementById("bottomright");
var pos9 = 500;
var id9 = setInterval(frame9, 5);
function frame9() {
if (pos9 == 349) {
clearInterval(id9);
} else {
pos9--;
elem9.style.top = pos9 + "px";
elem9.style.left = pos9 + "px";
}
}
}
</script>