Creating a half-scrolling area

Design help Animations & Interactions
21

Just a new section with display set to none. My whole site is on one page. If your page isn’t scrolling where you want, make sure you are setting the correct anchor link.

22

Thank you very much, Tarylo! I tried everything, but something was not ok. Then I had enough and redesigned my site, but I will do all this again, because I can’ t figure out where is the problem. Anchor links were ok, but if I clicked on the button or the pic from where I wanted to open the site, it showed me, but not from the top of the screen. It showed from where the image was, on the middle or on the bottom of the screen, like it scrolled down from the clicked image. It didn’t push the new site on the top. From that phase I learned a lot, so I will still trying, thank you!

23

Hey Tarlyo, was just trying to find out how to do the section scrolling effect and stumbled across this old post. You don’t by any chance still have those detailed instructions you wrote or a Read-Only link?

Thanks!

24

Hi @Alec_Wren,

Sorry for the late reply. I don’t think I have my instructions anymore, but here is a read-only link.

Let me know if there’s anything else I might be able to help you out with and I’ll try my best!

25

Thanks so much! Looking at your project, I am trying to replicate it but coming unstuck at the interaction part. On your half scroll animations, you seem to be triggering elements called eg ‘section4Div_L_Bottom’ and
‘section4Div_L_Fixed’, but I can’t actually see these elements in your project/navigator anywhere?

26

Hey Tarlyo!
I love love love your website!
I managed to figure out how to create the half-scrolling-half-static website, but I’m having trouble creating my project pages now. I saw on your website that when someone clicks “learn more” on one of your projects, it doesn’t open up in a new page rather it just widens the section to expose more of the content, and then you had that content be scrollable. I was wondering 1) how did you make it so that it doesn’t open up in a new page and instead just widens the content panel? 2) how did you manage to get the project content to be scrollable? How I did my site was that I create two sections, set one section to be 50vW and fixed it to the left, then created another section that was 50vW and fixed it to the right. The obvious problem is now I can’t add section within the right (scrolling) section. How did you manage to do it?

27

Hi @daangqueenie!

Sorry for the very late reply! I haven’t worked on my site in a while, so I’m a little rusty, but I’ll try to help out as much as I can.

To answer your questions:

  1. My site is built as only one page. The function that has the section widen and reveal scrollable content is done entirely though interactions. A lot is happening there at once, so it can be a little clunky, but I liked the look and feel of it, so I went for it. I you want to see how I did it, here is a read-only link to my project.

  2. The scrollable content is also done through a series of interactions, similarly to what I described above in answer 1. I based the design of this off another post I found here in the forum. The link to that post is here. Or, you could also check out the interactions from the read-only link to my site (above).

Hopefully that helps! Sorry again for the late reply!