Welcome to this demo site for the new Xara Web
Designer 365, released in April 2016 .
This website is created with Xara Web Designer Premium 365. 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).
Lorem Ipsum : Consequat, est
commodo ut dolore cillum id
aliquip sit aliqua laboris.
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).
Copyright © 2016 Xara Group Limited, a MAGIX company.
800
580
350
1000
500
591
684
930
536
643
500
733
Jan
Feb
March
April
May
June
July
Aug
Sep
Oct
Nov
Dec
MOUSE OVER
_______
Wobble mouse over
effects and
image pop-ups
applied to these images.
LINK ON TEXT
PARALLAX
_______
Parallax on scroll
animation added to the
two balloons in the
background.
LINK ON TEXT
ANIMATION
_______
On Reveal Animations,
slide in from left &
slide in from right,
added to these panels.
LINK ON TEXT
STRETCHY
_______
The background
image has a full width
stretch and scale
applied to it.
LINK ON TEXT