I’m trying to recreate this feature: https://www.gulfstream.com/ , where the logo (Gulfstream) changes into the icon as you scroll down. I have the icon in a white box that covers the main logo, which is “collapsed on load”. What code do I need to add to get this to work? Site link here: https://pauledesign.wixsite.com/airspace
You can easily do it with a onViewportEnter event handler on a selected element for example.
Or, if you haven’t got an element in the right place that you can use, you can simply use an anchor for the setpoint on your page that the logos start to switch over.
So, when this element or anchor comes into the users view the original logo will be collapsed or hidden with or without an effect option.
Then your other logo that is setup to be collapsed on load, can simply be set to be expand and appear above your existing logo, again with or without effect options.
To do the opposite, then you can simply use onViewportLeave and do the logo options in reverse, so overlaying logo collapses again and the main log os shown again.
https://www.wix.com/corvid/reference/$w.ViewportMixin.html
https://www.wix.com/corvid/reference/$w.Anchor.html
https://www.wix.com/corvid/reference/$w.CollapsedMixin.html
https://www.wix.com/corvid/reference/$w.HiddenMixin.html
https://www.wix.com/corvid/reference/$w.EffectOptions.html
https://support.wix.com/en/article/corvid-reacting-to-user-actions-using-events
thanks. I need the code to make this happen.
Code is all in the links provided.
Use the bottom one to view how to do it on a page and view the others to see the API Reference for them, with them all having code samples on them too.
This can’t be that complicated. I will wait. Thanks.