Проект 6: Прикольный scroll без JS

CSS - 3 часть

Эта часть CSS стилизует контейнер wrapper, делая его фиксированным и центрированным. Также включен медиа-запрос для адаптации на маленьких экранах.

Made in HTML/CSS

Проект 6: Прикольный scroll без JS

CSS - 4 часть

Эта часть CSS стилизует абзацы и буквы внутри контейнера wrapper. Каждый абзац имеет абсолютное позиционирование и определенную вертикальную позицию --y.

Буквы внутри абзацев также имеют абсолютное позиционирование и используют переменные --x и --y для определения их положения.

Made in HTML/CSS

Проект 6: Прикольный scroll без JS

CSS - 5 часть

Эта часть CSS стилизует индикатор, который отображается рядом с четвертой буквой первого абзаца. Индикатор состоит из двух псевдоэлементов ::before и ::after, которые анимируются.

Made in HTML/CSS

Проект 6: Прикольный scroll без JS

CSS - 6 часть

Эта часть CSS создает невидимые полосы, которые анимируются при прокрутке.

Полосы создаются с помощью псевдоэлемента ::before и анимируются с помощью ключевых кадров @keyframes reveal.

Made in HTML/CSS

Проект 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