[Resolved] Moving scroll down arrow on homepage element

Home Forums Support Moving scroll down arrow on homepage element

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #976024
    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

    #976037
    David
    Staff
    Customer Support

    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;
        }
    }
    #976042
    Marcel

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

    #976044
    David
    Staff
    Customer Support

    Awesome – Glad to be of help!

    #976967
    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

    #977033
    David
    Staff
    Customer Support

    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%;
    }
    #977056
    Marcel

    Much better, thanks!

    #977064
    David
    Staff
    Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.