I have a series of div 250px that are scrolling horizzontaly. I want that when each div(.slide) get on 50vw get a class (.bigger) in order to incrise its width till 50vw. this website explaining what I'm trying to accomplish : https://norgram.co/
body{overflow-y: hidden;}
.slide {
width: 250px;
height: 100vh;
font-size: 50px;
font-family: roboto;
color: #e5e5e5;
text-align: right;
padding: 50px;
border-left: solid 1px #e5e5e5;
}
.bigger {
width: 50vw;
}
.wrapper {
display: flex;
flex-direction: row;
width: 200vw;
transform: rotate(90deg) translateY(-100vh);
transform-origin: top left;
}
.outer-wrapper {
width: 100vh;
height: 100vw;
transform: rotate(-90deg) translateX(-100vh);
transform-origin: top left;
overflow-y: scroll;
overflow-x: hidden;
position: absolute;
}
::-webkit-scrollbar {
display:none;
} <div class="outer-wrapper">
<div class="wrapper">
<div class="slide">1</div>
<div class="slide">2</div>
<div class="slide">3</div>
<div class="slide">4</div>
<div class="slide">5</div>
<div class="slide">6</div>
<div class="slide">7</div>
<div class="slide">8</div>
</div>
</div>