Всем привет. Хочу сделать плавную смену изображений при скроллинге в фиксированном элементе. То есть на странице будет только header, с изначально заданным бэкграундом. При скролле он будет меняться. Это есть. Но хочется сделать, чтобы смена была плавной.
Сразу скажу, что я не хочу использовать плагины. Моя цель - обучение, поэтому я хочу понять, как это делается, и научиться этому, чтобы в дальнейшем писать самому.
Какие есть идеи ? В slick.js есть метод cssEase, который отвечает за плавность смены изображения. То есть это как-то можно реализовать. Transition, translateZ - однозначно не подходят, как вариант - opacity. Но как его применить ? Метод animate использует интервалы, а мне нужно при скролле, чтобы каждый интервал scrollTop() имел свой background.
Так же можно было сделать несколько вложенных контейнеров с заданным бэкграундом и z-index, и в зависимости от высоты страницы убирать opacity
Не могу найти готовых скриптов. В основном натыкаюсь на слайдеры или использование метода animate().
HTML
<header></header>
CSS
header {
position: fixed;
width: 100%;
height: 100vh;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
JQ
var header = $('header');
// Чтобы изначально был задан фон
header.css({
'background' : 'url(img/1.jpg)'
});
$(window).on('scroll', function() {
var scr = $(this).scrollTop();
if (scr == 0 && scr < 700) {
header.css({
'background' : 'url(img/1.jpg)'
});
}
if (scr > 700 && scr < 1400) {
header.css({
'background' : 'url(img/2.jpg)'
});
}
if (scr > 1400) {
header.css({
'background' : 'url(img/3.jpg)'
});
}
});
Может как-то можно допилить вот это безобразие, чтобы не иметь интервала, через который изображение будет меняться самостоятельно ?
if (scr > 700 && scr < 1400) {
header.animate({
'opacity' : '0'
}, function() {
header.css({
'opacity' : '1',
'background' : 'url(img/1.jpg)'
});
});
header.animate({
'opacity' : '1'
});
}
Простой
