Parallax template in Materialize
Using the Materialize framework is kind of fun. It seems to have a built-in class for almost everything, so there isn't much need for attributes and extra js. I have mainly used the code I found at materializecss.com, but also picked up some hints from the components launched by CC. I'm still a novice with Materialize, but creating the parallax effect was not difficult. The top menu was actually harder.
A couple of things worth noting:
1. The parallax images have a default height of 500px. You can override this by adding an extra class to the container 'parallax-container', like I have done for the two first images here. Then you can set the height differently, more or less than 500px. You can e.g. set a smaller height on the images for small screens, and then add height for larger screens.
2. The navigation for small and large screens are divided into two different elements, so they can be styled differently. To get access to the 'mobile' menu you need to make it visible. That is done by opening the Element pane and look up the list container with the ID 'mobile-1'. Then go to the Style pane and find Effects. There you see it has been 'translated' -105% off the screen. Set that to 0, then the mobile nav will become visible. After you have done editing, don't forget to 'translate' it back again before saving.
3. The footer has been made fixed, but only from the 2nd red breakpoint upwards. For smaller screens I usually don't want a sticky footer, as it tends to take up too much space on a mobile screen.
4. I would have liked to make the header and navigation fixed for all screen sizes, but the built-in class 'navbar-fixed' doesn't work very well with the mobile menu, as it becomes overlayed and doesn't work. And likewise, setting the position to 'fixed' makes the wide menu not work. However, I found that I could use the position 'sticky' for the wide view if I also set the top to 0px and the z-index to something above the other elements. This works fine in the usual browsers, except in IE11, where you will see a 'normal' header scrolling up with the page. You may see some strange behaviour of the header here in the programme, though (that it is hanging somewhere in the middle of the page), but that doesn't happen in a browser.
A bit more:
You can add any kind of contents to the white sections. Since I have just started with Materialize, I don't have any sample contents to offer. Maybe I'll add something later.
The images are from a trip to Russia in 2015. The two first ones are from St. Petersburg, the third one from Veliky Novgorod. As usual, please replace them with your own images if you want to utilize this template. And don't forget also to remove them from the 'img' folder in the Resources, otherwise you might get a very bulky project file.
This is a template, not actually a building block. But if you want to make components, select the 'header' container for the navigation, and the 'main' container for the parallax. The footer is just a simple container, and I guess that nobody will be interested in a 'footer component' like that.
Just filling the page...
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Heading Level 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.