#codepen дня

Кажется, не было в мире более вызывающей штуки для веб-разработчиков, чем легендарный Cover Flow из Apple iTunes.

Я, честно говоря, не удивлён, что появился ещё один вариант: https://codepen.io/jh3y/pen/WNRvqJP

Вдохновение штука такая.

Прокрутка, перетаскивание, управление стрелками клавиатуры — прилагаются.

#gsap #coverflow #carousel

#статья дня

Соскучились по геометрии? Да не врите, по ней невозможно не соскучиться.

Представьте такую задачу: вам надо бесконечно скроллить всего 3-5 слайдов. Причём, скроллить нативно, без дёрганий. Как обычный скролл на мобилах, в общем.

Очевидно, на ум придёт Swiper, есть у него опция freeMode, но он, во-первых монструозный, во-вторых — бесконечный режим на нём столь же бесконечно баганутый.

Я же предлагаю мыслить в 3d: расположите карусель как… как реальную карусель с задолбавшими всех лошадками. И сделайте её достаточно большой, чтобы нивелировать искажение перспективы.

Не знаете, как? Да вот так же: https://3dtransforms.desandro.com/carousel

freeMode уж сами допишете.

Острожно — геометрия! И CSS 3d-преобразования 🤪

Великолепная статья, такие в школе надо преподавать.

#css #js #carousel #3d

#инструмент дня

Нужна карусель изображений на сайт? jQuery-плагины не катят? Swiper.js чёртов огромный монстр и уже набил оскомину? Slick.js глючный? Owl не поддерживается? Нужна интеграция с React, Vue, Svelte?

Встречайте: https://splidejs.com/

Splide написан на TypeScript. Лёгкий, быстрый, куча интеграций. Десятки примеров использования сразу на главной странице. Не портит SEO страниц. Lighthouse тоже очень даже зелёный.

Нет зависимостей и поддержка от IE10.

Просто праздник какой-то.

#slider #carousel #gallery #swiper

#статья дня

Соскучились по геометрии? Да не врите, по ней невозможно не соскучиться.

Представьте такую задачу: вам надо бесконечно скроллить всего 3-5 слайдов. Причём, скроллить нативно, без дёрганий. Как обычный скролл на мобилах, в общем.

Очевидно, на ум придёт Swiper, есть у него опция freeMode, но он, во-первых монструозный, во-вторых — бесконечный режим на нём столь же бесконечно баганутый.

Я же предлагаю мыслить в 3d: расположите карусель как… как реальную карусель с задолбавшими всех лошадками. И сделайте её достаточно большой, чтобы нивелировать искажение перспективы.

Не знаете, как? Да вот так же: https://3dtransforms.desandro.com/carousel

freeMode уж сами допишете.

Острожно — геометрия! И CSS 3d-преобразования 🤪

Великолепная статья, такие в школе надо преподавать.

#css #js #carousel #3d

#инструмент дня

Нужна карусель изображений на сайт? jQuery-плагины не катят? Swiper.js чёртов огромный монстр и уже набил оскомину? Slick.js глючный? Owl не поддерживается? Нужна интеграция с React, Vue, Svelte?

Встречайте: https://splidejs.com/

Splide написан на TypeScript. Лёгкий, быстрый, куча интеграций. Десятки примеров использования сразу на главной странице. Не портит SEO страниц. Lighthouse тоже очень даже зелёный.

Нет зависимостей и поддержка от IE10.

Просто праздник какой-то.

#slider #carousel #gallery #swiper

#инструмент дня

Нужна карусель изображений на сайт? jQuery-плагины не катят? Swiper.js чёртов огромный монстр и уже набил оскомину? Slick.js глючный? Owl не поддерживается? Нужна интеграция с React, Vue, Svelte?

Встречайте: https://splidejs.com/

Splide написан на TypeScript. Лёгкий, быстрый, куча интеграций. Десятки примеров использования сразу на главной странице. Не портит SEO страниц. Lighthouse тоже очень даже зелёный.

Нет зависимостей и поддержка от IE10.

Просто праздник какой-то.

#slider #carousel #gallery #swiper #бородач

#статья дня

...ну и #инструмент дня к ней заодно.

Где-то с месяц назад в блоге Chrome появилась интересная запись, посвящённая... каруселям изображений в CSS

Которые почему-то в русскоязычном пространстве все с чьей-то подачи называют слайдерами...

И на самом деле, это не самодеятельность Chrome! Это целый новый черновик спецификации: CSS Overflow Module 5.

Из интересного:
- кнопки пред-след aka ::scroll-button
- маркеры слайдов и страниц aka ::scroll-marker
- автоматическая разбивка на страницы
- выделение активного слайда и затенение остальных

Естественно, поддерживается пока только в Chrome со 135 версии и прочих Blink-браузерах.

Но выглядит интересно! Собственно, обещанный конструктор: https://chrome.dev/carousel-configurator/

Учитывая, что карусели изображений подходят только для, хм, изображений и ни один нормальный дизайнер в здравом уме не станет запихивать в карусели важную информацию (её не увидят, это факт), внедрение этой функциональности в браузеры чтобы перестать подгружать сотни килобайт скриптов выглядит разумно.

Ну и фоллбек до обычной прилепленной прокрутки aka scroll snap никто не отменял.

Ваши мысли, котаны? Имеет смысл ждать это в Safari и Firefox?

#css #scroll #gallery #carousel