Printable View
I have been playing with an approach for a faux parallax website presentation
I am simply wondering if I am on the right track?
Attachment 133051 - a 5MB download!
There is only one Xara Parallax object - the Logo.
The rest is all Stick at Top.
Ideas? Suggestions?
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.Quote:
Originally Posted by Boy
Here is a preview: https://shared.xara.com/AN2qtWeoxq.
Acorn
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.
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. :-)Quote:
Originally Posted by Acorn
Hi Acorn I'm really impressed. I like the effect used this way. OK if I use your idea (and your template)?Quote:
Originally Posted by Acorn
Nancy
Nancy, free for general use.Quote:
Originally Posted by yellowbird
Two things:
1. Delete the spurious CSS in the Page Head.
2. Remember, it is not using true parallax.
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: Attachment 133055
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.Quote:
Originally Posted by Acorn
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.Quote:
Originally Posted by yellowbird
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
Thanks for the detailed info and explanation Acorn.Quote:
Originally Posted by Acorn