Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Elementor horizontal scrolling

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #299828
    djezza
    Participant

    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?

    #299830
    djezza
    Participant
    #299854
    djezza
    Participant

    Any other idea?

    I just had a comment from a plumber…

    If someone is keen to help, I will really appreciate.

    Thank you.

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.