Нужно в зависимости от расположения мыши изменять скорость анимации. Пока есть 7 элементов:
<div class="main-body">
<div class="photo"></div>
<div class="photo"></div>
<div class="photo"></div>
<div class="photo"></div>
<div class="photo"></div>
<div class="photo"></div>
<div class="photo"></div>
</div>
Вот для них стили:
.main-body .photo{
width: 300px;
height: 430px;
position: absolute;
top: 10px;
left: 450px;
background: url('1.jpg');
background-size: cover;
border-radius: 15px;
display: inline-block;
transition-duration: 3s;
transition-timing-function: cubic-bezier(0, 0, 1, 1);
transform: scale(1,1);
z-index: 3;
}
.photo:nth-child(1),
.photo:nth-child(2){
z-index: 1;
left: 39px;
transform: scale(0.8, 0.8);
}
.photo:nth-child(1){z-index: 0;}
.photo:nth-child(3){
transform: scale(0.9, 0.9);
left: 234px;
z-index: 2;
}
.photo:nth-child(5){
transform: scale(0.9, 0.9);
left: 696px;
z-index: 2;
}
.photo:nth-child(6),
.photo:nth-child(7){
transform: scale(0.8, 0.8);
z-index: 1;
left: 942px;
}
.photo:nth-child(7){z-index: 0;}
С помощью JavaScript попытался изменить время анимации:
k = 1;
photo_items = document.getElementsByClassName('photo');
hidden = document.getElementById('super-hidden');
body = document.getElementsByClassName('main-body')[0];
body.onmousemove = function(event){
var tmp = event.pageX-body.getBoundingClientRect().left-body.getBoundingClientRect().width/2;
if (tmp > 0) changeTime(tmp*100);
}
hidden.addEventListener('transitionend', function() {
var tmp = document.getElementsByClassName('photo')[6].cloneNode(true);
document.getElementsByClassName('main-body')[0].appendChild(tmp);
document.getElementsByClassName('photo')[0].remove();
photo_items = document.getElementsByClassName('photo');
k++;
hidden.style.left = (10 + 10 * (k % 2 - 1)) + 'px';
});
start = function(){
var tmp = document.getElementsByClassName('photo')[6].cloneNode(true);
document.getElementsByClassName('main-body')[0].appendChild(tmp);
document.getElementsByClassName('photo')[0].remove();
photo_items = document.getElementsByClassName('photo');
hidden.style.left = (10 + 10 * (k % 2 - 1)) + 'px';
}
changeTime = function(v){
for (var i = 0; i < photo_items.length; i++)
photo_items[i].style.transitionDuration = v + 'ms';
hidden.style.transitionDuration = v + 'ms';
}
Но скорость изменяется не во время наведения, а после того, как пройдет такт анимации. Как это исправить?