Parallax Website Design

[Acorn]

I have been playing with an approach for a faux parallax website presentation

I am simply wondering if I am on the right track?

Xara - Parallax.xar - a 5MB download!

There is only one Xara Parallax object - the Logo.
The rest is all Stick at Top.

Ideas? Suggestions?

Acorn

[Boy]

You understand the app really well and use Xara-only functions for this one. From what I can see, it's a very simple setup but the published page actually looks quite dynamic. Could be used for a list of, for instance, FAQs.

[Acorn]

You understand the app really well and use Xara-only functions for this one. From what I can see, it's a very simple setup but the published page actually looks quite dynamic. Could be used for a list of, for instance, FAQs.

Cheers Boy, the hardest part was getting the objects to stay in the right order.

Here is a preview: https://shared.xara.com/AN2qtWeoxq.

Acorn

[bwood]

Awesome work again @acorn. I seem to have more people asking for “pizzaz” in websites. I do like to take a more institutional, simplistic approach to my work without many bells and whistles. Not that more cowbell is good, is just very selective.
I often compare this to an artists palate. You have a bright fluorescent yellow color, but your going to use this color selectively.

[Boy]

... the hardest part was getting the objects to stay in the right order.

What made it so difficult? Just looking at your design, the layer order looks quite logical. But that's probably so because I didn't have to come up with neither the concept, nor the actual design. :-)

[yellowbird]

Cheers Boy, the hardest part was getting the objects to stay in the right order.

Here is a preview: https://shared.xara.com/AN2qtWeoxq.

Acorn

Hi Acorn I'm really impressed. I like the effect used this way. OK if I use your idea (and your template)?

Nancy

[Acorn]

Hi Acorn I'm really impressed. I like the effect used this way. OK if I use your idea (and your template)?
Nancy

Nancy, free for general use.

Two things:
1. Delete the spurious CSS in the Page Head.
2. Remember, it is not using true parallax.

Acorn

[Acorn]

Here is another approach using Xara's Parallax web animation exclusively.

@Nancy, elsewhere you declared you chose not to use Scale to Fit Width in your designs.
This one doesn't either but manages to achieve Full Width Stretches for the parallax items and the more static backdrops.

I have used Text Panels & Images of similar height to reduced the amount of faffing around to get the parallax working.
The cracks appear at 25% browser scaling.

Design file: Xara - Full Parallax.xar
Demonstration: https://shared.xara.com/43JQFerYMW

Acorn

[yellowbird]

Here is another approach using Xara's Parallax web animation exclusively.

@Nancy, elsewhere you declared you chose not to use Scale to Fit Width in your designs.
This one doesn't either but manages to achieve Full Width Stretches for the parallax items and the more static backdrops.

I have used Text Panels & Images of similar height to reduced the amount of faffing around to get the parallax working.
The cracks appear at 25% browser scaling.

Design file: Xara - Full Parallax.xar
Demonstration: https://shared.xara.com/43JQFerYMW

Acorn

Looks great Acorn! My websites have only two variants, Main-960px, mobile 420 px. I do have the export option set to scale to width, but the max width is set to 1280. Therefore on a wider screen, the graphics don't fit full width. If I increase it to 2400, graphics and text look too big and clunky, so I also use stretch to width objects.
I need info on recommended variants with scale to width. I know it has been discussed here, but I can't find the posts. Thanks again!

[Acorn]

Looks great Acorn! My websites have only two variants, Main-960px, mobile 420 px. I do have the export option set to scale to width, but the max width is set to 1280. Therefore on a wider screen, the graphics don't fit full width. If I increase it to 2400, graphics and text look too big and clunky, so I also use stretch to width objects.
I need info on recommended variants with scale to width. I know it has been discussed here, but I can't find the posts. Thanks again!

Nancy, my misreading of your prior. My approach will work with Scale to Fit Width or not.

With Main and a Variant and Scale to Fit Width, I find there is no need to design a small mobile page.
I therefore choose 720px Mobile and 1440px Main.
If you scale the Variant objects to 50% then on a sliding browser width, the jump at 1080px is not as obvious.
If you set maximum width to 2160px, the scaling up or down at either width limit is the same, a bit like Goldilocks.
My dynamic range is therefore 1.5 both ways.
Your midpoint is only 640px so 1280px is an upscaling of 2 and 2400px makes this 3.75. With 480px you have no downscaling.

Acorn