Проект 11: Прикольный свайпер
CSS: 2 часть
Подробнее:
Эта часть кода стилизует основной контейнер слайдера и его обертку.
Основные стили включают:
Установка ширины и высоты контейнера слайдера.
Стилизация обертки слайдера для отображения элементов в виде flex-контейнера и центрирования их по вертикали.
Made in HTML/CSS
CSS: 2 часть
Подробнее:
Эта часть кода стилизует основной контейнер слайдера и его обертку.
Основные стили включают:
Установка ширины и высоты контейнера слайдера.
Стилизация обертки слайдера для отображения элементов в виде flex-контейнера и центрирования их по вертикали.
Made in HTML/CSS
👍4🔥2
Проект 11: Прикольный свайпер
CSS: 3 часть
Подробнее:
Эта часть кода стилизует слайды и их содержимое.
Основные стили включают:
Установка начального масштаба и анимации для слайдов.
Стилизация активного слайда, предыдущего и следующего слайдов.
Стилизация изображений внутри слайдов, включая их размеры, объектное покрытие и закругленные углы.
Made in HTML/CSS
CSS: 3 часть
Подробнее:
Эта часть кода стилизует слайды и их содержимое.
Основные стили включают:
Установка начального масштаба и анимации для слайдов.
Стилизация активного слайда, предыдущего и следующего слайдов.
Стилизация изображений внутри слайдов, включая их размеры, объектное покрытие и закругленные углы.
Made in HTML/CSS
👍6
Проект 11: Прикольный свайпер
CSS: 4 часть
Подробнее:
Эта часть кода стилизует кнопки навигации слайдера.
Основные стили включают:
Установка размеров, цвета фона и закругленных углов для кнопок.
Позиционирование кнопок "предыдущий" и "следующий".
Стилизация состояния наведения курсора на кнопки.
Стилизация псевдоэлемента ::after для отображения иконок или текста внутри кнопок.
Made in HTML/CSS
CSS: 4 часть
Подробнее:
Эта часть кода стилизует кнопки навигации слайдера.
Основные стили включают:
Установка размеров, цвета фона и закругленных углов для кнопок.
Позиционирование кнопок "предыдущий" и "следующий".
Стилизация состояния наведения курсора на кнопки.
Стилизация псевдоэлемента ::after для отображения иконок или текста внутри кнопок.
Made in HTML/CSS
🔥6👍2
Проект 11: Прикольный свайпер
CSS: 5 часть
Подробнее:
Эта часть кода сбрасывает стили для всех элементов и стилизует body.
Основные стили включают:
Сброс отступов и полей для всех элементов.
Установка box-sizing на border-box для всех элементов.
Стилизация body для центрирования контента и установки минимальной высоты и фона.
Made in HTML/CSS
CSS: 5 часть
Подробнее:
Эта часть кода сбрасывает стили для всех элементов и стилизует body.
Основные стили включают:
Сброс отступов и полей для всех элементов.
Установка box-sizing на border-box для всех элементов.
Стилизация body для центрирования контента и установки минимальной высоты и фона.
Made in HTML/CSS
🔥7
Проект 11: Прикольный свайпер
JS:
Подробнее:
Этот JavaScript-код инициализирует слайдер Swiper и добавляет функциональность для динамического расчета высоты слайдов.
Основные части включают:
Инициализация Swiper с настройками, такими как количество видимых слайдов, центрирование, бесконечный цикл и навигация.
Функция calculateHeight, которая рассчитывает высоту слайдов на основе их ширины, сохраняя пропорции 16:9.
Обработчики событий для вызова calculateHeight при загрузке страницы и изменении размера окна.
Made in HTML/CSS
JS:
Подробнее:
Этот JavaScript-код инициализирует слайдер Swiper и добавляет функциональность для динамического расчета высоты слайдов.
Основные части включают:
Инициализация Swiper с настройками, такими как количество видимых слайдов, центрирование, бесконечный цикл и навигация.
Функция calculateHeight, которая рассчитывает высоту слайдов на основе их ширины, сохраняя пропорции 16:9.
Обработчики событий для вызова calculateHeight при загрузке страницы и изменении размера окна.
Made in HTML/CSS
👍6🔥1👨💻1
Проект 12: Анимация взаимодействия со стеком
HTML
Подробнее:
Этот блок создает основной контейнер и внутренний контейнер, а также три секции парка с изображениями, заголовками, описаниями и датами.
Также этот блок создает кнопку "Show All", которая будет использоваться для отображения всех секций парка.
Made in HTML/CSS
HTML
Подробнее:
Этот блок создает основной контейнер и внутренний контейнер, а также три секции парка с изображениями, заголовками, описаниями и датами.
Также этот блок создает кнопку "Show All", которая будет использоваться для отображения всех секций парка.
Made in HTML/CSS
👍6🔥1
Проект 12: Анимация взаимодействия со стеком
CSS - 1 часть
Подробнее:
@import: Импортирует шрифт Poppins из Google Fonts.
body: Задает базовые стили для тела документа, включая отступы, шрифт и фон.
Made in HTML/CSS
CSS - 1 часть
Подробнее:
@import: Импортирует шрифт Poppins из Google Fonts.
body: Задает базовые стили для тела документа, включая отступы, шрифт и фон.
Made in HTML/CSS
👍7🔥2
Проект 12: Анимация взаимодействия со стеком
CSS - 2 часть
Подробнее:
.container: Задает стили для основного контейнера, включая его позиционирование, максимальную ширину, отступы, минимальную высоту и выравнивание.
.inner_container: Задает стили для внутреннего контейнера, включая его позиционирование, максимальную ширину, отступы, скругление углов и модель бокса.
Made in HTML/CSS
CSS - 2 часть
Подробнее:
.container: Задает стили для основного контейнера, включая его позиционирование, максимальную ширину, отступы, минимальную высоту и выравнивание.
.inner_container: Задает стили для внутреннего контейнера, включая его позиционирование, максимальную ширину, отступы, скругление углов и модель бокса.
Made in HTML/CSS
👍5🔥2
Проект 12: Анимация взаимодействия со стеком
CSS - 3 часть
Подробнее:
.park_sec: Задает стили для секций парка, включая их позиционирование, размеры, отступы, границы, скругление углов, модель бокса, выравнивание, анимации и тень.
.park_sec.active: Убирает трансформацию для активных секций.
.park_sec1, .park_sec2, .park_sec3: Задает уникальные стили для каждой секции парка, включая z-index и трансформации.
Made in HTML/CSS
CSS - 3 часть
Подробнее:
.park_sec: Задает стили для секций парка, включая их позиционирование, размеры, отступы, границы, скругление углов, модель бокса, выравнивание, анимации и тень.
.park_sec.active: Убирает трансформацию для активных секций.
.park_sec1, .park_sec2, .park_sec3: Задает уникальные стили для каждой секции парка, включая z-index и трансформации.
Made in HTML/CSS
👍6🔥2
Проект 12: Анимация взаимодействия со стеком
CSS - 4 часть
Подробнее:
.park_inside: Задает стили для внутреннего контейнера секций парка, включая его позиционирование и выравнивание.
.content_sec: Задает стили для контейнера контента, включая его позиционирование и отступы.
.img: Задает стили для изображений, включая их размеры, фон и скругление углов.
.content_sec h2: Задает стили для заголовков, включая их позиционирование, отступы, размер шрифта и жирность.
.content_sec span, .park_sec span: Задает стили для текста, включая их позиционирование, цвет и размер шрифта.
Made in HTML/CSS
CSS - 4 часть
Подробнее:
.park_inside: Задает стили для внутреннего контейнера секций парка, включая его позиционирование и выравнивание.
.content_sec: Задает стили для контейнера контента, включая его позиционирование и отступы.
.img: Задает стили для изображений, включая их размеры, фон и скругление углов.
.content_sec h2: Задает стили для заголовков, включая их позиционирование, отступы, размер шрифта и жирность.
.content_sec span, .park_sec span: Задает стили для текста, включая их позиционирование, цвет и размер шрифта.
Made in HTML/CSS
👍8🔥1👨💻1
Проект 12: Анимация взаимодействия со стеком
CSS - 5 часть
Подробнее:
.btn_grp: Задает стили для контейнера кнопки, включая его позиционирование и выравнивание.
.btn: Задает стили для кнопки, включая её позиционирование, отступы, фон, скругление углов, границы, модель бокса, тень, размер шрифта, жирность и курсор.
.btn::after: Задает стили для псевдоэлемента после кнопки, включая его позиционирование, содержимое, границы, размеры, позицию, трансформацию и анимацию.
.btn.active::after: Изменяет трансформацию и позицию псевдоэлемента для активной кнопки.
Made in HTML/CSS
CSS - 5 часть
Подробнее:
.btn_grp: Задает стили для контейнера кнопки, включая его позиционирование и выравнивание.
.btn: Задает стили для кнопки, включая её позиционирование, отступы, фон, скругление углов, границы, модель бокса, тень, размер шрифта, жирность и курсор.
.btn::after: Задает стили для псевдоэлемента после кнопки, включая его позиционирование, содержимое, границы, размеры, позицию, трансформацию и анимацию.
.btn.active::after: Изменяет трансформацию и позицию псевдоэлемента для активной кнопки.
Made in HTML/CSS
🔥7👍1
Проект 12: Анимация взаимодействия со стеком
JS
Подробнее:
Этот блок JavaScript получает элементы кнопки и секций парка, а также добавляет обработчик события для кнопки, который переключает видимость секций парка при нажатии.
Made in HTML/CSS
JS
Подробнее:
Этот блок JavaScript получает элементы кнопки и секций парка, а также добавляет обработчик события для кнопки, который переключает видимость секций парка при нажатии.
Made in HTML/CSS
🔥5👍2
Проект 13: Элемент с анимацией
HTML - 1 часть
Подробнее:
Ползунки:
durationSlider: Ползунок для управления длительностью анимации. Минимальное значение — 0.25 секунды, максимальное — 16 секунд, шаг — 0.25 секунды. Начальное значение — 3 секунды.
rowColSlider: Ползунок для управления количеством рядов и колонн в паттерне. Минимальное значение — 1, максимальное — 20, шаг — 1. Начальное значение — 8.
Отображение значений:
offsetVal: Элемент для отображения текущего значения ползунка durationSlider. Начальное значение — 3 секунды.
rowColVal: Элемент для отображения текущего значения ползунка rowColSlider. Начальное значение — 8.
Кнопка:
randCol: Кнопка для изменения цвета анимации. При нажатии вызывает функцию colorWheel, которая случайным образом изменяет цвета элементов анимации.
Made in HTML/CSS
HTML - 1 часть
Подробнее:
Ползунки:
durationSlider: Ползунок для управления длительностью анимации. Минимальное значение — 0.25 секунды, максимальное — 16 секунд, шаг — 0.25 секунды. Начальное значение — 3 секунды.
rowColSlider: Ползунок для управления количеством рядов и колонн в паттерне. Минимальное значение — 1, максимальное — 20, шаг — 1. Начальное значение — 8.
Отображение значений:
offsetVal: Элемент для отображения текущего значения ползунка durationSlider. Начальное значение — 3 секунды.
rowColVal: Элемент для отображения текущего значения ползунка rowColSlider. Начальное значение — 8.
Кнопка:
randCol: Кнопка для изменения цвета анимации. При нажатии вызывает функцию colorWheel, которая случайным образом изменяет цвета элементов анимации.
Made in HTML/CSS
🔥7
Проект 13: Элемент с анимацией
HTML - 2 часть
Подробнее:
hexy: Основной SVG элемент, содержащий паттерн и анимацию.
pattern: Паттерн с идентификатором hexagons, который повторяется по всему SVG элементу.
path: 12 путей, каждый из которых представляет собой линию, анимированную с помощью элемента animate.
animate: Элемент, который анимирует свойство stroke-dashoffset каждого пути. Каждая анимация имеет длительность 3 секунды и повторяется бесконечно с разными начальными задержками.
rect: Прямоугольник, заполненный паттерном hexagons.
Made in HTML/CSS
HTML - 2 часть
Подробнее:
hexy: Основной SVG элемент, содержащий паттерн и анимацию.
pattern: Паттерн с идентификатором hexagons, который повторяется по всему SVG элементу.
path: 12 путей, каждый из которых представляет собой линию, анимированную с помощью элемента animate.
animate: Элемент, который анимирует свойство stroke-dashoffset каждого пути. Каждая анимация имеет длительность 3 секунды и повторяется бесконечно с разными начальными задержками.
rect: Прямоугольник, заполненный паттерном hexagons.
Made in HTML/CSS
👍6🔥2
Проект 13: Элемент с анимацией
CSS - 1 часть
Подробнее:
Тело документа:
body: Устанавливает маржины на 0 и автоматическое центрирование содержимого. Фон — темно-серый цвет (#111).
SVG элемент:
noscript: Позиционируется абсолютно в центре экрана с помощью transform: translate(-50%, -50%). Максимальная ширина — 400 пикселей. Цвет обводки — белый (#fff).
Made in HTML/CSS
CSS - 1 часть
Подробнее:
Тело документа:
body: Устанавливает маржины на 0 и автоматическое центрирование содержимого. Фон — темно-серый цвет (#111).
SVG элемент:
noscript: Позиционируется абсолютно в центре экрана с помощью transform: translate(-50%, -50%). Максимальная ширина — 400 пикселей. Цвет обводки — белый (#fff).
Made in HTML/CSS
👍4🔥2
Проект 13: Элемент с анимацией
CSS - 2 часть
Подробнее:
Ползунки:
durationSlider и rowColSlider: Позиционируются абсолютно в центре экрана с помощью transform: translate(-50%). Ширина — 95% от родительского элемента, максимальная ширина — 400 пикселей. Ползунок durationSlider расположен выше (top: 10px), а rowColSlider — ниже (top: 50px).
Made in HTML/CSS
CSS - 2 часть
Подробнее:
Ползунки:
durationSlider и rowColSlider: Позиционируются абсолютно в центре экрана с помощью transform: translate(-50%). Ширина — 95% от родительского элемента, максимальная ширина — 400 пикселей. Ползунок durationSlider расположен выше (top: 10px), а rowColSlider — ниже (top: 50px).
Made in HTML/CSS
🔥5
Проект 13: Элемент с анимацией
CSS - 3 часть
Подробнее:
Отображение значений:
offsetVal и rowColVal: Позиционируются абсолютно в центре экрана с помощью transform: translate(-50%). Цвет текста — белый (#fff). Пользователь не может выделять текст (user-select: none) и взаимодействовать с элементом (pointer-events: none).
rowColVal: Расположен ниже (top: 70px).
Made in HTML/CSS
CSS - 3 часть
Подробнее:
Отображение значений:
offsetVal и rowColVal: Позиционируются абсолютно в центре экрана с помощью transform: translate(-50%). Цвет текста — белый (#fff). Пользователь не может выделять текст (user-select: none) и взаимодействовать с элементом (pointer-events: none).
rowColVal: Расположен ниже (top: 70px).
Made in HTML/CSS
👍4🔥1
Проект 13: Элемент с анимацией
CSS - 4 часть
Подробнее:
Кнопка:
randCol: Позиционируется абсолютно внизу экрана (bottom: 20px) и центрируется горизонтально (left: 50%, transform: translate(-50%)). Цвет текста — белый (#fff), фон — прозрачный (background: none), обводка — белая (border: 2px solid #fff). Внутренние отступы — 5 пикселей по вертикали и 10 пикселей по горизонтали. Шрифт — Roboto. Углы кнопки скруглены (border-radius: 5px). Курсор изменяется на указатель при наведении (cursor: pointer).
randCol:hover: При наведении на кнопку цвет обводки и текста изменяется на стальной синий (steelblue).
randCol:active: При нажатии на кнопку цвет обводки и текста изменяется на голубой (#0ff).
Made in HTML/CSS
CSS - 4 часть
Подробнее:
Кнопка:
randCol: Позиционируется абсолютно внизу экрана (bottom: 20px) и центрируется горизонтально (left: 50%, transform: translate(-50%)). Цвет текста — белый (#fff), фон — прозрачный (background: none), обводка — белая (border: 2px solid #fff). Внутренние отступы — 5 пикселей по вертикали и 10 пикселей по горизонтали. Шрифт — Roboto. Углы кнопки скруглены (border-radius: 5px). Курсор изменяется на указатель при наведении (cursor: pointer).
randCol:hover: При наведении на кнопку цвет обводки и текста изменяется на стальной синий (steelblue).
randCol:active: При нажатии на кнопку цвет обводки и текста изменяется на голубой (#0ff).
Made in HTML/CSS
👍4🔥1
Проект 13: Элемент с анимацией
JS - 1 часть
Подробнее:
Обработчик событий:
Добавляет обработчик событий input для ползунка durationSlider.
При изменении значения ползунка получает новое значение (sliderValue).
Выбирает все элементы animate внутри SVG элемента hexy.
Обновляет текст внутри элемента offsetVal на новое значение ползунка.
Для каждого элемента animate обновляет атрибут dur на новое значение ползунка.
Made in HTML/CSS
JS - 1 часть
Подробнее:
Обработчик событий:
Добавляет обработчик событий input для ползунка durationSlider.
При изменении значения ползунка получает новое значение (sliderValue).
Выбирает все элементы animate внутри SVG элемента hexy.
Обновляет текст внутри элемента offsetVal на новое значение ползунка.
Для каждого элемента animate обновляет атрибут dur на новое значение ползунка.
Made in HTML/CSS
👍3🔥1