Skip to main content

Forums

Viewing 4 posts - 1 through 4 (of 4 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
    #299836
    Johny Sins
    Participant

    This reply has been reported for inappropriate content.

    Avail great help by the Plumbers in Phoenix to resolve your drainage or any other plumbing issues quickly. Get instant measures for emergency cases with us.

    #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 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.