Web animation on sticky element to reveal shadow
Hi Awll
I'm trying to reproduce an animation I have seen on Google site. The screen is all white while at the top of the page. Then as you scroll down the sticky header reveals a shadow at the bottom.
I though I could replicate it by giving the header the shadow, then making a white rectangle overlap the shadow. The idea being that as you scroll the page the shadow is revealed.
By the fact I'm here it should be obvious it did not work. The header is placed on top of the page and hence the shadow on show the whole time.
Any suggestions on how to achieve the effect?
Thanks
Tim Box
1 Attachment(s)
Re: Web animation on sticky element to reveal shadow
Quote:
Originally Posted by
TimBox
Hi Awll
I'm trying to reproduce an animation I have seen on Google site. The screen is all white while at the top of the page. Then as you scroll down the sticky header reveals a shadow at the bottom.
I though I could replicate it by giving the header the shadow, then making a white rectangle overlap the shadow. The idea being that as you scroll the page the shadow is revealed.
By the fact I'm here it should be obvious it did not work. The header is placed on top of the page and hence the shadow on show the whole time.
Any suggestions on how to achieve the effect?
Thanks
Tim Box
Tim,
You can use animation to scroll in from the top of the page with a reveal trigger. In my case the header is a simple rectangle with a fill on the bottom edge. I could have used a CSS box shadow too.
The cunning part is to overcome Xara's obstacle that one cannot combine a sticky animated object with a full browser width stretch: Here is the idea and the workaround: https://initiostar.co.uk/demo/Trigger/
With the attached XAR, move the triggers up and down vertically to see the change - tricky to get it precise and of course it depends on your browser size. The triggers are visible for the demo, but can be made transparent.
It's not perfect, but it's a start. You should be able to add a Navbar on top of the rectangle - to see how it is done properly take a look at the UK FT https://www.ft.com/
Gary
1 Attachment(s)
Re: Web animation on sticky element to reveal shadow
This is one Xara way: Attachment 129132
Acorn
Re: Web animation on sticky element to reveal shadow
Thanks chaps.
I can see that people put a lot of work into this and its really appreciated
Acorn
Looks like a great solution. I will implement that.
Tim
Re: Web animation on sticky element to reveal shadow
I just wanted to say that I implemented Acorns solution. Works brilliantly! Hats off to you guys for the help!
Tim
Re: Web animation on sticky element to reveal shadow
One more thing
It stops working as soon as you make it a repeating element.
Tim
Re: Web animation on sticky element to reveal shadow
Quote:
Originally Posted by
TimBox
One more thing
It stops working as soon as you make it a repeating element.
Tim
Tim, on a Conventional Website, as a Repeating Object for the three shapes, it still works fine. Are you trying this on a Supersite/Scrolling one?
Acorn
Re: Web animation on sticky element to reveal shadow
Hi
So far this is a conventional site
Some more testing using your example
1 mark the objects as repeating
2 New page
Result it works
1 Add a new page
2 mark the objects as repeating
Does not work.
Edit I retried it on your example and it did work
I will make an example and post it here
1 Attachment(s)
Re: Web animation on sticky element to reveal shadow
Here is where I'm at
I cannot get it work at the basics now
Attachment 129133
1 Attachment(s)
Re: Web animation on sticky element to reveal shadow
Quote:
Originally Posted by
TimBox
Tim, try this version - the shadow should be stick-at-top too. Bit fiddly to get the menu and logo to the front and get the header to the correct height.
Gary