Ваша Всратость
На работе идет перекапывание одного сайта. Большого, развесистого и по причине давности создания безнадежно потерявшего даже намек на структуру. Одна из частей этого процесса - это переход на новый дизайн. И в этом переходе оказалась одна маленькая, но достаточно болезненная часть - нужно было простой слайдер, показывающий картинки или на автомате, или при нажатии кнопочки.
Но поскольку нет ничего изменчивее требований заказчега, то теперь слайдер должен не только перематывать картинки, но и выводить связанный с картинками текст промо-акцыи, зачастую сопровождаемый разными дополнительными кнопочками.
И конечно же, при смене слайда текст не должен двигацо, а сама картинка должна сменяться плавно, как кадр в диафильме.
Ну если быть кратким - стандартные слайдеры здесь не сработают, надо писать с нуля. Сначала мне было видение, итогом которого стал простенький слайдер (класс с методами, которые слайдер в DOM-дерево монтируют, сгружают инфу о картинках и затем запускают кино, где-то час на код и час на отладку)
Потом мне напомнили, что перемотка должна быть плавной, так что йа вспомнила набор наиболее ментально близких методик и сосредоточилась на web Animation API. Простая, красивая, минималистичная штука, синтаксически очень близкая к родным CSS-анимациям через кейфреймы.
А нехуй! Потому что этот всратый web Animation пока поддерживаецо только самыми свежими сортами Хрома и Фокса, а прочие браузеры признаются, что у них лапки, а лапками рисовать анимацию ну никак. Так что почти весь день уже на переписывание простенькой на первой взгляд приблуды так, чтобы ее понимали даже альтернативно-одаренные браузеры типа IE (если чо, то это ректальное удаление гланд выполнялось через css-transition)
Отсюда выводы.
Но поскольку нет ничего изменчивее требований заказчега, то теперь слайдер должен не только перематывать картинки, но и выводить связанный с картинками текст промо-акцыи, зачастую сопровождаемый разными дополнительными кнопочками.
И конечно же, при смене слайда текст не должен двигацо, а сама картинка должна сменяться плавно, как кадр в диафильме.
Ну если быть кратким - стандартные слайдеры здесь не сработают, надо писать с нуля. Сначала мне было видение, итогом которого стал простенький слайдер (класс с методами, которые слайдер в DOM-дерево монтируют, сгружают инфу о картинках и затем запускают кино, где-то час на код и час на отладку)
Потом мне напомнили, что перемотка должна быть плавной, так что йа вспомнила набор наиболее ментально близких методик и сосредоточилась на web Animation API. Простая, красивая, минималистичная штука, синтаксически очень близкая к родным CSS-анимациям через кейфреймы.
А нехуй! Потому что этот всратый web Animation пока поддерживаецо только самыми свежими сортами Хрома и Фокса, а прочие браузеры признаются, что у них лапки, а лапками рисовать анимацию ну никак. Так что почти весь день уже на переписывание простенькой на первой взгляд приблуды так, чтобы ее понимали даже альтернативно-одаренные браузеры типа IE (если чо, то это ректальное удаление гланд выполнялось через css-transition)
Отсюда выводы.
- Перед тем, как рваццо
пополам/в бой/кодить, нужно вытащить все возможные требования из лица, за облик разрабатываемого сайта, отвечающего. - Есть много прикольных фичей в современном коде. Для JS это лаконичный и гибкий синтаксис ES6, система фетчей, избавляющая нас от мутной возни с XHR ну и еще много чего. Но прежде, чем все это засовывать в код, лучше подумать, а на каком браузере заказчик хочет все запускать. Потому что не перевелись еще ценители
изысканных удовольствийIE8 - Как следствие из п.6 - если используемая технология слишком уж новая, то в MDN стоит посмотреть, как ее поддерживают, а также зайти на CANIUSE