Hi Frank

Many thanks for looking at this for me, really appreciate the support. Thanks also to Inger for getting involved.

Unfortunately you appear to be using a version of SD not widely available for download so I am unable to open your file due to compatibility issues. I will try to work through the code on my version to see what I get.

Regards

Jeremy

Whoops. Sorry.

The brief text notes in my posts I think give all the necessary information, and, as you will see, it is very simple (like me).

Frank

Here is the same in the 3499 version. I have included the addendum notes.

Hi Jeremy
Sorry I haven't been around so much I ended up back in hospital for 4 days I picked up a serious bout of ASIAN FLU and what with my ongoing health problems entailed some observation for 24 hours,

Anyway I'm back
Here is what I have done so far

I took Franks suggestion and ran with it
1/ I made it in Site Designer "Foundation Framework" as I seem to remember thats the framework you are using
2/ I fixed the errors for the widths & heights and background images
3/ I made it as part of the header menu link
4/ I made the transitions between the changing background images on hover smoother rather than have that jerky jump.

I have placed the demo for this on the site same as the previous one

https://rsdtutorials.mawarputih.asia

If you have a mind to watch the demo, and then if you would like the step by step tutorials then complete the request by form and I shal make them so

Hi Jeremy,
A bit late, I hope the 'party' is still going full blast. Frank has created something that is working like you seem to want. I just have to convert it to the right SD version...
I have quite a bit to do these days, so I'm not sure when I have it ready. Foundation, was it?

Hi Inger

Welcome to the party! Yes it is Foundation.

Regards

Jeremy

https://www.dropbox.com/s/0rknmzmk3rtwv … n.zip?dl=0

This is Frank's file, just converted by me.
One thing I discovered as I was converting it from Frameworkless to Foundation was, that in Foundation you need to give the container named 'slide' a height. If you don't, it will collapse. For it to change in sync with the viewport and the size of the images, I had to use the height of the images as the yardstick. The images used in the example are in the aspect ratio 4x3. So, the set width of the images were 30vw, and that makes the height 22.5vw, also to be used for the height of the 'slide'.

I cannot make this into a real component since also the body tag has some properties, so above is the link to the zipped project file. Best to be saved as a template, I guess.

Hi again, Jeremy,
We have made some changes to the file I sent yesterday. We have removed the bits that we had added to the body tag and popped them into the 'whole-page' container instead. The js script is a wee bit changed. Now I can make a real component of it.
https://www.dropbox.com/s/sa2okv4hx8tl7 … onent?dl=0

Hi There
Well here is my "Demo" of the page that you are wanting to emulate,
Just a couple of points

1/ Its a video demo, to show what can be done, if you think it's going to be suitable (with a few bits of adjusting etc) then I will start the Step By Step tutorials to show how to do it.

As you know I don't do components to download, I try to show the how, and the UNDERSTANDING of the how, why and wherefores, rather that learning how to install components

The header / nav is sticky and changes background colour on user scroll (and yes Mr Boilermaker, the content is below the header at all keyframes (all 2 of them ) and dosen't get obscured by the header (that is also customisable.)

The full screen menu that is triggered by the hamburger thingy, is based on FRANKS thingy, which I ran with, did some alterations, tweeking etc, and made the transitions for swapping the images on hover a bit smoother. It is important to know that your images for this have to be chosen carefully there isn't much room for adjustments

I also know that you would like a hero slider thingy rather than just a background image,, this can be easily achieved using the "Orbit component within Site Designer (with some modifications)

The content sections further down the page also have a nice transition when they are scrolled in view, and it only happens once per page session. This isn't from Franks and Ingers (component) solution, as I couldn't get that one to adjust to different sizes and widths etc, so that is my version.

All in all not a bad effort even though I say so myself, I might even develop more pages and make it one of my website templates, at a future date

Anyways please take a look and let me know what you want to do

Take care as always

W

https://rsdtutorials.mawarputih.asia

It never fails to amaze me the amount of support available on this forum and those willing to rise to the challenge to help those in need.

Thank you Inger, Frank and W for your input, I am working through your solutions to see how I can incorporate them into the project.

Regards

Jeremy