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

157
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>

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

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

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

 74
backgroundColor в chart js
javascript

backgroundColor в chart js

Как сделать такой бэкграунд ?Первый раз работаю с chartjs

 89
Массив объектов, сложение по одинаковым элементам внутри
javascript

Массив объектов, сложение по одинаковым элементам внутри

имеется

 54
вызвать функцию кнопкой на клавиатуре
javascript

вызвать функцию кнопкой на клавиатуре

Работает! Хочу, чтобы при нажатии CTRL, запускалась функция playlistRefresh();

 182