Making Container Visible on Scroll

I’ve tried making an interaction slide in on scroll, but it continues to populate even before you scroll. Can someone check it out and see where I’ve gone wrong.

It’s the “Section General”

It seems to be working ok to me. Maybe you’ve fixed it in the meantime since you posted this.

I’d suggest leaving all the animations etc until last. Focus on getting the content in place and style throughout the media queries first before you do anything more fancy. So maybe remove all the distracting background images to begin with and just work on the content and structures and getting those laid out how you want them. Then once all that is done, start bringing in the images and then finally work on the animations etc. So build it like a house would be a good analogy imo.

Another thing I noticed was that you were using pixels for the text line heights. I personally find EMs to be much easier for the responsive as you generally only need to set it at the top level and then it will scale on the responsive views.

Can you elaborate on pixels/EMs for text line heights. I’d like to build this page the right way. So if there is a smarter solution, I’d be all about knowing it. Thanks @mention79 for helping.

EMs work like percentages in that they are relative sizes and not a fixed pixel size, and so you only have to set it on the top level in most cases and then it will scale as you change your font size on the different media queries. So say you have a main heading and you’ve used a font size of 48px and line height of 58px. Then when you change to the tablet view this will likely be too big, so you decide to make your font size 36px, but you then also have to change your line height, as it won’t be proportional anymore. So you might work out the percentage between the two to calculate the new size. So 58/48 = 1.208333 and hence is around 20% bigger. So at the new size of 36px the new line height would be around 43px to be proportional. And then you have to do the same again on mobile landscape, and then again at mobile view. Which is annoying.

But if you set the line height to a relative measure like EM at the top level of say 1.2 EM, then you’ll probably only have to do it at the top level, and then as your change your font size at the different media queries the line height will stay the same proportional size to whatever your new font size is without you having to calculate anything.

I’d recommend giving it a try, as it means you have to do less changes in the media queries. And hence there will be less code, which although small, all helps with page load times. But generally, just making your life easier.

1 Like

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.