Printable View
Here's a site with some interesting parallax and sliding/revealing type animation going on.
http://www.deltafitouts.com.au/
Parallax I can do, but what about that sliding 'wipe' effect that has two pictures in the same place, being revealed as you scroll?
It's pretty cool!
Anyone? Egg?!!
Not Egg here, but. The photo is static and everything else moves. So the photo needs to be on the Background layer and the Pasteboard Background set to Fixed. I did something similar here http://collector-vehicle-appraisals-of-newmexico.com/ The car graphic is on the Background Layer and everything scrolls over that image.
I think something more is going on here than just a static background picture. There are two 'static' graphics and two 'static' pictures in the background and there seems to be some parallax effect going on. It gives a nice effect but I can't quite figure out how it's created.
Hi Ian, your question got me to play around to recreate the sample you gave. This is not perfect but I think it is doable with Xara. I am using Xara web designer 365 premium. I put the worksheet at 10% zoom so that you can see the overall picture. Look at the attachment. I did not try to match the picture sizes to the ones in your example, so the effect is a little different. The triangle has a scroll animation (it's in reverse from what you have, right to left instead of left to right) but that can be changed. The 2 middle pictures have the parallax animation.
Ciao
Roly
=D> Roly
Hi Gary, yeah I'm still playing with this. I tried the way you suggested but I cannot get the 2nd picture (counter with microwave) to show up the way it is in Ian's example, so you will see in the attached that I had to add a parallax to the 2nd picture to get it to move but the total look is not the same. What am I missing?Quote:
Originally Posted by gwpriester
Hi Ian, I'm convinced there must be a way, the impossible usually takes a little bit longer.
Ciao
Roly
Hi Roly, the fixed image being revealed from the bottom up has been bugging me for days. I can get the bottom image to reveal but I just can't get the top image to work at all. Here's the progress so far.
Hi guys, I'm up to v8, that's enough tomato juice for a day. I'm still using a parallax because I have no other solutions. I think it's a bit better than v7, but no way near as clean as Ian's example. Egg I played with your example but I have nothing more to add.
Ciao
Roly
Hi guys, no more parallax, getting closer. Time for some shut eye. See attachment.
Ciao
Roly
Sterling effort, gentlemen!
The perplexing thing is those images in the middle of the page. It's like those 'before/after' images where you slide the line across the two images to reveal one and hide the other.
Here's an example.
http://thenewcode.com/819/A-Before-A...ntrol-in-HTML5
Except here, it is happening with the page scroll - which I think is clever and looks real cool!
Perhaps the above example sheds a clue?
That looks really good Roly! Getting very close. I still have to look how you did it....
Thanks Boy, but we are not there yet.
Ciao
Roly
Hi Egg, I went back to look at the attachment you sent me and I have now incorporated some of the elements in the test site, and there are some good results. I now have to play around with the other stuff to get everything synchronized. I will come back once finished. Thank you very much for providing what I believe was the missing link.Quote:
Originally Posted by Egg Bramhill
Ciao
Roly
Roly, as you're doing all this work, it might be nice to make a mini tut out of it.
Hi Boy, I have no idea how to make a mini tut but once finished I will give some explanations on the key elements. Sorry
Ciao
Roly
Ciao
Roly
Well, "mini tut" is a fancy phrase for "some explanations." ;)