Как сделать такой слайдер с такими эффектами?

Подскажите пожалуйста, через что делать такой слайдер для сайта?

Вот, как он должен работать: Видео

Сами элементы слайдера в анимированном виде у меня есть, а вот логика переходов (эффекты) - ума не приложу.
  • Вопрос задан
  • 197 просмотров
Пригласить эксперта
Ответы на вопрос 3
sfi0zy
@sfi0zy
UI developer. Верстаю неверстаемое.
В целом в других ответах все уже описали, я лишь проголосую за разработку этого на JS, а не на CSS, т.к. часто в таких переходах будут разные кривые траектории или рандомные значения, которые было бы неплохо генерировать каждый раз заново.

Ну и простенький примерчик чего-то похожего по принципу действия:



P.S.: Но вообще-то в плане производительности было бы уместно все эти геометрические штуки рисовать на канвасе, а не делать кучу одновременных изменений CSS-свойств у элементов.
Ответ написан
profesor08
@profesor08
Кликнул надпись убралась, блок с кубиками приблизился и наклонился, потом еще приблизился и наклонился, потом совсем приблизился, и появился новый с кубиками помельче, с ним аналогично. Если надо переставить кубики под нужным углом - переставляешь.
Ответ написан
sniggering_deus
@sniggering_deus
I will live forever in the flame of your eyes.
Берем любой слайдер, например swiper, внутрь каждого слайда вставляем блок с нужным контентом, украшаем, плюс для каждого слайда проставляем какой-нибудь специальный класс или айди. При клике на первый элемент списка пагинации, появляется первый слайд в котором активируется анимация. Включение анимации например можно добавить по такой логике:

Клик по пункту списка пагинации => Добавление класса активному слайду => Анимация.

А в случае если слайдер работает по функции autoplay, делаем так:

Рассчитываем время перехода от одного слайда к другому => На основа расчётов добавляем каждому слайду включение анимации => По истечению времени удаляем анимацию с предыдущего и добавляем её к активному элементу.

Или намного проще:

Пишем условие:

Если слайд имеет активный класс, то к лежащему внутри контенту в зависимости от его класса, добавляем ещё один класс, который активирует анимацию. Далее всё тоже самое что и выше. Переключаем активный класс между активными элементами.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
02 июн. 2020, в 14:54
12000 руб./за проект
02 июн. 2020, в 14:43
20000 руб./за проект
02 июн. 2020, в 14:09
15000 руб./за проект