Как сделать более сложный слайдер?

Question

[IvanIvanIvanIvanIvan]

Написал самостоятельно слайдер
f0186535.xsph.ru/java.html

Такой вопрос, а как делаются более сложные слайды, грубо говоря переключение между слайдами происходит не просто изменением left, а там какие нибудь квадратики появляются, всякие эффекты "жалюзи" Это делается в canvas?

Например как тут (в левом углу)
ksenia-sobchak.com

Answer 1

[Василий Варюхин]

Canvas не нужен, как и скрипач.

У вас слайд это 1 div. Если разбить его на 20 div'ов, но в каждом фоном будет одна и та же картинка со смещением, можно добиться интересных эффектов.

То есть анимация будет заключаться в смене не 1 div'а, а нескольких.

Answer 2

[Exploding]

Сделайте его:
- плагином, если будете использовать в будущем.
- адаптивным
- ну и плюшки какие-нибудь полезные.
А жалюзи и квадратики... это как по мне уже порядком приелось и иногда еще и бесит: на слайде например текста много, но таймаут слайда у него 5 сек, и пофиг на hover по слайдеру, на то, что нет кнопки паузы и т.д., за то квадратики летают.
Понимаете о чем я?:)

Comments

[IvanIvanIvanIvanIvan]

Понимаю, я только не понял чем же все таки квадратики делаются. Если не плагином делать, а самому заморочиться

[Exploding]

IvanIvanIvanIvanIvan, перекрывающий сверху (по z), блок-враппер с position: absolute; в котором создаете "квадратики":
картинка на бг смещенная в background-position в зависимости от того что это за квадратик. Адаптивность этого наверно будет лучше или в vw/vh или в %, т.к. смещения должны соответствовать позиции блока и размерам его и сестринских блоков, думаю понятно... Это все в js можно сделать и на лету создавать style (тег) со всем нужным...
Анимацию в css уже... хотите - крутите, хотите - вертите эти квадратики... ну вот собственно так.

[Exploding]

IvanIvanIvanIvanIvan, Вот как пример, можно тут глянуть
https://tympanus.net/Development/ImageTransitions/...