На прошлом занятии мы создали основные стили веб страницы. Сегодня мы добавим новый элемент "полоску прокрутки", а также анимируем ее с помощью javascript. Добавление полосы прокрутки для веб страницы В структуре у нас уже есть специальный тег с селектором .scroll-bar, поэтому сразу перейдем к добавлению стилей. Полоса прокрутки будет находиться справа и посередине экрана в любой части нашей веб страницы. Реализуем это используя следующие свойства: *Что такое переменные мы рассказываем на наших курсах в школе программирования для детей КИДКОД...

Итак, сегодня мы научимся делать плавный скролл на jQuery. Демо на codepen Разметка Создаем 4 кнопки и 4 секции. <button>1</button> <button>2</button> <button>3</button> <button>4</button> <div>Секция 1</div> <div>Секция 2</div> <div>Секция 3</div> <div>Секция 4</div> Стили Создадим внутренние отступы — padding и установим серый фон для каждой второй секции для визуального разделения. .section {padding: 70px 0;}. section:nth-child(2n) {background-color: #eee;} Что получилось Интерактив В jQuery создаем событие клика на кнопку, предварительно проставив классы с префиксом js-...

Решил написать вторую часть про создание слайдера без библиотек. Для того, чтобы понимать, что здесь происходит нужно просмотреть первую часть. А еще лучше просмотреть код. Если в первая статья была для новичков, то для чтения этой части нужен более продвинутый уровень. Будет много кода. Мы будем менять и переписывать это. Также как и в прошлый раз, наливаем себе чаек☕ и начинаем. Ссылка на новую рабочую версию в конце статьи. Советую читать код по порядку. Я его разделил на этапы. Пререквизиты В предыдущей статье мы написали простой слайдер с переключением по кнопкам...