Welcome to TalkGraphics.com
Page 1 of 5 123 ... LastLast
Results 1 to 10 of 44
  1. #1

    Default Arrow or symbol used to bring you to the top of the page

    I added an arrow and made it sticky, and this is either for mobile or computer version, and I'd like it to start further down the page, and that's where I placed it but when I render the page it's near the top (not at the top). In other words, it should start somewhere out of sight as you are scrolling, for instance a blog post....can that be done, to set where it starts?


    I tried to just use the back to the top of the page, but then it didn't scroll with the page..so I went back to it being sticky but it starts to high up on the page in my humble opinion...don't like it.

    Is there any settings to change this? A work around?

    Thanks...
    Sue

  2. #2
    Join Date
    Dec 2018
    Location
    Australia
    Posts
    1,740

    Default Re: Arrow or symbol used to bring you to the top of the page

    I've included the .xar file as visuals are easier than words. There are only 2 things we are playing with: the arrow and the ballroom dancers.

    Ballroom dancers:
    Select a graphic, text, shape, whatever down the page where you would like the arrow to appear.
    Click Utilites > Names and give the object a name. I called mine 'trigger1', but it can be anything.

    Arrow:
    Place it where you would like it to be in relation to the top of the page.
    Make it sticky.
    Make it Link To Top Of Page.
    Click Utilities > Web Animation > Reveal/Scroll (tab) > Reveal Animation (radio button) > Trigger Object Name (drop down box) and choose whatever you named your object.

    You can use an animation to make the object appear, I used Fade, but there's a decent list to choose from.

    >>> Sue Arrow.xar <<<

  3. #3

    Default Re: Arrow or symbol used to bring you to the top of the page

    Thanks, Chris M. That's just what I needed! Brilliant!
    Quote Originally Posted by Chris M View Post
    I've included the .xar file as visuals are easier than words. There are only 2 things we are playing with: the arrow and the ballroom dancers.

    Ballroom dancers:
    Select a graphic, text, shape, whatever down the page where you would like the arrow to appear.
    Click Utilites > Names and give the object a name. I called mine 'trigger1', but it can be anything.

    Arrow:
    Place it where you would like it to be in relation to the top of the page.
    Make it sticky.
    Make it Link To Top Of Page.
    Click Utilities > Web Animation > Reveal/Scroll (tab) > Reveal Animation (radio button) > Trigger Object Name (drop down box) and choose whatever you named your object.

    You can use an animation to make the object appear, I used Fade, but there's a decent list to choose from.

    >>> Sue Arrow.xar <<<

  4. #4

    Default Re: Arrow or symbol used to bring you to the top of the page

    Okay...did what you suggested. Everything was easy to follow..thanks.
    Tried the "Fade" but it did not show up, so I picked "instant" and still it's not showing up.
    I had done it on some of the pages for the computer but more so for the mobile version...and tried 2 different browsers and my mobile phone.
    Feeling quite stupid at the moment! I know this is not hard to do...why..why...is it not working?
    It's in the mouseoff layer.
    What did I do now? eeekkkk

    https://www.makom/org/testing2022
    http://makom.org/testing2022
    specifically it should be on the home page among others but here is one directly for you:
    https://www.makom.org/testing2022/ra...-of-holies.htm

    Quote Originally Posted by Chris M View Post
    I've included the .xar file as visuals are easier than words. There are only 2 things we are playing with: the arrow and the ballroom dancers.

    Ballroom dancers:
    Select a graphic, text, shape, whatever down the page where you would like the arrow to appear.
    Click Utilites > Names and give the object a name. I called mine 'trigger1', but it can be anything.

    Arrow:
    Place it where you would like it to be in relation to the top of the page.
    Make it sticky.
    Make it Link To Top Of Page.
    Click Utilities > Web Animation > Reveal/Scroll (tab) > Reveal Animation (radio button) > Trigger Object Name (drop down box) and choose whatever you named your object.

    You can use an animation to make the object appear, I used Fade, but there's a decent list to choose from.

    >>> Sue Arrow.xar <<<

  5. #5
    Join Date
    Dec 2018
    Location
    Australia
    Posts
    1,740

    Default Re: Arrow or symbol used to bring you to the top of the page

    You have a lot of pages, I would be looking to do something that is easily replicated.

    If the background is pastel blue on all pages, I would make a simple rectangle in the same colour.
    Make it, say, 100px wide and tall enough to reach the bottom of your longest page (this ensures the arrow does disappear once you've scrolled past the trigger).
    Place the top of the rectangle where you want the arrow to appear and make a note of the x/y coordinates, so you can locate it easily. (the example is set to x:0, y:1200)
    Name it 'trigger1' (or whatever).
    Send it to the back of the page.
    Arrange > Repeating Object > Repeat on all pages

    Your arrow should, indeed, be on the MouseOff layer. Create it as the first set of instructions and make it repeat as above.

    >>> Sue Arrow Long.xar <<<

  6. #6

    Default Re: Arrow or symbol used to bring you to the top of the page

    I messed around a bit more, the one arrow that I had made, copied and pasted just wasn't working on any of the pages.
    So I started from scratch. I did something last night with a new arrow, and a bit different order and then it worked! Go figure.
    Now if I could remember how I did it...sigh...but I can copy and paste it on other pages and it should work, right?
    I don't need it on all pages...but that may be a GREAT idea because then I can go delete it from a few of the pages that are short!

    Quote Originally Posted by Chris M View Post
    You have a lot of pages, I would be looking to do something that is easily replicated.

    If the background is pastel blue on all pages, I would make a simple rectangle in the same colour.
    Make it, say, 100px wide and tall enough to reach the bottom of your longest page (this ensures the arrow does disappear once you've scrolled past the trigger).
    Place the top of the rectangle where you want the arrow to appear and make a note of the x/y coordinates, so you can locate it easily. (the example is set to x:0, y:1200)
    Name it 'trigger1' (or whatever).
    Send it to the back of the page.
    Arrange > Repeating Object > Repeat on all pages

    Your arrow should, indeed, be on the MouseOff layer. Create it as the first set of instructions and make it repeat as above.

    >>> Sue Arrow Long.xar <<<
    Last edited by SueB; 24 June 2022 at 01:49 PM.

  7. #7
    Join Date
    Dec 2018
    Location
    Australia
    Posts
    1,740

    Default Re: Arrow or symbol used to bring you to the top of the page

    You will need to copy/paste the trigger as well as the arrow.

    Don't forget that the arrow will magically disappear when the trigger object is off screen. You could either use the rectangle method, as above, or use multiple objects all named the same.

  8. #8

    Default Re: Arrow or symbol used to bring you to the top of the page

    You are right about the trigger being off screen! Darn... don't want to use multiple objects.

    I didn't really get the other instruction about the backpage and blue...to make the arrow go further down the page..
    Quote Originally Posted by Chris M View Post
    You will need to copy/paste the trigger as well as the arrow.

    Don't forget that the arrow will magically disappear when the trigger object is off screen. You could either use the rectangle method, as above, or use multiple objects all named the same.

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

    Lightbulb Re: Arrow or symbol used to bring you to the top of the page

    A few additions to "improve" the reveal.


    • Drag the arrow onto the Pasteboard - this sticks it to the left or right edge of the browser, regardless of scaling. It avoids your design being hidden by the arrow up to the point when the page width equals or exceeds the browser width.
    • Set the reveal to something like Fade in up - the movement gently gives the viewer a clue that something new has appeared.
    • For the trigger object, include a dummy trigger name (e.g., NeverUsed) by typing NeverUsed into its Trigger object name Box and then click Apply. This make the trigger object invisible when the page is rendered.

    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

  10. #10

    Default Re: Arrow or symbol used to bring you to the top of the page

    Trying this. When I go to assign the reveal animation, on the shape, in the pasteboard background, I get an error message "Objects on the pasteboard background layer cannot have a reveal animations appied."
    Quote Originally Posted by Acorn View Post
    A few additions to "improve" the reveal.


    • Drag the arrow onto the Pasteboard - this sticks it to the left or right edge of the browser, regardless of scaling. It avoids your design being hidden by the arrow up to the point when the page width equals or exceeds the browser width.
    • Set the reveal to something like Fade in up - the movement gently gives the viewer a clue that something new has appeared.
    • For the trigger object, include a dummy trigger name (e.g., NeverUsed) by typing NeverUsed into its Trigger object name Box and then click Apply. This make the trigger object invisible when the page is rendered.

    Acorn

 

 

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
  •