Dunno if I get this right,… but project arrows are for navigating between projects (as the name implies). It doens’t make much sense to use these for navigation between pages.
But you could of course do that with some custom code. I would consider this off-topic and should be discussed in another thread.
So now I get what you want to achieve. The answer might unfortunatelly be:
«No, without any code-magic you won’t be able to realize it that smooth by now»
You will always have a page reload with (the above mentioned options) since the content gets rendered on different pages. But you could have a look into isotope. As far as I understand this is the way you want it to behave.
I’m not sure if the code-examples there will work with lay since I don’t know which derivate of masonry is currently implemented in lay. But filters are not implemented into lay (yet).
I'm sure that @arminunruh is able to get you on the right track here.
First thing you need to do is create a page for each category in the categories section of lay and a page that shows all categories.
Then afaik there are two options to go about this:
A text-element that resembles the menu you want to use with every category name linked to the respective category.
Then follow the steps that Marius described above and add that text element to all the categories and the all page. You might have to add some text decoration via CSS to fake active states.
Good thing about this is you can just not add that element to pages / projects you want it to be hidden.
Create a menu with all the categories + the all page and position it as desired.
You might have to hide that menu (via CSS) in locations you don’t want it to be shown, but (contrary to option 1) the active and hover states are easily styleable through the customizer.
As soon as you added a thumbnail grid to a (category-) page it will get updated when you add a project associated with that category. I personally wouldn’t use the element grid for that.
Hope that helps!
What exactly isn’t working for you?
Is it not translating into the frontend as expected?
↳ if it’s the latter, do you have a link to inspected the faulty behaviour?
Or are you experiencing problems in the backend?
Have you tried if it works in a different more advanced browser like chrome?
Well you surely could solve that with some code.
As far as I can see the example page is completely code based with CSS animations. The left part are two simple layouts that switch at the same time as the right part is loading a new image (via jquery?) that is panning from left to right. The logo is just spinning continously.
Your given example sounds more like a video-based solution to me. The easiest way would be a video with all the desired flashing, split-screen and stuff with final cut, premiere, after effects or any toolset you feel comfortable with and then:
Place that video as background in a row (use browser height for row height) on a new page. This will ensure the video is always full screen.
Then you could make a transparent button (you can use the documentation as a starting point) and place it over the video an link that button to you work overview (or any other page you’d like)
You can make every page your front page in the customizer / front page settings:
Just use the Intro Feature in the Customizer.
But this will not trigger the Video again when you click the logo. The intro only will be shown once every time you visit the front page.
But of course a truly code based solution would be more sophisticated. If you know some CSS and know how keyframes work you could dive deep into these topics. It’s not that hard to understand, but may take some time to make things work the way you want.
Here you find some basic info about the animation properties: CSS3 Animation Properties
And here are some examples how to go about certain animations: Animations in CSS
Hope that helps.