Как создать подобный свиток?CSS

Разбираемся в CSS
Ответить
Anonymous
 Как создать подобный свиток?

Сообщение Anonymous »

Я пытаюсь создать подобную прокрутку, подобную этой.
Теперь я создал структуру в реакции, но я не могу представить левую сторону прокрутки, когда правая сторона липкая без используя любую библиотеку.

Код: Выделить всё

.project-section {
height: 400vh;
position: relative;
background-color: lightcoral;
}

.project-heading {
display: flex;
background-color: lightblue;
font-size: var(--font-size-heading);
}

.project-heading-text {
font-family: Campton-Font-Bold;
font-size: var(--font-size-heading);
}

.project-header {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: flex-start;
width: 100%;
height: 300vh;
background-color: lightsalmon;
}

.project-container-text {
display: flex;
flex-direction: column;
width: 50%;
justify-content: center; /* or space-around */
align-items: center; /* Ensure this has a value, like 'center' */
height: 300vh;
border: 1px solid blue;
}

.project-text {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
border: 1px solid yellow;
}

.project-container-images {
display: flex;
flex-direction: column;
justify-content: flex-start;
width: 50%;
height: 300vh;
border: 1px solid green;
top: 0;
bottom: 0;
z-index: 1000;
position: relative;
}

.project-image {
display: flex;
justify-content: center;
align-content: center;
width: 100%;
height: 100vh;
border: 1px solid black;
flex-wrap: wrap;
}

Код: Выделить всё


ProjectsText 1Text 2Text 3image1


Функциональность:
  • Заголовок проекта должен располагаться сверху.
  • Правая сторона также должна располагаться сверху.
  • Левая сторона должна иметь возможность для прокрутки, и текст 1, текст 2 и текст 3 должны появляться один за другим, а остальная часть должна быть прикреплена.
Бонусный вопрос: как указано в ссылке выше, для справки, дайте мне знать, как работать с прокруткой стека изображений?
PS: не могу предоставить репозиторий GitHub, поскольку это частный проект.
Примечание. Я использую его в проекте act.js.

Подробнее здесь: https://stackoverflow.com/questions/791 ... ar-to-this
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «CSS»