- This topic has 3 replies, 2 voices, and was last updated 3 years, 12 months ago by .
Viewing 3 posts - 1 through 3 (of 3 total)
Viewing 3 posts - 1 through 3 (of 3 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
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?
Any other idea?
I just had a comment from a plumber…
If someone is keen to help, I will really appreciate.
Thank you.