Printable View
For those that are relatively new to Xara, and animations, parallax and reveals I always consult this great demo page from Xara.
http://previews.xara.hosting/charity/
I’m amazed what Xara can do with the proper reveals and animations working together. I use the features sparingly, but on the demo page all the animations and reveals are explained well. I use this site as a reference for what Xara can do.
Hope you find it informative.
-Bill
Thanks for this Bill.
That's useful and informative Bill. Thanks.
Seeing the effects on a real life page is worth bookmarking as a reference and nicely explained on the page. Using sparingly is the key thing as you say but used subtly adds a professional look.
Best wishes,
Ian
Thanks, Bill.
@Xara: that link should be included in the manual for easy reference.
Xara has a similar design - Single Page Websites > Wateraid.
For this on-line presentation:
- The Navbar needs to stick at top.
- The Reveals should be set for one-time - they are tedious to endure repeatedly.
- The pink 'donate now' ought to be sticky at top too
- Xara actually needs a sticky at a defined position.
- The coloured tags that have the same name as the headings in the NavBar should be on the same vertical line as the NavBar; it is just messy.
- The fonts are different.
- There could be a slightly different background colour and sticky at place to cover the same NavBar entry; this would give a rolling NavBar and a breadcrumb for little effort.
- In poverty, you can never re-read the text under the swivel image without scrolling away and back again.
- Having four effects on one picture is a mess.
- In adoption, the nodding dogs is just that, noddy.
- In gallery, the images pop-ups only cycle from the selected image to the last one.
- The scroll to top symbol has to be found at the bottom; it needs to be sticky and in tune with the other graphics.
Xara has used:
- Seven fonts.
- 182 images.
- All are PNGs.
- None have any meaningful filename.
- I appreciate this is for Web Designer but the use of WebP and SVG would reduce the payload down from a whopping 2.6MB.
- Highslide JS is Version: 4.1.13 (2011-10-06), Highslide CSS is v4.1.8.
- Worse, jQuery is v1.11.1 | (c) 2005, 2014.
- Animate.css is 2015.
- Nothing for Accessibility.
- Few [alt]s.
- Few [title]s.
- A non-secure website.
The one good thing I like is the growing yellow logo that is transparent and become more opaque on scroll.
Why is it a PNG? And why give it a solid kernel?
For those who are interested, it is a Scroll Animation > Zoom/fade in up with a Slow reveal.
I engage in remedial Xara design work for clients who appreciate they do not understand the product enough to achieve what they can imagine.
Xara ought to showcase far better than this.
More essential, Xara needs to demonstrate how any effects in its design templates have been realised.
If it did this, I would lose out on paying clients but we all would gain in better websites that might encourage others to buy into the Xara brand.
Acorn
Thanks @acorn. I did wonder how they produced the large yellow logo effect.
Certainly I’d replace the text of “donate” in the white sticky bar at the top with the donate button.that would keep it at the top. Nav bar as mentioned should be a sticky.
Caveat remaining that you can an effects or animations to the full width photo.
Sometimes I fear adding to many effects on one element for fear of breakage. For example adding an animation on top, of a reveal animation.
I don’t use effects much. But common ones I see are parallax, and fade in on particular elements. I use the fade in a lot for a softer feel.