Are these effects possible? - Page 1

User 2719045 Photo


Registered User
48 posts

Hi All

I am trying to replicate a few elements of this WordPress website in SD using Foundation but have so far failed miserably:

https://www.beaverbrook.co.uk/

The first is the sticky header, not in itself a problem but what I am trying to get is the change of background/text colour as you scroll down.

Secondly when you launch the menu hovering over the different links changes the background image to the container. Is it possible to create a hover command for one element that effects another in this way?

And finally something I have been wrestling with for years using this software; as you scroll down the page the images and text slide in from the side as they come into view as you can with SD but the difference is that they then remain in place if you scroll past them. All I can get with SD is for them to revert back to their original position once they go Out of View again.

I have had a look through Ingers excellent sharing website but cannot find a solution. Apologies if any of these have already been covered on the forum but has anyone got any ideas please??

Many thanks

Jeremy
User 2699991 Photo


Registered User
4,782 posts
Online Now

The slide images transition on scroll is controllable with sone custom js and CSS, the other things are also doable with some outside help from js and CSS too what version of site designer are you on and which framework
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 2699991 Photo


Registered User
4,782 posts
Online Now

A Nony Mouse wrote:
The slide images transition on scroll is controllable with sone custom js and CSS, the other things are also doable with some outside help from js and CSS too what version of site designer are you on and which framework

oops just seen it's foundation,, no problem then,, so which version of SD do you have?
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 2719045 Photo


Registered User
48 posts

Hi A Nony Mouse

Version 5 build 3499, the latest one.

Regards

Jeremy
User 2699991 Photo


Registered User
4,782 posts
Online Now

Jeremy Woolger wrote:
Hi A Nony Mouse

Version 5 build 3499, the latest one.

Regards

Jeremy


I am just doing a demo for the first step (header change on scroll

Just so I can make it a bit more relevant are you planning to have the background for the hero section with multiple images that fade in & out (like the example thingy)or just a single image?

Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 2719045 Photo


Registered User
48 posts

Wow, really appreciate that.

Yes I am, so the sticky header will be transparent initially with the image rotator behind then change to a solid background colour as you scroll down.

Many thanks

Jeremy
User 2699991 Photo


Registered User
4,782 posts
Online Now

Jeremy Woolger wrote:
Wow, really appreciate that.

Yes I am, so the sticky header will be transparent initially with the image rotator behind then change to a solid background colour as you scroll down.

Many thanks

Jeremy


Hi Jeremy
Sorry For Delay In reply, it'sa been a really long and strange day here
anyway I have put up the first of a short demo video for changing the color of the nav thingy on scroll

https://rsdtutorials.mawarputih.asia/index.html

Now the site is still under development, and still very experimental, but it should be ok, the other thing is that the sound is a bit iffy I thinkj at least it is a bit off here but then that could be the ancient equipment I'm using at the moment, anyway it should be good enough just for the demo purposes,, there is a link yo a form requesting email details if you would like my email fill out the form and at least it will get tested :D

Should that be the sort of thing you are after (with a little bit of refining) then ley me know & will do a step by step for making it.

Take care over there stay safe & well

W
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 2719045 Photo


Registered User
48 posts

Hi W

Long time no speak, didn't recognise your new username. Thanks for the video, will take a look once I have cleared up the debris from storm Eunice just in time for storm Franklin to arrive later today. As you are well aware we are not geared up for storms of this strength in the UK so everything grinds to a halt! Rather pathetic really

Regards

Jeremy
User 379556 Photo


Registered User
1,533 posts

Regarding the second request in the first post of this thread, perhaps the very simple method in the attached project file would be of use, i.e.

1. The menu is in a container with a background image.
2. The buttons, or whatever is used for the menu, have a custom attribute set in the Element panel as follows:
Name - data-event-onmouseover
Value - this.parentElement.style.backgroundImage = "url(----.jpg)"
3. Each button of course uses a different image for the ---.jpg part.

Frank
Attachments:
User 379556 Photo


Registered User
1,533 posts

Thanks for testing, Inger.

Further to my previous post, to get back to the original background image after hovering, one adds a further attribute as follows to each button.

Name - data-event-onmouseout
Value - this.parentElement.style.backgroundImage = "url(----.jpg)"

Frank

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.