Does anybody have a working example of a box that has vertical scrolling motion that starts above the page and moves down as you scroll down and then is stuck to the top of the page?
That is, the box is not visible on page load, then as you scroll, it appears to grow to a certain height, then is stuck to the top of the page the rest of the way.
Thanks!
@ironsightdesign, one of my Flamin’ Fig templates I have created has that animation you are asking about. You can check it out here - https://www.flaminfig.com/demo/s/thepulse/
All what you would do is add an opacity animation on scroll from 0% to 100% as the widebox navigation gets closer to the top of the page…
@FlaminFig Thanks. Im trying to find a solution that might not require a paid template just for that one effect.
Appreciate you sending it though, but Im not seeing the exact effect on that template. Appears like the group is just set to stick to top op page?
I must be missing something because I cant find any combination of scroll effects on the box or the group that will bring the box down from above the top of the page, then stick to the top once it has reached a certain height.
No, no, I wasn’t trying to sell my template to you just showing the effect.
Can you hunt down an actual website and show me the effect you are describing please and then I’ll see if Sparkle can do that for you, thanks…
Thanks. That’s close but looking for something closer to this:
I don’t think this can be done without writing code…
I agree with @macarna, that is something that cannot be achieved in Sparkle unless you code it in but why?.. If you think about it a “back to top” button in place where the blue + button is can work just as well and it is in reach of the fingers on mobile.
If having the bar slide down from the top isn’t possible, is simply fading it in possible. Seems like no matter what combination of opacity scroll effects either on the group or the box makes the bar 0% opacity at page load, then fades into 100%. The closest I can get is to put the opacity scroll effect on the box, but only works 0-100% opacity…clicking “swap” makes the bar 100% all the time, no more scroll effect.
It appears that it could be a limitation or bug if the bar is laid out to start at the top of the page the fade in from 0% works.
Basically, I have a hero image I don’t want covered by the top bar, but do want the top bar once you scroll past the hero to cover any text below it
@ironsightdesign, Mmm that sounds like what I showed with my template? The hero image is navigation free and when you scroll pass the hero image the navbar appears and sticks to the top of the browser allowing everything else below it to slide underneath.
As mentioned to give it more of an effect I could have introduced animation.
There are a lot of ways I could go with the main navigation but in the end I have to balance what I can do compared to how a User will interact with it in an intuitive and non-resistant way.
Not exactly. Your bar comes in from the bottom. Id like the bar to always be pinned to the top of the page - either it slides down from above or it fades in.
But, it appears neither seems possible,
you could probably make some layering adjustment and set the hero image on top of the menu layer - then applying the effects that you want. But it isn’t anywhere nearby of what you want. Sparkle only generates static stuff, so this kind of response (onSwipe) that requires a action recognition within the web interface browser isn’t available on Sparkle by default - but totally achievable with further coding on JS