I would like to have an idea about how I can create animated horizontal scrolling using elementor WordPress plugin.
This is the link of the dev version. Click here
I have added this code to the page to enable the horizontal scrolling. Now I’m a bit stuck I would like to get the scroll by sections and not a normal scroll.
.elementor-inner{
width:100vh;
height:100vw;
overflow-x:hidden;
overflow-y: scroll;
transform: rotate(-90deg) translateX(-100vh);
transform-origin: top left;
position:absolute;
scrollbar-width:none;
-ms-overflow-style:none;
/* We set the scroll snapping /
scroll-snap-type: x mandatory;
/ Necessary for mobile scrolling /
-webkit-overflow-scrolling: touch;
/ For layout purposes /
display: flex;
/ To allow horizontal scrolling */
overflow-x: scroll;
}
.elementor-section-wrap{
transform: rotate(90deg) translateY(-100vh);
transform-origin: top left;
display:flex;
flex-direction: row;
width: 300vw;
}
.section{ width:100vw; height:10vh;
scroll-snap-align: start;
}
::-webkit-scrollbar{
display:none
}
Is it possible to do this with CSS3 only, or do I have to integrate some JavaScript?
.
