Верстка слайдера с помощью SWIPER и добавление параллакс
Верстка слайдера с помощью SWIPER и добавление параллакс анимации (HTML, CSS, JavaScript) В данном видеоуроке научимся создавать слайдер с помощью JavaScript плагина Swiper Slider. Добавим параллакс эффект для слайдов, пагинации, текста а также анимируем меню с помощью CSS. ================================ Таймкоды: 00:00 - Обзор конечного результата 01:04 - Начало урока 01:40 - Создание репозитория 04:20 - Обзор файлов верстки 06:00 - Верстка шапки 12:21 - Верстка слайдера 22:15 - Стилизация пагинации 28:25 - Добавление параллакс эффекта 31:52 - Анимация для текста 43:03 - Анимация для кнопки hamburger 49:20 - Верстка меню 53:56 - Эффект наведения для пунктов меню 58:11 - Анимация меню ================================ Материалы к уроку: https://drive.google.com/drive/folders/177_e-b85ZW8AmVQn2ToeTy99J2CwClAg Дизайн: https://www.figma.com/file/bBp2kT4RCddWKRImV6m5lV/Mountains ================================ Почта для консультации: uverstki@gmail.com
Верстка слайдера с помощью SWIPER и добавление параллакс анимации (HTML, CSS, JavaScript) В данном видеоуроке научимся создавать слайдер с помощью JavaScript плагина Swiper Slider. Добавим параллакс эффект для слайдов, пагинации, текста а также анимируем меню с помощью CSS. ================================ Таймкоды: 00:00 - Обзор конечного результата 01:04 - Начало урока 01:40 - Создание репозитория 04:20 - Обзор файлов верстки 06:00 - Верстка шапки 12:21 - Верстка слайдера 22:15 - Стилизация пагинации 28:25 - Добавление параллакс эффекта 31:52 - Анимация для текста 43:03 - Анимация для кнопки hamburger 49:20 - Верстка меню 53:56 - Эффект наведения для пунктов меню 58:11 - Анимация меню ================================ Материалы к уроку: https://drive.google.com/drive/folders/177_e-b85ZW8AmVQn2ToeTy99J2CwClAg Дизайн: https://www.figma.com/file/bBp2kT4RCddWKRImV6m5lV/Mountains ================================ Почта для консультации: uverstki@gmail.com