Moving scroll down arrow on homepage element

[Marcel]

Hi there,

Is it possible to create a moving / fading scroll down arrow like on this page (https://wwwDOTwoordendaadDOTnl) which is pointing down to a next ID on the page?

I’m using elements within Generatepress so I guess the html-part has to go in the element-section. With my (test)website I’m able to get a Font Awesome icon in the center but not at the bottom of the element. And I would like it to fade in/out and move up/down if possible…

Is it possible with just html and css?

Thanks,
Marcel

[David]

Hi there,

give this CSS a try:

/* Move icon table container down */
.inside-page-hero table {
    position: relative;
    bottom: -100px;
}

/* Set animation on icon */
.fa-chevron-down {
    cursor: pointer;
    -webkit-animation: ca3_fade_move_down 2s ease-in-out infinite;
    animation: ca3_fade_move_down 2s ease-in-out infinite;
}

@-webkit-keyframes ca3_fade_move_down {
    0% {
        -webkit-transform: translate(0, -20px);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        -webkit-transform: translate(0, 20px);
        opacity: 0;
    }
}

@keyframes ca3_fade_move_down {
    0% {
        -webkit-transform: translate(0, -20px);
        transform: translate(0, -20px);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        -webkit-transform: translate(0, 20px);
        transform: translate(0, 20px);
        opacity: 0;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Marcel]

Wow! That’s really fast and very nice 🙂
Thanks!

[David]

Awesome – Glad to be of help!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Marcel]

Hi David,

After testing it a bit further, I have one issue: you’ve set the bottom of the table container at -100px, but with responsive / smaller screens the arrow disappears. I tried to use percentage instead but that doesn’t seem to work… I’d like the arrow to be near the bottom of the element banner no matter what the screensize is. Do you have a tip for that?

Thanks,
Marcel

[David]

You can try replacing this:

.inside-page-hero table {
    position: relative;
    bottom: -100px;
}

for:

.page-hero {
    position: relative;
}

.inside-page-hero table {
    position: absolute;
    bottom: 10px;
    left: 0;
    width: 100%;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Marcel]

Much better, thanks!

[David]

You’re welcome

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts