How to build a website which "snaps" to separate content sections...?

#1

I want to build a site which behaves like this Blocs demo site when scrolling: https://eldargezalov.com/i/templates/preview/nikola/#1

You see that it softly snaps to the 100% browser-height content-sections when scrolling.
Yes, I do also have Blocs (but haven’t used it yet). But the learning curve would be a bit too much currently, and I also want to implement Easy or Total CMS into this site.

Ok, there’s Joes “Screens” stacks-set, but I’m asking myself if there isn’t another possible solution available, since Screens hasn’t been updated for a very long time.

#2

I realise that you don’t want to move to Blocs (yet), but that Bric is a free Bric and the Template you mention is available for free AFAIK, and is great demo of how to build that site. I doubt that Screens could build that site as there is a lot going on.

1 Like
#3

You can something similar with the stacks in Foundry. I made this using them.

http://samplesites.caffeineinjection.com/loopy/#anchor1

Can’t recall the stack itself, but it’s there somewhere.

1 Like
#4

I think that is the Foundry Sections stack. Not to be confused with the BWD Sections stacks family released about 4 years ago.

1 Like
#5

Joe’s Screens suite will do that

#6

Screens is the best implementation of the Full Page JS library in my biased opinion. It has a lot more options for content and a really nice pair of built in navigation elements.

Screens also is not tied to any particular theme - in fact it has its own lightweight theme (and a Site Styles type stack) as it really makes no sense to use a framework with the Full Page library.

1 Like
#7

There’s a challenge in there. I.e. to build https://eldargezalov.com/i/templates/preview/nikola/#1

#8

There’s nothing complex there, it’s a simple setup. It’s a nice design and the videos give it motion but that’s all.

#9

Thank you all for your thoughts. Hm, so probably Foundry or Screens will be the way to go…

#10

Hi
Defligra has a free stack called Snaps stack you can try out. For some reason its takes a couple of scrolls of the mouse to get it going, might be on my end though, but it does scroll/snap to the top of each section.
http://defligra.com/layout-stacks/snaps-stack/#1

#11

Thanks @Anon. If everything else fails I’ll have a look at this stack.

#12

I have the problem, that while Joes ‘Screens’ stacks generally work fine for me (using it in Foundation), as soon as I want to add the kind of effect that an image stays in place while scrolling the page (like the image examples further down on this page: https://psychotherapie-daniel-kuhn.de) this effect doesn’t work. I tried several Parallax stacks and also @tav s Sections Pro, which work fine outside of Screens. But as soon as I drop them into a Screens page, the effect stops working.
I just want to rebuild the page from the link above, but with additional ‘snapping’ of the several content sections (like Screens does it). But there seems to be some general incompatibility with the image effect I want to have inside of Screens. Any hints for me…?

#13

I don’t think that page is a good candidate for any type of snap scroll implementation. There is just too much content in each section. Once the content (text) becomes taller than the browser height, snap scroll plugins either crop the content, have to autoscale text or revert to normal scrolling.

It seems to be that the amount of text on that page would result in normal scrolling in almost all situations.

#14

Thanks for your comment, @tav. Hm, I think you are absolutely right with what you’re saying and I’ll change that site to a “normal” scrolling site (probably with anchors / smooth scrolling)…
Best, Matthias

#15

Plus - is Daniel Kuhn the long lost son of Jurgen Klopp?

CloudApp

#16

I thought you already knew that all germans look quite the same. We’re all “Klopp-faces” here… ;-)

#17

No, I think it is more to do with the young trendy beard which seems to be international.

#18

That’s why I said that Screens wouldn’t do it (based on too many hours trying to do something similar but much simpler). That Blocs site is really nicely implemented and the content is well controlled.

#19

The FullPage plugin has a combination mode as well. I disabled it though as it never works properly - I see exactly the same weird behaviour on that Blocs page where I get things scrolling right up to the top and then right down to the bottom again in certain situations. That was the first thing I tested to see if it behaved differently and it didn’t.

1 Like
#20

Late to the party, but why would anyone want to make a site like that? Sure, other designers might look at it and go “wow”, but I’d bet most users will look at it and go… Well, nothing, they’d go nothing. They just see a website with some cars and some info, which keeps moving all over the place and so ends up being a bit annoying.

On mobile it’s OK, the moving nonsense is kept to a minimum and things are far easier to follow, but on desktop (where I suspect a tiny percentage of the viewers are) it’s just annoying.

If Tesla really has that as a website, then it just goes to show: They are all about show and fuck all else. I suspect only a real knob would buy one/drive one.

2 Likes