Проект 11: Прикольный свайпер
HTML
Подробнее:
Создает слайдер с использованием библиотеки Swiper.
Внутри контейнера .swiper находится обертка .swiper-wrapper, содержащая несколько слайдов .swiper-slide, каждый из которых содержит изображение.
Также присутствуют кнопки навигации для перехода к следующему и предыдущему слайду.
Made in HTML/CSS
HTML
Подробнее:
Создает слайдер с использованием библиотеки Swiper.
Внутри контейнера .swiper находится обертка .swiper-wrapper, содержащая несколько слайдов .swiper-slide, каждый из которых содержит изображение.
Также присутствуют кнопки навигации для перехода к следующему и предыдущему слайду.
Made in HTML/CSS
🔥7
Проект 11: Прикольный свайпер
CSS: 1 часть
Подробнее:
Эта часть кода импортирует стили Swiper из CDN и использует слой base для организации стилей.
Made in HTML/CSS
CSS: 1 часть
Подробнее:
Эта часть кода импортирует стили Swiper из CDN и использует слой base для организации стилей.
Made in HTML/CSS
👍5🔥2
Проект 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