Welcome to TalkGraphics.com
Page 1 of 2 12 LastLast
Results 1 to 10 of 18
  1. #1

    Default 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

  2. #2
    Join Date
    Apr 2018
    Location
    Barnes, London
    Posts
    947

    Default Re: Web animation on sticky element to reveal shadow

    Quote Originally Posted by TimBox View Post
    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
    Attached Files Attached Files

  3. #3
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,746

    Info Re: Web animation on sticky element to reveal shadow

    This is one Xara way: Xara - Revealing Shadow.xar

    Acorn
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

  4. #4

    Default 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

  5. #5

    Default 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

  6. #6

    Default 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

  7. #7
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,746

    Default Re: Web animation on sticky element to reveal shadow

    Quote Originally Posted by TimBox View Post
    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
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

  8. #8

    Default 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

  9. #9

    Default Re: Web animation on sticky element to reveal shadow

    Here is where I'm at

    I cannot get it work at the basics now

    SQI website scroll test.xar

  10. #10
    Join Date
    Apr 2018
    Location
    Barnes, London
    Posts
    947

    Default Re: Web animation on sticky element to reveal shadow

    Quote Originally Posted by TimBox View Post
    Here is where I'm at

    I cannot get it work at the basics now

    SQI website scroll test.xar
    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
    Attached Files Attached Files

 

 

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •