Как сделать эффект быстрой смены картинок за определенное время

174

15 января 2022, 17:40

Есть несколько блоков. Как при наведении сделать быстрое изменение картинок как в начальных титрах фильмах Marvel?

То есть к примеру за 5 секунд быстро, как внизу изменились картинки. В конце после 3 или 4-ой секунды уже менялись не так быстро, то есть желательно, так же как в приведенном примере только без текста.

Что нибудь такое только при наведении:

Пока у меня ничего не получилось толком.

.image { 
  width:300px; 
  height:150px; 
  border:1px solid lightblue; 
  overflow:hidden; 
} 
.image img:hover { 
webkit-transform: scale(1.20,1.20); 
-moz-transform: scale(1.20,1.20); 
transform: scale(1.20,1.20); 
  transition: all .2s; 
}

<div class="image"> 
  <img src="http://d2lzb5v10mb0lj.cloudfront.net/covers_tfaw/400/ju/jun190856.jpg"> 
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3794/10.jpg" alt=""> 
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3794/9.jpg" alt=""> 
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3794/8.jpg" alt=""> 
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3794/7.jpg" alt=""> 
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3794/6.jpg" alt=""> 
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3794/5.jpg" alt=""> 
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3794/4.jpg" alt=""> 
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3794/3.jpg" alt=""> 
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3794/2.jpg" alt=""> 
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3794/1.jpg" alt=""> 
</div>

Answer 1

Кадров конечно надо побольше) И желательно перескринить их соразмерно с блоком-родителем, чтобы быстрее загружались.

let image = document.querySelector('.image'); 
let frame = image.querySelectorAll('img'); 
let timeout = null; 
 
image.addEventListener('mouseenter', function() { 
  let time = 5; // Время перелистывания 
  let i = 0; 
 
  change(); 
 
  function change() { 
    time += 5; 
    frame[i].style.zIndex = 100; 
    if (frame[++i]) { 
      // Если существует следующая картинка - функция вызывает сама себя. 
      timeout = setTimeout(change, time); // Уже с увеличенным временем. 
    } 
  } 
}); 
 
image.addEventListener('mouseleave', function() { 
  clearTimeout(timeout); 
  for( let i = 0; i < frame.length; i++ ){ 
    frame[i].style.zIndex = 0; 
  } 
});

.image { 
  position: relative; 
  width: 300px; 
  height: 150px; 
  border: 1px solid lightblue; 
} 
 
.image img { 
  position: absolute; 
  width: 100%; 
  height: 100%; 
}

<div class="image"> 
  <img src="http://d2lzb5v10mb0lj.cloudfront.net/covers_tfaw/400/ju/jun190856.jpg"> 
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3794/10.jpg"> 
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3794/9.jpg"> 
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3794/8.jpg"> 
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3794/7.jpg"> 
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3794/6.jpg"> 
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3794/5.jpg"> 
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3794/4.jpg"> 
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3794/3.jpg"> 
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3794/2.jpg"> 
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3794/1.jpg"> 
   
  <img src="http://d2lzb5v10mb0lj.cloudfront.net/covers_tfaw/400/ju/jun190856.jpg"> 
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3794/10.jpg"> 
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3794/9.jpg"> 
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3794/8.jpg"> 
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3794/7.jpg"> 
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3794/6.jpg"> 
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3794/5.jpg"> 
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3794/4.jpg"> 
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3794/3.jpg"> 
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3794/2.jpg"> 
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3794/1.jpg"> 
   
  <img src="http://d2lzb5v10mb0lj.cloudfront.net/covers_tfaw/400/ju/jun190856.jpg"> 
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3794/10.jpg"> 
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3794/9.jpg"> 
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3794/8.jpg"> 
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3794/7.jpg"> 
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3794/6.jpg"> 
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3794/5.jpg"> 
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3794/4.jpg"> 
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3794/3.jpg"> 
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3794/2.jpg"> 
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3794/1.jpg"> 
   
  <img src="http://d2lzb5v10mb0lj.cloudfront.net/covers_tfaw/400/ju/jun190856.jpg"> 
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3794/10.jpg"> 
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3794/9.jpg"> 
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3794/8.jpg"> 
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3794/7.jpg"> 
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3794/6.jpg"> 
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3794/5.jpg"> 
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3794/4.jpg"> 
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3794/3.jpg"> 
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3794/2.jpg">   
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3794/1.jpg"> 
</div>

Answer 2

arr = [ 
  "http://d2lzb5v10mb0lj.cloudfront.net/covers_tfaw/400/ju/jun190856.jpg", 
  "https://s3-us-west-2.amazonaws.com/s.cdpn.io/3794/10.jpg", 
  "https://s3-us-west-2.amazonaws.com/s.cdpn.io/3794/9.jpg", 
  "https://s3-us-west-2.amazonaws.com/s.cdpn.io/3794/8.jpg", 
  "https://s3-us-west-2.amazonaws.com/s.cdpn.io/3794/7.jpg", 
  "https://s3-us-west-2.amazonaws.com/s.cdpn.io/3794/6.jpg", 
  "https://s3-us-west-2.amazonaws.com/s.cdpn.io/3794/5.jpg", 
  "https://s3-us-west-2.amazonaws.com/s.cdpn.io/3794/4.jpg", 
  "https://s3-us-west-2.amazonaws.com/s.cdpn.io/3794/3.jpg", 
  "https://s3-us-west-2.amazonaws.com/s.cdpn.io/3794/2.jpg", 
  "https://s3-us-west-2.amazonaws.com/s.cdpn.io/3794/1.jpg", 
]; 
 
let interval = null; 
let iteartor = 0; 
 
display(); 
 
$("#img").on("mouseenter", function() { 
  var interval = setInterval(() => { 
    display(); 
  }, 50); 
}) 
 
 
function display() { 
  $("#img").attr("src", arr[iteartor]); 
  iteartor++; 
  if (iteartor > arr.length) clearInterval(interval); 
}

.images { 
  width: 300px; 
  height: 150px; 
  border: 1px solid lightblue; 
  overflow: hidden; 
} 
 
.image img:hover { 
  webkit-transform: scale(1.20, 1.20); 
  -moz-transform: scale(1.20, 1.20); 
  transform: scale(1.20, 1.20); 
  transition: all .2s; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="images"> 
  <img id="img" height="100%" width="100%" /> 
 
</div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Аналог excel таблицы

как лучше сделать аналог excel таблицы, только в html? Например, свободное добавление строк, столбцов по аналогии, как в excelЯ так понимаю, это будет...

javascript