Как сделать такой слайдер?

Question

[Vladislav]

Всех приветствую, при переключение на другой год нужно показать анимацию:
сначала плавно исчезает контент слайда (заголовок, текст, изображение -
в общем все)
Затем когда станет видно фоновые цифры нужно показать анимацию цифр (по
типу счетчика) Хотя есть и второй вариант: 2019 уходит вниз (за границу
блока), затем снизу поднимается выбранный год 2020
И уже теперь появляется новый контент слайда п.с. важно чтобы все
происходило плавно, но шустро
цель сделать сайт плавным, без рывков применять простейшие анимации
появления блоков
Собственно сам слайдер
Как бы вы реализовали данную анимацию?

Comments

[Арсений Матыцин]

То, что стрелка перекрывает список с активными слайдами не смущает?

[Vladislav]

Арсений Матыцин, это не относится к слайдеру, плагин full page

[Арсений Матыцин]

Да и порядок годиков тоже так себе.

[Vladislav]

Арсений Матыцин, насколько я понял из тз, что таймлан это и есть переключатели слайдов, по типу li(лишек)

[Vladislav]

Арсений Матыцин, есть дельный совет у тебя?

[Арсений Матыцин]

Vladislav, да, так и есть. Только li это не панацея и вовсе не обязательно под ним пытаться подвязать всё, просто потому что так делают многие.

[Арсений Матыцин]

Vladislav, конечно:
1. Привести дизайн в адекватный вид.
2. Написать слайдер (использовать готовый).

По второму ты задал весьма обширный вопрос, ответ который может быть представлен в виде «лонгрида» (что меня лично херит), либо в виде готового кода (ожидай самаритянина).

[Vladislav]

Арсений Матыцин, как бы ты сделал? Какой плагин бы использовал?

[Арсений Матыцин]

Vladislav, ручками, кроме того, что я не использую готовые плагины обычно, так в данном случае еще и переписывать геморрой но будет.

[Anton Semenov]

Есть предположение что на экране уже несколько слайдеров налеплено... непонятно зачем

Самое простое взять какой либо слайдер (slick slider в примере ) и начать делать.

Год и полоски просто элементы разметки, то что квадратиками с цифрами замени на годы + графика в виде линейки, и если активный слайд, то можно сделать специальную линейку где одна палка длинее, делай как душе угодно, можно даже линейки через css сделать

[Anton Semenov]

Вот линейка на css чтоп паразить закащика! )))

[Anton Semenov]

А да, и все плавности анимация это просто transition

Пример:

-webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;

[Vladislav]

Anton Semenov, а анимацию задним цифрам года как сделать? Если слайд будет сменяться, а цифры года стоят свои у каждого слайда и при смене слайда весь контент вместе с задними цифрами уедет вбок

[Anton Semenov]

Vladislav, так вы же сами верстку сделаете, вот и делайте что бы ничего не уежало, кнопочки со слайда "go to slide" кому в примере? Вот и используйте, весь рабочий код у вас уже есть, осталось заверстать и прикрутить эти переходы к годам вместо тех цифарок.

Вам никто бесплатно не будет писать код ) Не удивлюсь что и вы это не по доброте душевной делаете