1

Сайт https://rent-auto92.ru/ Используется код:

    <script src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> <script>
$(function() {
var header1 = $('.background-slideshow');

var backgrounds = new Array(
'url(https://rent-auto92.ru/wp-content/uploads/2018/09/Car-Rental-Image-31.jpg)'
, 'url(https://rent-auto92.ru/wp-content/uploads/2018/07/dostoprimechatelnosti-yalty-lastochkino-gnezdo.jpg)'
, 'url(https://rent-auto92.ru/wp-content/uploads/2018/09/Car-Rental-Image-31.jpg)'
, 'url(https://rent-auto92.ru/wp-content/uploads/2018/07/dostoprimechatelnosti-yalty-lastochkino-gnezdo.jpg)'
);

var current = 0;

function nextBackground() {
current++;
current = current % backgrounds.length;
header1.css('background-image', backgrounds[current]);
}
setInterval(nextBackground, 1000);

header1.css('background-image', backgrounds[0]);
});

</script>

Как проще всего задать плавность анимации?

2
  • Мне кажется, или у вас вообще нет анимации. Просто смена background-image по таймеру. Commented 4 окт. 2018 в 11:29
  • Верно, речь о "плавном" переключения изображений. Commented 4 окт. 2018 в 14:40

1 ответ 1

1

background-image вобщем-то анимируется через css transition, но лучше (на мой взгляд) использовать какой-нибудь слайдер или css animation на худой конец.

var header1 = $('.background-slideshow');

var backgrounds = [
  'url(https://rent-auto92.ru/wp-content/uploads/2018/09/Car-Rental-Image-31.jpg)',
  'url(https://rent-auto92.ru/wp-content/uploads/2018/07/dostoprimechatelnosti-yalty-lastochkino-gnezdo.jpg)',
  'url(https://rent-auto92.ru/wp-content/uploads/2018/08/Ford-Focus-Hatchback.jpg)',
  'url(https://rent-auto92.ru/wp-content/uploads/2018/08/nissan-primastar.jpg)'
];

var current = 0;

function nextBackground() {
  current<backgrounds.length-1 ? current++ : current = 0;
  header1.css('background-image', backgrounds[current]);
}
setInterval(nextBackground, 1000);

header1.css('background-image', backgrounds[0]);
* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.background-slideshow {
  height: 100vh;
  background-size: cover;
  background-position: center;
  transition: background-image .5s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="background-slideshow"></div>

1
  • То есть речь лишь о задании "transition", большое спасибо, забавно, что я сам об этом не подумал. Commented 4 окт. 2018 в 14:46

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.