Black Friday Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[Resolved] Feature request – scroll down arrow option on Full Screen Page Header

Home Forums Support Feature request – scroll down arrow option on Full Screen Page Header

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #504276
    Robert

    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

    #504631
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #504638
    Robert

    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

    #504896
    Tom
    Lead Developer
    Lead Developer

    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"><!-- icon --></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.

    #505073
    Robert

    Thanks for you help

    #505355
    Tom
    Lead Developer
    Lead Developer
    #541414
    Manuel

    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;
      }
    }
    
    #541534
    Tom
    Lead Developer
    Lead Developer
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.