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
1 Attachment(s)
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.
>>> Attachment 132242 <<<
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
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.
>>>
Attachment 132242 <<<
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
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.
>>>
Attachment 132242 <<<
1 Attachment(s)
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.
>>> Attachment 132263 <<<
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
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.
>>>
Attachment 132263 <<<
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.
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
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.
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
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
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