- This topic has 7 replies, 3 voices, and was last updated 4 years, 1 month ago by
Tom.
-
AuthorPosts
-
February 23, 2018 at 10:08 pm #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 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 #504631Tom
Lead 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 π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentFebruary 24, 2018 at 9:35 am #504638Robert
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 meThanks
February 24, 2018 at 8:26 pm #504896Tom
Lead 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.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentFebruary 25, 2018 at 4:36 am #505073Robert
Thanks for you help
February 25, 2018 at 11:43 am #505355Tom
Lead DeveloperLead DeveloperYou’re welcome π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentApril 4, 2018 at 4:38 pm #541414Manuel
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 #541534Tom
Lead DeveloperLead DeveloperThat looks good to me π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development -
AuthorPosts
- You must be logged in to reply to this topic.