Как я могу получить на веб-сайте студии Wix эффект раскрытия текста?CSS

Разбираемся в CSS
Ответить
Anonymous
 Как я могу получить на веб-сайте студии Wix эффект раскрытия текста?

Сообщение Anonymous »

Здесь я использую HTML, чтобы показать эффект раскрытия текста, как на веб-сайте студии Wix https://www.wix.com/studio.
Скажите, пожалуйста, как мне добиться небольшой горизонтальной прокрутки при прокрутке раздела имеющий эффект раскрытия текста. Ниже приведен весь код.

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





Text Reveal Effect with Clip-Path

body, html {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
html{display:grid;}
body{
display:grid;
grid-area: 1 / 1 / 2 / 2;
}
section {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
height: 150vh;
display: flex;
justify-content: center;
flex-direction: column;
align-self: stretch;
justify-self: stretch;
grid-area: 1 / 1 / 2 / 2;
}

.container {
display: grid;
place-items: center;
width: 100%;
height: 100vh;
background: white;
overflow: hidden;
}

.text-container {
width: 100%;
display: grid;
justify-content: center;
align-items: center;
position: sticky;
height: 100vh;
margin: 0 0 5% 5%;
}

.text {
display: inline-block;
font-size: 100px;
font-weight: bold;
color: black;
clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
transition: clip-path 1s ease-out;
}

.reveal {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.wrapper-content {
box-sizing: border-box;
display: grid;
grid-template-rows: max-content max-content max-content auto;
grid-template-columns: minmax(0px,1852.5fr);
min-height: 0px;

height: auto;
width: 99.99976197212217%;
top: calc(var(--is-sticky) * (var(--top) + var(--sticky-offset)));

align-self: end;
justify-self: center;
position: relative;
margin-left: 0%;
margin-right: 0.0010881274414849572%;
margin-top: 0vh;
margin-bottom: 5%;
grid-area: 1/1/2/2;
}

@media (max-width: 768px) {
.text {
font-size: 40px;
}
}







Your Headline Here
Another Headline Here
This is a para
This is a para






Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusantium,
fugiat deserunt ipsum et exercitationem minus aliquam omnis iusto!
Molestiae doloremque modi aut provident? Iure dolores unde rem necessitatibus error vero!

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusantium,
fugiat deserunt ipsum et exercitationem minus aliquam omnis iusto!
Molestiae doloremque modi aut provident? Iure dolores unde rem necessitatibus error vero!

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusantium,
fugiat deserunt ipsum et exercitationem minus aliquam omnis iusto!
Molestiae doloremque modi aut provident? Iure dolores unde rem necessitatibus error vero!

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusantium,
fugiat deserunt ipsum et exercitationem minus aliquam omnis iusto!
Molestiae doloremque modi aut provident? Iure dolores unde rem necessitatibus error vero!

Lorem ipsum dolor sit, amet consectetur adipisicing elit.  Accusantium,
fugiat deserunt ipsum et exercitationem minus aliquam omnis iusto!
Molestiae doloremque modi aut provident? Iure dolores unde rem necessitatibus error vero!

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusantium,
fugiat deserunt ipsum et exercitationem minus aliquam omnis iusto!
Molestiae doloremque modi aut provident? Iure dolores unde rem necessitatibus error vero!


const text1 = document.getElementById('text1');
const text2 = document.getElementById('text2');
const textContainer = document.querySelector('.text-container');

document.addEventListener('scroll', () => {
const scrollPosition = window.scrollY;
const containerHeight = textContainer.clientHeight;

if (scrollPosition > containerHeight * 0.3) {
text1.classList.add('reveal');
} else {
text1.classList.remove('reveal');
}

if (scrollPosition > containerHeight * 0.5) {
text2.classList.add('reveal');
} else {
text2.classList.remove('reveal');
}
});
function adjustMobileView() {
if (window.innerWidth 

Подробнее здесь: [url]https://stackoverflow.com/questions/78521169/how-can-i-get-wix-studio-website-like-text-reveal-effect[/url]
Ответить

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

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

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

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

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