[Resolved] How to add a scroll indicator at the bottom of my page?

[Jonas]

Sorry, not a native speaker and I don’t know if “scroll indicator” is the right term.

I’d like to have an animated item on the bottom of my homepage to show the visitor there’s more below and make him/her scroll. I’m working with Elementor Pro.

Can anyone recommend a good way to implement that?

[Leo]

Hi there,

Are you referring to something like this? https://generatepress.com/forums/topic/pause-scrolling-with-parallax-sections/#post-492686

Elementor might have something built in as well. Best to check with them.

Let me know if this helps.

[Jonas]

Hi Leo,

I’m referring to something like the item on the bottom of this website:

https://www.kaocollins.com/inktank/

Another example, bottom right corner:

http://da-ink.com/

[Tom]

The easiest way would be to add an image element within the first section of your website.

As for your first example, they’re using this HTML:

<div class="indicator">
    <div class="mouse"></div>
</div>

And this CSS:

.indicator {
    display: block;
    position: absolute;
    color: #fff;
    left: calc(50% - 24px);
    top: calc(90% - 24px);
    width: 55px;
    height: 55px;
    border-radius: 100%;
    box-shadow: 0 0 0 5px transparent;
    background: rgba(0,0,0,.5);
    z-index: 2;
}

.mouse {
    border: 2px solid #fff;
    border-radius: 26px;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 22px;
    height: 35px;
    -webkit-backface-visibility: hidden;
    transform: translate(-50%,-50%);
}

.mouse:after {
    background-color: #fff;
    border-radius: 100%;
    content: "";
    position: absolute;
    top: 5px;
    left: 50%;
    margin-left: -2px;
    width: 4px;
    height: 4px;
    opacity: 1;
    transform: translateY(0) scaleY(1) scaleX(1) translateZ(0);
    animation: scroll 1.5s -1s cubic-bezier(.68,-.55,.265,1.55) infinite;
}

@keyframes scroll{
    10% {
        height:5px
    }
    15% {
        height:4px;
        transform:scale(1) translateY(-1px)
    }
    85% {
        transform:translateY(20px);
        opacity:0
    }
    100%{
        opacity:0
    }
}

[Don]

I’m trying to add a scroll indicator using this post, but I can’t get the animation to work. If I go to http://da-ink.com/ using Chrome, it works correctly on my Window 10 system. However, my test site fails:

https://test.jonesbrothersmarine.com/

The site does use Elementor Pro.

Any suggestions?

Thanks,
Don

[Don]

Additional info. I also created a test page that does not use Elementor. See:

https://test.jonesbrothersmarine.com/test.htm

The scroll indicator appears in the lower right corner of the footer area. Still no animation.

[Tom]

Hi there,

Give this updated CSS a shot: https://generatepress.com/forums/topic/how-to-add-a-scroll-indicator-at-the-bottom-of-my-page/#post-498607

[Don]

Thanks Tom! Adding the “@keyframes scroll” worked. I appreciate the help!

[Tom]

You’re welcome 🙂

[Don]

Tom, I’m curious… Did you figure out the missing @keyframes CSS entry using the chrome inspect tool? I’d spent several hours attempting to get automation working – comparing a site where it worked to mine. I’d read @keyframes is required by some browsers, but never noticed the @keyframes entry on the working site. I checked the https://www.kaocollins.com/inktank/ site again, and still don’t see the entry.

Thanks again,
Don

[Tom]

Hi Don,

I had to go into the stylesheet to find the @keyframes CSS, as it won’t show in developer tools, unfortunately.

[Author]

Posts