Xara Web Designer 365
This simple web page, which took about half an hour to create from a
blank page, shows a few of the Web Designer 365 new features.
Parallax scroll
The top pagoda photo, and the heading, have parallax scrolling values
applied, so as you scroll the page up, the image and heading scroll at
different rates to the rest of the page. (Better to see the effect using
the scroll bar, not the mouse scroll wheel.)
Stick at the top
The NavBar is set to ‘stick at the top’ so it scrolls until it reaches the top
of the page and then sticks to that point, so the navigation controls are
always visible on the page. (The buttons don’t go anywhere.)
On Reveal animations
The image, right, has a fade-in reveal effect, so the first time, and each
time you scroll it on, it does a smooth fade-in effect. The icons below
have a different reveal animation.
Scroll animations
The images below, in this column, have a new scroll animation. The
ones in this column fade in/out depending on the scroll position. The
images on the right side, have a fade and slide in effect. In this case
they are clipped to the page, but page clipping is optional.
All these reveal and scroll effects are as simple as placing the item on
the page, selecting an animation type from a drop-down list.
Adipisicing deserunt qui fugiat pariatur labore reprehenderit, tempor
consequat ut. Deserun
t nisi ut sunt est, nulla sunt fugiat. Sit cillum est do voluptate. Labore et
non cupidatat dolore est ut occaecat adipisicing do duis ut ad
adipisicing id sed in. Duis est eiusmod nulla esse consectetur ullamco
sint veniam proident dolore.
Minim officia ex sunt mollit ex elit aliquip in dolor fugiat aliqua duis
consectetur do ullamco enim. Aliquip dolore, officia ex pariatur,
exercitation velit ipsum irure incididunt. Sunt velit deserunt non, officia
cupidatat enim est mollit non quis aliqua excepteur, adipisicing dolore
do officia amet. In aute occaecat irure magna mollit culpa in fugiat in
cupidatat dolore quis dolor ipsum dolore consequat.
Duis nisi officia dolore ipsum sit ullamco cillum, sint commodo ut
cupidatat excepteur elit nostrud cillum mollit id occaecat. Exercitation
ad non nulla sit et sunt exercitation occaecat minim in esse. Excepteur,
eu eiusmod consectetur cupidatat dolore in deserunt in, commodo
fugiat labore ea id exercitation non sunt ullamco mdfollit. Consectetur
dolor ad duis est tempor consectetur, do commodo!
Dolor sed ipsum consequat sed fugiat DOLOR. CUPIDatat fugiat lorem
dolor veniam elit. In veniam dolor ex in in, tempor irure sed do.
Labore eu officia minim reprehenderit dolor deserunt minim, deserunt
adipisicing minim nisi mollit. Elit dolore magna fugiat ipsum in dolore
non quis ut. Eiusmod commodo ad dolore velit id in esse in ut sit ut elit
eiusmod adipisicing elit est ad adipisicing.
Labore sit veniam, dolor nulla in consectetur, eu irure dolor mollit enim
exercitation proident officia dolor. Labore do eiusmod aliqua!
Incididunt labore ut aute. Dolor officia cillum ullamco elit eiusmod sit,
culpa sed.
Sint eu voluptate sint laboris in qui cillum, dolor duis eu ut, dolor ut. Ea
irure do tempor exercitation cupidatat quis, labore reprehenderit in in
et ut est. Amet commodo labore adipisicing nisi sint. Aliqua occaecat
aute, cillum excepteur et non nostrud ut, amet consequat pariatur duis
aliqua ullamco magna: In ad duis irure.
Minim amet, do ut est quis proident irure exercitation reprehenderit.
Aliquip, deserunt tempor ut proident anim exercitation ut ut tempor
deserunt dolore labore enim deserunt quis non. Irure in, nisi
consequat dolore ex nostrud non eiusmod laboris ex. Dolore ut, ut in
exercitation esse excepteur voluptate, irure excepteur incididunt, ut
ea? Cupidatat sed minim dolore veniam adipisicing ex labore et in
ipsum culpa nisi est, eiusmod officia est.
A PARALLAX PAGODA
A ‘stick at the top’ bar
This photo has an ‘on reveal’ fade-in effect.
These icons, from the symbol library of more than
1500 designs, also have an on-reveal effect.
The following photos all have a scroll-animation
where the position and fade is proportional to the
vertical scroll position.