Scroll down icon plugin?

CMS & WordPress
1

Hey folks,

I have built a site that has a video background on the homepage. It takes up basically the full screen.

However, I have been advised to add a ‘scroll down’ visual aid to the corner to tell the user to scroll down. Are there any plugins available that can do this?

1 Like
2

Hi @Zapppa,

I don’t think you need a plugin for that, if there is one at all.

If you want a clue in the viewport corner to scroll down, you can use a pseudo element on a suitable container.

Here is an example attached to the body and positioned relative the viewport. Put this in your css, or if you have a child theme css put it there.


body:before{
    display:block;
    position:absolute;
    z-index:9; /* if it's needed */
    top:100vh; /* the viewport height */
    right:0;
    margin:-7em 1em 0 0; /* adjust the position */
    border-radius:1em;
    padding:1em;
    background:rgba(0,0,0,.6);
    color:#fff;
    text-align:center;
    font:900 1.5em/1 arial, sans-serif;
    white-space:pre; /* to render the new line characters "\a" */
    content:"Scroll\a down\a\a\25bc";
}

You can try the pseudo element on any suitable container and play around to see what works.

Post again and tell what you did.

1 Like
3

@Erik_J

Thank you so much, that’s very helpful indeed! I placed it in the child theme and tweaked it slightly:

body:before{
    display:block;
    position:absolute;
    z-index:9; /* if it's needed */
    top:100vh; /* the viewport height */
    right:0;
    margin:-7em 1em 0 0; /* adjust the position */
    border-radius:1em;
    padding:1em;
    background:rgba(0,0,0,.6);
    color:#fff;
    text-align:center;
    font:900 1.2em/1 "frutiger", sans-serif;
    white-space:pre; /* to render the new line characters "\a" */
    content:"\a\a\25bc";
}

If I want to add a little transition to it, whats the best way?

Ideally I would like the little arrow to animate downwards within the little container and just loop over and over.

4

@Erik_J

Sorry, how do I only have this on the homepage of the site? Its currently on all pages :confused:

5

Find a container on that page that is unique for the site to put the pseudo element in. Maybe the video has some parent with a unique class or id, or there is a combination that is only on that page.

The absolute positioned element will refer its coordinates to a parent/ancestor container that also has position given to it, or to the html root if no parent has position.

Without any knowledge of your page I can only give a general answer. But I’m sure you’ll find a way to target only the home page. It probably doesn’t matter where the pseudo element is as long it can refer position to the viewport.

1 Like
6

Thanks @Erik_J, I have sent you a PM with the URL.

7

It’s ok if you don’t want to post the url.

I see that page has a number of classes on the body tag: <body class="home page page-id-443 page-template page-template-page-tpl_full_width page-template-page-tpl_full_width-php wpb-js-composer js-comp-ver-4.12 vc_responsive">
So you have these classes to choose:
.home
.page
.page-id-443
.page-template
.page-template-page-tpl_full_width
.page-template-page-tpl_full_width-php
.wpb-js-composer
.js-comp-ver-4.12
.vc_responsive

Pick one of those that no other page has and you have solved it. E.g:

.home:before{
    display:block;
    position:absolute;
    z-index:9; /* if it's needed */
    top:100vh; /* the viewport height */
    right:0;
    margin:-7em 1em 0 0; /* adjust the position */
    border-radius:1em;
    padding:1em;
    background:rgba(0,0,0,.6);
    color:#fff;
    text-align:center;
    font:900 1.2em/1 "frutiger", sans-serif;
    white-space:pre; /* to render the new line characters "\a" */
    content:"\a\a\25bc";
}

EDIT)
I think you could get more response if you post the link to the page.

8

Thanks very much @Erik_J, you’ve been really helpful and saved me from pulling my hair out!

:slight_smile:

9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.