www.wysiwygwebbuilder.com

[rz] Parallax v1.2

This extension allows you to have a layered image in a parallax effect context.
Also a whole design can be embbeded!

DEMO

HTML 4.01 Transitional
W3C compliant


* New in version 1.2

- Default, full width, full height and full size modes support.
- Less resource-intensive core.

* New in version 1.1

- Added RWD support.
- Resized extension instance won't distort the images.
- Embedded objects (usually a masterpage) are always fixed (floating support removed).
- Embedded objects has nine possible alignments (left, center, right and top, center, bottom) with additional horizontal and vertical offsets.
- The movable part of the layered image is defined by a percentage based on the original object size allowing both RWD and fluid schemes.
- Smoother effect performance.
- Custom fade-in startup (once all the images are ready).
- Custom delayed startup (extra time until the object is shown once the images are fully loaded).
- Images can overflow the container limits or can be strictly delimited by the extension size.
- Axis lock.
- Axis inverted scrolling.
- jQuery removed and replaced with pure JavaScript for faster loading times.
- Obsolete properties and custom 'Fixes' category were removed as the code was improved.
- Small dot bug fixed.


How to use?

You must have your previously designed your images set, this means the layered image; up to five layers are allowed!
Add your images and set-up the container size and the images size.
Set-up a few factors like smoothness and distance.
That's all!

How to embed a whole design as a part of the parallaxed image?

Open a new page.
Start your design as you usually do.
Go back to the page containing the parallaxed image.
Drag and drop a master page object and let it point to your design.
Now tell to the parallax object the master page ID that contains your design.
That's all!

Enjoy!

Nice one again

Hans

thank you!

Thank you, thank you, thank you!!!

Nice work Rz! cheers buddie, keep up the great work!




Cheers,
Scott

thank you for your encouraging words.

Wow...!!! Yoy did it again man!!!
Have a good day.
Joe

thank you joe!

this is a generic parallax extension.
you can embed a masterpage (may also be an almost "whole" functional design and not just images).
you can make something similar (not an exact replica) to the links you provided here.
but you will probably need more tools like:
layers management: viewtopic.php?f=42&t=45904
custom scrollbars: viewtopic.php?f=42&t=47293
i didn't try yet the parallax as a fullsize background, but may this be useful? viewtopic.php?f=42&t=47440
if the site grows up you may need a preloader: viewtopic.php?f=42&t=46020
please note that these sites use a customized parallax effect, i mean it was coded specially for those sites. and what i did is a generic (but also flexible) extension.

the norway site uses jquery functions to embed/change options/pages

the images you took from a site that offers a parallax routine haven't the same size, in this extension, all images must have the same size (i.e. the sun image is stretched).
also you entered a non existent image (level 5), if you don't have five levels, leave this property empty.
these images (i meant those you took from the other site), are intended for use as an horizontal only parallax effect. so you must resize the extension to the same vertical size of the images, but you must edit them and make them the same horizontal and vertical size.

don't worry and feel free to post your questions, i will try to do my best! (but this doesn't mean that i will build your site for you )

Hi

This parallax is truly amazing! Is there any way you could do a tutorial on how you did the demo you posted? I have it in my WWB but the images are moving only very slightly. I have the images the same size but still the same.

So please can you do a tutorial! It would be very very much appreciated!

Kev

in order to simplify and reduce the code, in this extension all the images must be the same size.
each image must have the proper transparent zones.
the container must be smaller than the images (this gives space to move).
the final image is a set of layered images.
that's all.

http://en.wikipedia.org/wiki/Parallax
http://www.eg.bucknell.edu/physics/astr ... allax.html

hope this helps and thank you for your words.

Ah, Ive got it now RZ - many thanks. It was the container size that was wrong! I will spend the next few days constructing/tweaking this really great extension.

from the previous posts:

in order to simplify and reduce the code, in this extension all the images must be the same size.
each image must have the proper transparent zones.
the container must be smaller than the images (this gives space to move).
the final image is a set of layered images.
that's all.

this extension -or some other- may come without a demo, what i meant is that according to your posts in my extensions you tend to ask questions without a previous read.

hello malachi
thank you for you interest in my extension
please contact the wb support, your issue is not related to the extension itself

follow this link please: http://www.magnawebstudio.com/shop

if its free for wb users?

hello
this section of the forum is for paid extensions
please use the following link: www.magnawebstudio.com/shop
the mediafire link is not available as stated here: www.magnawebstudio.com/developer
regards

An email has been sent to you.
Please note that this is not the extension you are referring to in you mail.

[RZ] wrote:hello
this section of the forum is for paid extensions
please use the following link: http://www.magnawebstudio.com/shop
the mediafire link is not available as stated here: http://www.magnawebstudio.com/developer
regards

The correct link is http://www.magnawebstudio.com/en-developer.html

Hope this helps [Rz] keep up the good work

thanks FX3D
the user posted his question but referring to other similar extension thread
anyhow an email has been sent to him as he posted here and also sent me an email

btw thank you for your words as i'm assuming that you are giving feedback in a way

Is it possible that images stays in the original dimensions and without point in the down/left corner?

sorry, i dont understand your question

So, I have two images in parallax. Both dimension are 100x100 and both images have some point in a left/down corner.
I will like images in original size and without point in a left/down corner

This is link to pic: https://www.dropbox.com/s/7qwunty3aehux ... x.jpg?dl=0

sorry, i don't understand
with the extension you can do as in the online demo
also you can have the option to only scroll horizontally, vertically, or both
of course with the ratios you want

I see. :/
I thought I would be able to make that object (picture) move to the cursor like a circles on this page.
http://www.culturalsolutions.co.uk/

yes, it can be done with this extension

.... but why every image have black point in the left/down corner?
Also in Parallax extension objects moves in oposite way of cursor?

as is stated in the attached info file, you need to design your layered image, it is a set of overlayed images that compose the final one, each one with transparencies, as in the online demo
with this one you move the circles with the mouse move, and in the other parallax you need to add enough content to scroll the page and the selected elements will scroll at their own ratios

What is little black point in the down/left corner of every image?

i dont know, these images are not provided with the extension, even the link is not related to my extension

I talking about this picture: https://www.dropbox.com/s/7qwunty3aehux ... x.jpg?dl=0
This pic. shows two images in your Parallax extension. Both have little black point in the down/left corner?!

i have no way to know what has been done with those images and my extension
do you have that project file?

I'll do and then I'll send you.

please add the following in the head section:

<style>#Extension1 li{list-style-type:none}</style>

replace Extension1 with the actual name
this will be solved in the next version (besides other features of course)

Now is okey

While you do update, can you make also that objects moving in the direction of the cursor?
It would be good than we can choose direction?

the objects move with the cursor...

Yes. In the oposite way and this is ok, but will be cool if we can set that objects move in oposite way than now. Like here: http://www.culturalsolutions.co.uk/

the extension works as in the link you provided
next version will also have a mirror behavior

UPGRADE AVAILABLE:

* New in version 1.1:

- Added RWD support.
- Resized extension instance won't distort the images.
- Embedded objects (usually a masterpage) are always fixed (floating support removed).
- Embedded objects has nine possible alignments (left, center, right and top, center, bottom) with additional horizontal and vertical offsets.
- The movable part of the layered image is defined by a percentage based on the original object size allowing both RWD and fluid schemes.
- Smoother effect performance.
- Custom fade-in startup (once all the images are ready).
- Custom delayed startup (extra time until the object is shown once the images are fully loaded).
- Images can overflow the container limits or can be strictly delimited by the extension size.
- Axis lock.
- Axis inverted scrolling.
- jQuery removed and replaced with pure JavaScript for faster loading times.
- Obsolete properties and custom 'Fixes' category were removed as the code was improved.
- Small dot bug fixed.

How we get updates?
Was I seeing this correctly or update I have to pay 5$?

you changed your post and i answered your question about where users can order upgrades
for further questions about other upgrade details please contact here: http://www.magnawebstudio.com/shop

Do I have to pay for update 5$?
Yes or No?

* New in version 1.2

- Default, full width, full height and full size modes support.
- Less resource-intensive core.