- This topic has 7 replies, 3 voices, and was last updated 6 years ago by Tom.
-
AuthorPosts
-
February 23, 2018 at 10:08 pm #504276Robert
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 imageArrow 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 #504631TomLead DeveloperLead DeveloperHi 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 #504638RobertThanks 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 meThanks
February 24, 2018 at 8:26 pm #504896TomLead DeveloperLead DeveloperThe 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.
February 25, 2018 at 4:36 am #505073RobertThanks for you help
February 25, 2018 at 11:43 am #505355TomLead DeveloperLead DeveloperYou’re welcome π
April 4, 2018 at 4:38 pm #541414ManuelI 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 #541534TomLead DeveloperLead DeveloperThat looks good to me π
-
AuthorPosts
- You must be logged in to reply to this topic.