Слайдер на чистом CSS без JavaScript

Подписаться 102 тыс.

Просмотров 24 тыс.

50% 1

🔥 17 ноября стартует интенсив "Современная верстка сайта"
✅ Записаться: frontendblok.com/marathons/cs...
📚 На практике научитесь использовать CSS функции: clamp(), min() и max()
ДЕМО и исходник файла SCSS:
boosty.to/annblok/posts/07288...
Видео про clamp() - • ❌ Медиа-запросы не нуж...
Таймкоды:
00:00 Вступление
00:13 Обзор разметки
01:32 Общие стили
07:00 Работа с clamp()
08:26 Интенсив по современной вёрстке
09:01 Работа с clamp()
13:33 Работа с анимацией
17:22 Как считать автоматически?
17:41 Работа с анимацией
🔵 Telegram - t.me/frontendblok
🔵 Чат Telegram - t.me/frontendblokchat
🔵 Instagram - / annblok
🔵 TikTok - / annblok_webdev
🔵 Дзен - zen.yandex.ru/annblok
🔵 ВК - tpverstak
🔴 Обучение - frontendblok.com
#css #javascript #frontend

Развлечения

Опубликовано:

1 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 71

@golikroma 6 месяцев назад

Нравится, что вы помимо теории ещё и всё демонстрируете на деле, то есть на практике! Так проще понять.

@viksavcen17 6 месяцев назад

Невероятно крутой способ создания слайдера без JavaScript. Просто мастер-класс.

@user-olena_shatun 6 месяцев назад

Анна, спасибо большое за то что делитесь своим опытом и знаниями

@user-gq4lg1fq9u 6 месяцев назад

Спасибо, что делитесь такими уроками

@JRs_Owners 6 месяцев назад

С вами почти любой урок простой, подробно всё объясняете, кратко. Благодарю

@user-li1nf3xs5n 6 месяцев назад

Огромная благодарность автору за подбор материала.

@farmlingarchontas2216 6 месяцев назад

Объяснения занимают время. Хотя ничего слишком сложного нет. Большое спасибо. Лайк!

@user-yv4kl4ik1j 6 месяцев назад

Понятный, грамотный урок специалиста. Спасибо.

@Svet__alya 6 месяцев назад

Вы отличный специалист! Учусь смотря на то как вы делаете и сама набираюсь опыта😊

@yarosad21 6 месяцев назад

Спасибо за подробное объяснение каждого шага. Теперь могу сделать свой слайдер без проблем.

@Svetlana7777ok 6 месяцев назад

спасибо, что раскрываете нам такие сложные технические моменты

@beautifulnature8259 6 месяцев назад

Отличный понятный доходчивый урок. Тема востребованная. Многим будет интересно

@sergeymickolaenko1161 6 месяцев назад

Очень полезное видео, как раз то что искал👍💯

@takyehossain2359 6 месяцев назад

это действительно полезный информационный видеоконтент, мне очень нравится это видео

@tetyana5295 6 месяцев назад

спасибо за ваши объяснения сложных технических моментов

@user-pj9bq9zd7p 6 месяцев назад

Очень полезное, информативное видео.

@user-wy4zl9ue4u 6 месяцев назад

Спасибо за такой подробный урок, с вами заниматься легко и удобно, всё объясняете в доступной форме и даёте дельные советы.

@lemontea330 2 месяца назад

ОБАЛДЕТЬ какая красота. это шикарно, я в шоке )))))

@anamulanam5866 6 месяцев назад

Видео очень классное, хочу больше таких видео. И это видео должен посмотреть каждый

@user-fy7ot8eh5h 2 месяца назад

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

@user-tw6vr3tu5r 6 месяцев назад

Качественный обзор, сразу видно настоящий профессионал своего дела

@denisbo515 6 месяцев назад

Спасибо за уделенное внимание деталям. Теперь у меня есть крутой слайдер без JavaScript.

@CityGorsk 6 месяцев назад

Вы очень приятная девушка, с вами любой урок становится простым, вы подробно, но в то же время кратко и информативно объясняете.

@sashabest1479 6 месяцев назад

Довольно дельные советы и неплохая методика, нужно будет протестировать такой способ, думаю все должно получиться.

@user-gq9bh3si4y 6 месяцев назад

Очень интересное и полезное видео. Хорошо объяснила мне понравилось вы молодец

@ivanovna9434 6 месяцев назад

Очень полезный навык для работы фрилансера спасибо за объяснение

@sencykand02 6 месяцев назад

Замечательный способ создания слайдера без использования JavaScript. Великолепный урок.

@mark19944 6 месяцев назад

Всегда интересно узнать о очередных новинках и быть в курсе событий

@LostInspector 6 месяцев назад

Спасибо за урок. Очень помогли, не хотелось подключать сторонние плагины.

@dimlivelong 6 месяцев назад

Не знаю как слайдеры, но видосики девченка создавать отлично умеет, и тема, и картинка кликбейт, и ваще 😊 иногда что-то новенькое даже узнать можно СПАСИБО ❤

@dembelsky 6 месяцев назад

А вот работа с анимацией мне показалась весьма интересной!

@andreylagno2372 6 месяцев назад

такой контент вижу впервые в ютубе в ролике

@user-nj9yu4dd8p 6 месяцев назад

Спасибо!

@pavel7930 6 месяцев назад

Крутяк!

@user-om4bj3zr7k 6 месяцев назад

Ты такая приятная девушка, с тобой любое занятие становится легким - ты разъясняешь все детально, но при этом кратко и информативно. Слайдеры на CSS обладают определенными преимуществами перед слайдерами на Javascript. Одно из них - это скорость загрузки.

@robereds245 6 месяцев назад

не просто новичку изучать язык уже понял на себе)

@15_oniks_49 6 месяцев назад

Пиар менеджер функции clamp 😘❤️

@annblok_webdev 6 месяцев назад

Амбассадорство вышло на новый уровень

@Slavaver 6 месяцев назад

Видимо следующий шаг это использовать еще и Scroll-driven Animations )

@maxsmirnov9501 6 месяцев назад

А как можно стопнуть анимацию по какому нибудь пользовательскому событию, например вводу мыши? Вряд-ли будет достаточно убрать animation, всё скакнет к исходной точке. Но если доработать этот момент, то супер.

@alexCompany 6 месяцев назад

Прикольно, создай видео пожалуйста про новый GPTs

@user-hs7im8su7g 6 месяцев назад

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

@yurok1991 6 месяцев назад

сохраню себе, уже есть идеи, где это применить

@kopchik1000 6 месяцев назад

Анна вот если честно то я понимаю лишь 10 часть того что вы говорите но все равно почему то слушаю)))

@Alex_Presli 6 месяцев назад

Так если блоки имеют значение 500 пикселей, это как раз таки означает то, что VW зависит от ширины экрана. Верно.

@StarkRealityy 6 месяцев назад

Посмотрел видео, сам учу фронт недавно и пропала мотивация как то)) Ниху@ не понятно, но очень интересно! Ана вы прекрасны, как вы с этими функциями так ловко, видно руку мастера!!

@annblok_webdev 6 месяцев назад

Почему пропала мотивация?

@MrTAZAQ 6 месяцев назад

Если Ты учишь "фронт", то тебе это никак не поможет, это из разряда троллейбуса из буханки хлема, сделать можно, но пользы мало

@StarkRealityy 6 месяцев назад

@@annblok_webdev не воспринимай в серьёз, просто я за 6 месяцев неторопливой учёбы думал что я почти гуру, а тут ты, со своим замечательным контентом, который каааак опустил меня на землю! Но я рациональный молодой человек и это была шутка! На самом деле твой контент мотивирует продолжать учиться и не сдаваться, что бы стать таким же крутым как ты ❤

@KlaudGortsev 6 месяцев назад

@@MrTAZAQ А что тогда нужно учить?

@maksimmaksim1636 6 месяцев назад

@@annblok_webdev а расширение в VS коде - LiveShare часто кто-то использует при совместной работе над проектом ?

@md.sazzad 6 месяцев назад

nice vedio 🙂

@smotritelyoutube 6 месяцев назад

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

@annblok_webdev 6 месяцев назад

Если не требуется управление кнопками и у пользователя не будет причин специально прокручивать этот слайдер, то вполне. Например, если это какой-то декоративный элемент, демонстрирующий фото для портфолио.

@II-hs9qm 6 месяцев назад

Well, for general development, it'll do. But how practical it is and who will use it for sliders, I think no one).

@user-xc2yu7ib3r 6 месяцев назад

Недостаточно знать только HTML и CSS,чтобы создать сайт,он получится статичным.

@AniMag59 Месяц назад

Интересный пример и реализация. Однако явно для слайдера такое использовать нельзя. Как минимум для слайдера с контентом особенно кликабельным. Как визуальное украшение это отличное решение

@user-qh9yz2ro7r 6 месяцев назад

У меня вопрос. Зачем все это? Простой js и все. Ничего проще же нет

@podlblj 6 месяцев назад

Вот и стоило оно того?)) JS-ом вообще не проблема же

@cooperanderson8651 6 месяцев назад

Слайдер на чистом css - это же ненужно будет подключать сторонние дополнения. Я считаю, что это прогресс. Теперь одним дополнением будет в проекте меньше.

@user-sb5dv5pe8k 6 месяцев назад

Интересно было посмотреть...но, к сожалению, для того, чтобы понять и принять все, мне нужен не один урок. Это больше молодым...😢

@Atractiondj 6 месяцев назад

Это не вертикальный слайдер, а вертикальная анимация карточек... где функционал переключения слайдов по нажатию? Где остановка прокрутки при наведении? Где прогресс бар для слайдов?