Slow motion background

Hi.
Is it possible in Xara to create such an amazing effect when different background layers are moving with different speed while scrolling the page? It looks cool and like 3D effect.
thanks

This is called Parallax Scrolling and as far as I know, you cannot do this in Xara.

It also helps forum members to assist if you can supply links to examples of what you're trying to achieve :)

this is cool example: http://ianlunn.co.uk/plugins/jquery-parallax/

Parallax is a really cool effect, but as Gary said this is not natively possible in Xara.

That being said, I do love a challenge. I'll see if I can make something (but no guarantees!)

Ok, have a look at this really basic example: http://robert74.magix.net/pe/

NOTE: it may take a while to load, this is because the images are VERY unoptimized, i basically got the images from here as an example: https://unsplash.com/ and they are huge so take a while to download. Should I have spent more time on it, I would of optimized them first.

File here: Attachment 104682

Taken from here: http://callmenick.com/2014/07/15/sim...olling-effect/

Simply insert the body code in placeholders, the CSS in the Web Properties HEAD section and make sure the photos are linked correctly.

As before this is a really basic example done over a pint and tiredness, I'm sure someone can do a much more polished example :) Any questions let me know.

Thanks
Rob

Sorry, the images where way to large. I've optimized the example page much better, should load faster now:

http://robert74.magix.net/pe/

Thanks
Rob

That looks wonderful, Rob. Thanks a bunch!

Thanks Rob. I agree with what Boy said, I thought it was great.

Hi Rob

Apologies for resurrecting this thread, but creating a parallax scrolling effect is turning into a bit of a obsession with me.

I have had a look at the file you provided, but I cannot work out how to change the background images - I did try ctr+shift+ alt+ A, but this did not work

Could you advise please?

I think I may now be answering my own question, but from what I see the images are not embedded in the file, but are 'pulled' from a host? Is there a way of embedding them in the xara file or would I need to host them somewhere and point to them within xara?

I think you'll need to place them in an image folder and change the css source to point to their url which shouldn't be a big issue. I've quoted the relevant section below (I hope)

Nice find by the way Rob :)

Quote:

---

section.module.parallax-1 {
background-image: url("../img/demo/_small/1.jpg");
}
section.module.parallax-2 {
background-image: url("../img/demo/_small/2.jpg");
}
section.module.parallax-3 {
background-image: url("../img/demo/_small/3.jpg");
}

---

Many thanks Egg, I will give it a go!

Hi again

I have gave it a go but cant seem to get it to work - down to my own ineptitude I am sure!

I think that where I am going wrong is that using the code kindly supplied by egg I need to upload the photos into a sub directory of where the site files will be placed?

Ideally what I would like to do is 'embed' the photos in the site so that everything is uploaded in one go - dont know if that is possible?

I have tried using a variant of the code that I think Steve Ledger produced for the full screen slideshows which allow me to use ctrl+alt+shift+A to add the images - I think that the appropriate part of the code is:

"index_htm_files/1.jpg",
"index_htm_files/2.jpg",
"index_htm_files/3.jpg",

So I was hoping that I could combine this with the code supplied by Egg, but as stated I have had no success as yet.

Any thoughts?

Hi Nobbyy,

Many thanks for your kind words.

Yes, if you select an object and press Ctrl + Shift + Alt + A, then select the images and press ok, it then import that image into your document and will appear in the "filename_htm_files" folder when you export. It will also keep the filename, so change the code to be whatever the filenames are; you could have something like:

"index_htm_files/picture_of_something.jpg",
"index_htm_files/family_photo.jpg",
"index_htm_files/my_first_car.jpg",

Also a note on the Ctrl + Shift + Alt + A feature:

• You can attach multiple files to an object, but need to do them individually.
• If you delete the object you have attached files to, it also deletes the files.
• If you have Designer Pro, you can see attached files in the names gallery under "used files".
• Attached images don't appear in the bitmap gallery.

If you get stuck, send us a PM and I'll look into it. There are some other nicer examples of the parallax scrolling that I'll try when I get a moment.

Thanks
Rob

Hi Rob

Many thanks for your swift and very helpful response - I cant wait to try it!

Will let you know how I get on.

Thanks again

Neil

Nice one Rob :D

Yep, well done Rob.

Thanks guys, I appreciate it :)

Sorry I probably should of mentioned in the previous post: If the background image is being set by CSS, then you need to use the URL attribute like in the example, so the correct code would be:

section.module.parallax-1 {
background-image: url("index_htm_files/1.jpg");
}
section.module.parallax-2 {
background-image: url("index_htm_files/2.jpg");
}
section.module.parallax-3 {
background-image: url("index_htm_files/3.jpg");
}

Thanks
Rob

Hi again Rob - you are an absolute star - works perfectly!!!

Thank you so much.

Neil

Which is what I pointed out in post #12 Rob :)

Hi Egg

Apologies if I did not fully understand your help or implemented it incorrectly - I am very much learning as I go.

No problem nobbyy. Rob had gone further than me on how to reproduce the effect, he just reiterated my suggestion is all that I'm saying.

Thanks Egg - I just wanted you to know that I really do appreciate do appreciate your help - even if I am too dense to implement it properly!:)

Quote:

---

Originally Posted by Egg Bramhill

Which is what I pointed out in post #12 Rob :)

---

Sorry, yes you are right, Egg got to it before me. Must of skimmed passed your reply :o