1 Attachment(s)
Re: Web animation on sticky element to reveal shadow
Thanks
I think I will give up on this now for now. I cannot get the image box to be obscured before it meets the shadow.
I do though really appreciate the help. It was working great yesterday until I replicated across all pages.
Attachment 129135
1 Attachment(s)
Re: Web animation on sticky element to reveal shadow
Another approach: Attachment 129136
I think this way can be more flexible and simpler to set up: two stretch shapes are stuck at the top and the shadow is triggered by a named shape lower down the page..
The shadow appearance is Instant but this can be tweaked.
Acorn
1 Attachment(s)
Re: Web animation on sticky element to reveal shadow
I managed to get the first version almost working; made the three shapes different colours by way of example to highlight the challenge; the shadow and its cover are both stick-at-top with the height difference between them equal to the visible height of the shadow.
The only niggle is that objects pass over the shadow. The trigger route works too, more flexible, but it has to be out of browser view before scroll.
Personally, I would simply have the shadow as a sticky object and have it fade-in from the top, delayed a second or so. That would be consistent regardless of browser height.
Gary
1 Attachment(s)
Re: Web animation on sticky element to reveal shadow
Final offer: Attachment 129140
This one uses code. The shadow only appears when the vertical scroll is greater than 100px; a value that can be set for the website or for individual pages if the code is move to Page > HTML Code (body) instead.
Acorn
Re: Web animation on sticky element to reveal shadow
Sorry for the delay I did not think there would be a follow up
I will try the script and see what happens
Tim
Re: Web animation on sticky element to reveal shadow
Ok had a chance to implement it.
Way better than my previous attempt.
Works a treat now! And flexible!
Big big thanks
Re: Web animation on sticky element to reveal shadow
Ok apologies, back like a bad penny
Next issue, stops working on mobile variants eg make a website variant and the shadow is always there.
Cheers Tim
1 Attachment(s)
Re: Web animation on sticky element to reveal shadow
Quote:
Originally Posted by
TimBox
Ok apologies, back like a bad penny
Next issue, stops working on mobile variants eg make a website variant and the shadow is always there.
Cheers Tim
Tim, no biggie. I never considered Variants as notmally people use a Hamburger NavBar.
Anyhow the addition is trivial: change the Id to a ClassName instead and change # to .
Attachment 129171 <-- all documented here.
Acorn