Проект 5: Форма авторизации

CSS - 8 часть


Описание:

Эта часть содержит стили для переходов между формами входа (.sign-in) и регистрации (.sign-up).
Формы имеют анимации перехода и используют миксин signUpActive для изменения положения при активном состоянии регистрации.

Made in HTML/CSS

Проект 5: Форма авторизации

JavaScript - 1 часть

Описание:

Этот JavaScript код добавляет обработчик события click к элементу с классом .img__btn.
Когда пользователь нажимает на этот элемент, выполняется функция, которая переключает класс s--signup на элементе с классом .cont.

Made in HTML/CSS

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

HTML - 1 часть

Этот блок HTML создает контейнер с классом wrapper, который содержит несколько абзацев (<p>). Каждый абзац содержит несколько элементов <span>, каждый из которых имеет стиль с переменной --x, определяющей горизонтальное положение буквы. Эта часть html создает первый "слой" скролла.

Made in HTML/CSS

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

HTML - 2 часть

Этот блок HTML создает контейнер с классом wrapper, который содержит несколько абзацев (<p>). Каждый абзац содержит несколько элементов <span>, каждый из которых имеет стиль с переменной --x, определяющей горизонтальное положение буквы. Эта часть html создает второй "слой" скролла.

Также этот блок HTML создает контейнер с классом support-message, который отображает сообщение о том, что браузер пользователя не поддерживает анимацию scroll().

Made in HTML/CSS

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

CSS - 1 часть

Эта часть CSS определяет глобальные переменные для цветов и ширины, а также стили для элементов html и body.

Переменные используются для удобства изменения цветов и ширины в одном месте.

Made in HTML/CSS

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

CSS - 2 часть

Эта часть CSS стилизует сообщение о поддержке и скрывает его, если браузер поддерживает анимацию scroll().

Made in HTML/CSS

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