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

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

This is one Xara way: Attachment 129132

Acorn

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

I just wanted to say that I implemented Acorns solution. Works brilliantly! Hats off to you guys for the help!

Tim

One more thing

It stops working as soon as you make it a repeating element.

Tim

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

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

Here is where I'm at

I cannot get it work at the basics now

Attachment 129133

Quote:

---

Originally Posted by TimBox

Here is where I'm at

I cannot get it work at the basics now

Attachment 129133

---

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

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

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

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

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

Sorry for the delay I did not think there would be a follow up

I will try the script and see what happens

Tim

Ok had a chance to implement it.

Way better than my previous attempt.

Works a treat now! And flexible!

Big big thanks

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

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