Where is documentation on how to make a parallax effect with Material?

[kijosenzo]

Hello there, I was reading this thread: #4262

I became a sponsor, installed Material Insider but I'm trying to rummage for more information and documentations, can anyone point me towards more information? Thanks.

[alexvoss]

Hi, AFAIK, the documentation for Insiders is the same as for the public version. Those features of Material for Markdown that are specific to Insiders are labeled.

If you are looking for the design of the homepage as discussed in #4262, have a look in src/overrides/home.html
and src/overrides/assets/stylesheets/home/layout. The artwork is in src/overrides/asserts/images/layers. Note the licensing for this.

I have not done this myself yet but I guess you can design a homepage with a parallax effect by successively editing the Materials homepage.

[kijosenzo]

Thanks for this! It would've taken me awhile to trawl and look for these. I'll go ahead and study these pages and try to work from it backwards. Is there a formal documentation page on how to make a parallax effect with Material Insider and where to put assets and things? If not, these examples would suffice.

[alexvoss]

I don't think there is such a page but IMHO it would be a good idea to have one, or a worked example.

In some ways it falls under the "can be achieved with customization" rubric but at the same time, I bet this is a thing a lot of people spend more time on than should be necessary. I am not a CSS wizard and have not worked with SCSS before, so if I invest effort in this it will need to be because I found a personal use case.

The other thing to say, though, is that the homepage of the Materials for MkDocs documentation is probably more complex than what most people would need, with images that scroll against each other to give that lovely sense of perspective. I do wonder how much complexity would be taken out if you had just one image and "merely" needed the text arranged.

Perhaps someone has done this and could post their example in Show and Tell or just report their experiences? I will bookmark this discussion and come back to it if no one comes forward but cannot be sure about the timescales for when I can do something - it sounds like a project for the holidays.

[squidfunk]

There's currently no documentation on this, as this is nothing that is specific to Material for MkDocs. As I understand, several users just swapped out the images and copied the parallax from our landing page. It is not easy and very involved, and thus beyond the target group of this project, which are rather non-technical for the majority.

That being said, we have alternate landing page templates on our roadmap, and hope to release 1-2 in the future that are easy to customize and look great for a majority of cases.

[alexvoss]

The implementation in the Material for MkDocs documentation is quite involved. This video shows how the effect can be produced with just CSS. Note the bit about browser compatibility at the end as the implementation depends on the browser supporting animation-timeline. Support for this is currently far from universal but the implementation falls back to simply not having the parallax effect. Your choice whether you find this acceptable.

[squidfunk]

We employ a similar techique – it's all based on CSS and doesn't use JavaScript for positioning (which would feel jaggy), and doesn't use animation-timeline, so should have better browser support. Note that we needed to jump through several hoops to make it responsive. You will see it when you shrink your window. For my awesome sponsors, the source is here.