Timed slide in/slide out element
I'm looking for a way to have a small box with text (links) and graphic slide in from the edge of my site at a certain time (say, 5 seconds after the page is fully loaded, or once the user scrolls to a certain depth on the page).
The slide in box would remain in place until the user clicked an X in the box's top right-hand corner, or any of the links shown on the slide-in box.
If the user clicked the X, the box would slide back into its original position offscreen.
Has anyone built a slide-in/slide-out element like this (using a similar timing method)?
Any advice is greatly appreciated.
Re: Timed slide in/slide out element
Re: Timed slide in/slide out element
I was kind of hoping for a simpler method since I'm not yet comfortable with using jquery. I thought there might be a timing trigger built in to XWDP that could launch a simple javascript call for the sliding box to enter/exit the page.
Or, maybe, XWDP might have a tool already setup for such an effect.
Re: Timed slide in/slide out element
Xara is a WYPIWYG tool so any transitions are through Widgets or code.
There's no timed event other than those in picture galleries (using jQuery).
It's probably possible purely is CSS3 but you then have browser incompatibilities; jQuery will be the safer route.
Acorn
Re: Timed slide in/slide out element
I forgot this!
This approach will go part of the way to what you are after:
- Create your box or a new Layer in the place you want it to stop at.
- On the MouseOff layer add a clickable shape/button.
- For this, set its Web Properties > Link > Pop-up layer to the new Layer.
- Click its Settings... button.
- Change the transition to Slide in from left.
- Change the Speed to 5.
- Untick Close pop-up automatically.
- Click the OK button twice.
- Preview
Acorn
Re: Timed slide in/slide out element
Thanks, Acorn. I'll give it a shot. If it doesn't work I'll do some speed reading on jQuery and see if I can do it that way. Again, I really appreciate your help and advice.
Kevin
Re: Timed slide in/slide out element
BTW, I tried doing a simple SWF animated fly-out but I couldn't find any way to trigger it so I just kind of gave up on it.