Проект 7: Кубик с прикольной анимацией

HTML:
Здесь мы импортируем библиотеки и стили.

Этот скрипт использует importmap для определения путей к библиотекам, которые будут использоваться в проекте. Здесь задаются пути к библиотеке Three.js и её дополнениям.


Made in HTML/CSS

Проект 7: Кубик с прикольной анимацией

CSS:
Это CSS-стили для тела документа, которые убирают отступы и скрывают прокрутку.


Made in HTML/CSS

Проект 7: Кубик с прикольной анимацией

JS - 1 часть:

Здесь импортируются необходимые модули из библиотеки Three.js и её дополнений.

Это включает основную библиотеку Three.js, модули для работы с шейдерами (tsl), а также модуль для управления камерой (OrbitControls).


Made in HTML/CSS

Проект 7: Кубик с прикольной анимацией

JS - 2 часть:

Этот класс расширяет класс THREE.PostProcessing и добавляет эффект bloom (размытие) к сцене. В конструкторе создаются проходы для рендеринга сцены и применяется эффект bloom.


Made in HTML/CSS

Проект 7: Кубик с прикольной анимацией

JS - 3 часть:

Made in HTML/CSS

Проект 7: Кубик с прикольной анимацией

JS - 3 часть:

Этот класс создает объект в виде куба с источниками света. В конструкторе создается геометрия куба и материал с физическими свойствами. Также добавляются источники света, направленные в разные стороны. Метод update обновляет позицию и вращение куба.



Made in HTML/CSS

Проект 7: Кубик с прикольной анимацией

JS - 4 часть:


Этот класс создает объект в виде поверхности с отверстием. В конструкторе создается форма с отверстием и экструдируется в 3D-геометрию. Также создается материал для этой геометрии.


Made in HTML/CSS

Проект 7: Кубик с прикольной анимацией

JS - 5 часть:

Made in HTML/CSS

Проект 7: Кубик с прикольной анимацией

JS - 5 часть:


Эта часть кода инициализирует сцену, камеру и рендерер. Создаются объекты HollySurface и BoxOfLight и добавляются в сцену. Также настраиваются управление камерой и обработка событий изменения размера окна. В конце настраивается цикл анимации, который обновляет состояние объектов и рендерит сцену.


Made in HTML/CSS

Проект 8: Интерактивные карточки

HTML-создает структуру страницы:

Подробнее:

Контейнер wrapper: Содержит четыре карточки.
Карточки card: Пустые блоки, которые будут стилизованы с помощью CSS.



Made in HTML/CSS

Проект 8: Интерактивные карточки

CSS-определяет стили и поведение элементов на странице

Подробнее:

Общие стили для body: Устанавливают шрифт, фон, цвет текста, размеры и центрирование содержимого.
Стили для ссылок a: Ссылки наследуют цвет текста от родительского элемента.
Стили для контейнера wrapper: Используют flexbox для расположения карточек с зазором между ними.
Стили для карточек card: Задают размеры, скругленные углы, фон, курсор и плавный переход при изменении состояния.
Эффект наведения: При наведении на контейнер wrapper, все карточки, кроме той, на которую наведен курсор, становятся размытыми и полупрозрачными.



Made in HTML/CSS

Проект 8: Интерактивные карточки

Результат:

Made in HTML/CSS

Проект 9: Интерактивная кнопка

HTML- создает чекбокс с атрибутами:


type="checkbox": Указывает, что это чекбокс.
role="switch": Указывает, что чекбокс должен вести себя как переключатель.
class="circle": Присваивает чекбоксу класс circle, который будет использоваться для стилизации.
checked: Указывает, что чекбокс изначально отмечен.



Made in HTML/CSS

Проект 9: Интерактивная кнопка

CSS:1часть


display: grid;: Устанавливает сетку для отображения содержимого.
margin: 0;: Убирает внешние отступы.
place-items: center;: Центрирует содержимое по горизонтали и вертикали.
min-height: 100vh;: Устанавливает минимальную высоту страницы равной высоте окна браузера.
font-size: 15vmin;: Устанавливает размер шрифта относительно меньшего из ширины и высоты окна браузера.
background: #ccc;: Устанавливает серый фон.



Made in HTML/CSS

Проект 9: Интерактивная кнопка

CSS:2часть


--c: #333;: Определяет переменную для цвета.
appearance: none;: Убирает стандартное отображение чекбокса.
position: relative;: Устанавливает относительное позиционирование.
box-sizing: content-box;: Устанавливает модель расчета размеров элемента.
font-size: 1em;: Устанавливает размер шрифта.
height: 1em;: Устанавливает высоту элемента.

aspect-ratio: 2;: Устанавливает соотношение сторон элемента.
border: max(1px, 0.025em) solid var(--c);: Устанавливает границу с использованием переменной цвета.
border-radius: 1em;: Закругляет углы элемента.
background: Устанавливает сложный фон с использованием линейных градиентов и переменной цвета.
background-repeat: no-repeat;: Отключает повторение фона.
box-shadow: Добавляет тени для создания объемного эффекта.


Made in HTML/CSS

Проект 9: Интерактивная кнопка

CSS:3часть

content: "";: Создает пустой контент для псевдоэлементов.
position: absolute;: Устанавливает абсолютное позиционирование.
top: 50%; left: 0.5em; transform: translate(-50%, -50%);: Центрирует псевдоэлементы.
height: 50%; aspect-ratio: 1; border-radius: 50%;: Устанавливает размеры и закругленные углы для псевдоэлементов.
background: Устанавливает сложный фон с использованием радиальных градиентов.
box-shadow: Добавляет тени для создания объемного эффекта.



Made in HTML/CSS

Проект 9: Интерактивная кнопка

CSS:4часть

content: "";: Создает пустой контент для псевдоэлементов.
position: absolute;: Устанавливает абсолютное позиционирование.
top: 50%; left: 0.5em; transform: translate(-50%, -50%);: Центрирует псевдоэлементы.
height: 50%; aspect-ratio: 1; border-radius: 50%;: Устанавливает размеры и закругленные углы для псевдоэлементов.
background: Устанавливает сложный фон с использованием радиальных градиентов.
box-shadow: Добавляет тени для создания объемного эффекта.
transition: left 0.3s;: Добавляет плавный переход для изменения положения псевдоэлемента ::after.


Made in HTML/CSS

Проект 9: Интерактивная кнопка

CSS:5часть

left: calc(100% - 0.5em);: Перемещает псевдоэлемент ::after вправо при активации чекбокса.
opacity: 0.25;: Уменьшает прозрачность чекбокса, когда он отключен.


Made in HTML/CSS

Проект 9: Интерактивная кнопка

CSS:6часть

@media print: Устанавливает стили для печати, чтобы цвета отображались корректно.

@media (prefers-reduced-motion): Отключает анимации и переходы для пользователей, предпочитающих уменьшенное количество движений.


Made in HTML/CSS

Проект 9: Интерактивная кнопка

Результат:

Made in HTML/CSS