- This topic has 7 replies, 2 voices, and was last updated 1 year, 7 months ago by
David.
-
AuthorPosts
-
August 5, 2019 at 5:47 am #976024
Marcel
Hi there,
Is it possible to create a moving / fading scroll down arrow like on this page (https://wwwDOTwoordendaadDOTnl) which is pointing down to a next ID on the page?
I’m using elements within Generatepress so I guess the html-part has to go in the element-section. With my (test)website I’m able to get a Font Awesome icon in the center but not at the bottom of the element. And I would like it to fade in/out and move up/down if possible…
Is it possible with just html and css?
Thanks,
MarcelAugust 5, 2019 at 6:03 am #976037David
StaffCustomer SupportHi there,
give this CSS a try:
/* Move icon table container down */ .inside-page-hero table { position: relative; bottom: -100px; } /* Set animation on icon */ .fa-chevron-down { cursor: pointer; -webkit-animation: ca3_fade_move_down 2s ease-in-out infinite; animation: ca3_fade_move_down 2s ease-in-out infinite; } @-webkit-keyframes ca3_fade_move_down { 0% { -webkit-transform: translate(0, -20px); opacity: 0; } 50% { opacity: 1; } 100% { -webkit-transform: translate(0, 20px); opacity: 0; } } @keyframes ca3_fade_move_down { 0% { -webkit-transform: translate(0, -20px); transform: translate(0, -20px); opacity: 0; } 50% { opacity: 1; } 100% { -webkit-transform: translate(0, 20px); transform: translate(0, 20px); opacity: 0; } }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/August 5, 2019 at 6:07 am #976042Marcel
Wow! That’s really fast and very nice 🙂
Thanks!August 5, 2019 at 6:11 am #976044David
StaffCustomer SupportAwesome – Glad to be of help!
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/August 6, 2019 at 5:59 am #976967Marcel
Hi David,
After testing it a bit further, I have one issue: you’ve set the bottom of the table container at -100px, but with responsive / smaller screens the arrow disappears. I tried to use percentage instead but that doesn’t seem to work… I’d like the arrow to be near the bottom of the element banner no matter what the screensize is. Do you have a tip for that?
Thanks,
MarcelAugust 6, 2019 at 7:01 am #977033David
StaffCustomer SupportYou can try replacing this:
.inside-page-hero table { position: relative; bottom: -100px; }
for:
.page-hero { position: relative; } .inside-page-hero table { position: absolute; bottom: 10px; left: 0; width: 100%; }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/August 6, 2019 at 7:21 am #977056Marcel
Much better, thanks!
August 6, 2019 at 7:29 am #977064David
StaffCustomer SupportYou’re welcome
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.