Archived topic

Feature request - scroll down arrow option on Full Screen Page Header

7 replies · Started by Robert on February 23, 2018

Viewing posts 1–8 of 8

February 23, 2018 at 10:08 pm #504276

I have Full Screen Page Header image (merge with Site Header),
Content is Vertical Centred,
all looks great.

I would like a scroll down 'v' arrow button at bottom of the screen
to indicate there is more content below the full screen image

Arrow button could trigger scroll equal to the screen height, to the bottom of Full Screen image.

I think such a scroll arrow would be a neat addition to the Full Screen Page Header options.

Thanks for consideration

February 24, 2018 at 9:28 am #504631

Hi there,

Typically this can be added to the page header content super easily.

In GPP 1.6 we've introduced a smooth scroll option which will help as well :)

February 24, 2018 at 9:35 am #504638

Thanks for reply
I'm not a coder, I use GPP for my DIY website so can only use the UI, so the more check box options the better for me.
I'll try to find someone to code it for me

Thanks

February 24, 2018 at 8:26 pm #504896

The problem with bundling it with the plugin is knowing where it links to.

For example, you could add this into your page header content:

<a href="#ANCHOR-ID" class="skip-down smooth-scroll"><i class="fa fa-angle-down"></i></a>

Then you can style it with some CSS:

.skip-down {
    font-size: 25px;
}

Then you'd just replace ANCHOR-ID with the destination you want to jump to.

February 25, 2018 at 4:36 am #505073

Thanks for you help

February 25, 2018 at 11:43 am #505355

You're welcome :)

April 4, 2018 at 4:38 pm #541414

I was also looking for something like this. This is what i found:

PageHeader content:

<div class="pageheader-scrolldown"><a href="#content" class="smooth-scroll"><span></span></a></div>

custom css:

.pageheader-scrolldown a span {
  position: absolute;
  bottom: 4%;
  left: 50%;
  width: 30px;
  height: 50px;
  margin-left: -15px;
  border: 2px solid #fff;
  border-radius: 50px;
  box-sizing: border-box;
}
.pageheader-scrolldown a span::before {
  position: absolute;
  top: 10px;
  left: 50%;
  content: '';
  width: 6px;
  height: 6px;
  margin-left: -3px;
  background-color: #fff;
  border-radius: 100%;
  -webkit-animation: sdb10 2s infinite;
  animation: scrollDownButton 2s infinite;
  box-sizing: border-box;
}
@-webkit-keyframes scrollDownButton {
  0% {
    -webkit-transform: translate(0, 0);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  80% {
    -webkit-transform: translate(0, 20px);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes scrollDownButton {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  80% {
    transform: translate(0, 20px);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

April 4, 2018 at 9:25 pm #541534

That looks good to me :)

This archived topic is closed to new replies.

Start building better websites today.