Full screen hero with text that "sticks" to the bottom of the viewport


#1

Just thought I’d share this …

I built a full screen hero with a bouncing down arrow and text that “sticks” to the bottom of the viewport. The first part can be done in Blocs. But to get the sticky text I had to add a little bit of CSS.

Just add this code to your page:

/* hero sticky text /
#sticky {
align-self: flex-end;
margin-bottom: 80px;
}
/
hero sticky text */

Now you just have to give the row where the text container is located the ID “sticky”. The margin bottom can be set to whatever you need.

Here’s the result: https://vmedia.de/schroeder/montana.html


#2

This would be excellent as a new Block to have an area for top, centre and bottom align with % height of the Bloc.

Thanks for posting your solution.


#3

I agree, that would be awesome!


#4

I must be missing something. It simply scrolls to the next bloc here.


#5

Hey Flashman, that’s exactly what I wanted it to do :slight_smile: Our target audience is not too “internet savvy” (or at least the company owner thinks so :slight_smile: and supposedly some users will see a full screen image and not get the idea to scroll down …


#6

In that case you don’t need the CSS. The arrow can take you to the next bloc when clicked and can also be animated to bounce inside Blocs from the side panel. If you want it to stay at the bottom that should be possible using freehand margins.


#7

ah jeez … oh well, at least i learned something :slight_smile: