Web Designer Demo

Charity Demo

This website is created with Xara Web Designer Premium. It has desktop and mobile variants and demonstrates many of the new animation effects, plus new SmartShapes, photo grids and photo panels. We’ve added a parallax effect to the main image at the top of this page and to the red and grey balloons. We’ve also made the heading above the graphic, with the logo and phone number, stretch to browser full width and stick to the top of the page. Plus there is a scroll animation with zoom in / fade up applied to the yellow balloon. Typography Note : We’ve used Heading 1 & 2, First Paragraph and Normal Text Styles. This quote styled text, Noto Serif 16px, is added to create a compliment to the San Serif normal text (a Google font - Open Sans).

We’ve added a scrolling animation to the yellow text panel (slide-in from right) and to the photo (slide-in from left). You can click on the panel title “clean water” to return to the top of the page (applied to all panel headings).

HEADING 2 _______ We’ve added a fade effect mouse-over to the image with a photo pop-up. And full width stretching to the background panel. Open Sans 16px 125% #2d2e33.

SMARTSHAPE _______ This is one of the new Percentage Ring SmartShapes, with a scrolling roll-in animation, plus ‘on reveal’ fade-in added to the text.

Column Chart

_______ This is one of the new Column Chart SmartShapes. Chart SmartShapes can be easily adjusted by using the nodes to change the values and to add or remove more columns. We’ve also added a selection of bar chart and percentage ring SmartShapes.

ANIMATION _______ The photo has an ‘on reveal’ flip vertical animation with a 1 second delay. The background image is set to full width stretch.

Lorem Ipsum :Consequat, est

commodo ut dolore cillum,

id asit aliqua laboris labore.

PHOTO FADE IN

_______ We’ve positioned a color photo with ‘on reveal’ fade-in animation over a duplicate black and white version of the same photo. John Britton Director

Lorem Ipsum : Noto Serif 16px 120%. Veniam fugiat amet sit consequat, est commodo ut dolore cillum.

These photos are all part of a single Smart Photo Grid with image pop-ups and mouse over effects. Lorem Ipsum : laboris mollit. Ut sunt ipsum qui magna veniam sed eiusmod in velit esse. Enim non cons equat? Adipisicing esse in dolor dolore.

REVEAL ANIMATION

_______ We’ve added an ‘on reveal’ fade-in animation to this text and made this yellow panel stretch to full width. And finally we’ve used scrolling animations on the Charity Logo below (slide in from left) and the social media logos (slide-in from right).