Below are some questions for a project I am working on. I have discussed some of what I am going to write with Ivo already before I became a member. I am going to explain everything again for the benefit of any future member happening on the forum that may have similar questions.

I am also experimenting on my own to find answers to my questions. Given the limited time I am given, I want to make sure I am starting on the right foot and I ask any foreseeable question in advance even if I do find my own solution.

=================================================================================
Now that I finally got to know "Royalty" and I familiarized myself with it, I wanted to post about the job of replicating the barebones structure of the website I am taking "inspiration" from.
The site is https://www.calvertimpactcapital.org/2018-impact-report

Their site is not a real site in the common understanding of the word, is an online Impact Report. It is designed to stand alone.
The site I need to build will have different colors and be built on Royalty but will be very similar.
Ours is going to be an "Annual Report, if any of you are familiar with those things. They are usually printed on glossy paper but this year my clients have decided to do an online version.

As such, it doesn't need to be a flexible website with lots of positions and room for future growth. All it has to do is to:

• Allow publishing Joomla Articles (since I'll be working with a content creator and she needs direct access to the articles, hence no template based content is preferrable, but I can work around that if necessary)
  
• Display those articles in a one page template
  
• Each article needs to have a background image (or flat color)
  
• The BG image needs to be fixed at the top.
  
• In the demo above there is an interesting "fade out" effect as each page scrolls that I will try to replicate by *cough* borrowing *cough* whatever javascript trickery they are using. For that purpose I *sucked* a copy of the page onto my local machine hoping to deconstruct how some of the features were done.
  

Question 1: OnePage Layout Styles and Sections

My first (successful) attempt at a Onepage layout used the "Joomla Article Particle" for the content because it was expedient, but Ivo had suggested I use the generous amount of layout styles in Royalty for the Onepage to work. That will allow me to assign a background image on each "page" without using complex CSS trickery as each section/style has its own background image option.
At first I wasn't sure about that, but now I see it is a wise suggestion. The only problem I see is the disconnect from each article with the layout style, since at this moment I don't have such a great idea of what the content is going to be like. I barely have some preliminary and incomplete titles for the section.
Just the naming system is going to be complex. I mean things like:

• Header
  
• Drawer
  
• Top
  
• Navigation
  
• Breadcrumb
  
• etc.
  

I am familiar with creating new sections in Gantry. Royalty hardly needs new sections, but often each section has specific visual styles that might need to be wrangled to look right. I was thinking that if I could take one of the sections and duplicate it, calling it

• Page1
  
• Page2
  
• Page3
  
• Etc.
  

Up to a number of pages that will allow me to simplify future content management. I may be wrong and I would like to know what Ivo and anyone else reading this would think.
Is there a better system I am not seeing? If I create my own section, will it have the same features as the original?
For the record, I am already testing having articles assigned to INTRO, FEATURE, SUBFEATURE, etc. And it seems to work fine. Likely making my own section would be unnecessary and overly complex, but I want to make sure the layout is as intuitive as possible and I am not missing any benefits of an alternate approach.

Question 2: Mobile Menu

Unless I am dreaming, the "onepage" menu particle has some juju to make the page scroll rather than jump to the anchored page. That prevents me from using a regular menu but creates an issue with the mobile menu.
I was thinking of adding the onepage menu particle as a megamenu submenu.
How else can I solve the issue?
Is there a more elegant way to add a particle to the mobile menu so that it functions effectively like a regular menu?


Question 3: background fadeout

EDIT: as I was writing this, I realized that this effect is done with Fancybox, a jQuery plugin. I simply traced the class of the fading element and found it in my local JS files from the captured web page. The rest consisted in reading the filename (duh!).

I'll still appreciate any help in integrating fancybox with the template. I have not used fancybox in raw format (outside of it being built in a template) before, so if there is any way to facilitate its use, I am all ears. Especially vis à vis the replicating of the original effect. I have been experimenting with what I have and I can see some serious problems on the horizon. I am not there yet, but I will be soon.
For starters, I think I'll need to add a title to each article in the style position and remove it from the article proper. That should give me the type of vertical alignment I need... It's hard to explain, but imagining I have already solved the fade out issue, I see plenty others, especially at different screen sizes.

Below is my original question.
======================================================================

I already discussed this with Ivo and I am aware that what I am asking is a bit out of bounds. I am posting it just in case someone is very familiar with the feature and can point me in the right direction without too much effort. I am not asking Ivo or anyone else to do my job for me, but all suggestions are welcome.
As mentioned above, I intend to deconstruct how the other developers did it. I think it works by having an inline transparency value affecting the solid background color that is in focus as the page scrolls. So the background image doesn't fade, rather the background color gets less transparent as the page scrolls, covering the BG image.
In developer tools one can see a value changing with the scrolls in real time. I don't think it's magic or even especially hard to replicate, but I am going to have my hands full with many other projects as I am trying to figure this one out, so I'll appreciate any help, ideas and suggestion on the topic.
=========================================================================


This is it for now. Aside from the mobile menu and integrating Fancybox properly, I think I have the rest figured out, but I am going to leave it as a question so others can benefit from any answers. I'll make sure to respond to my own questions as I solve them as well.
Going to the site (especially if I have a chance to add a couple more articles) should show the upcoming problems right away. It's going to be tricky, but not impossible I think.

By the way, thank you for insisting on Royalty as a template. It is the best in the catalog for what I need to do.