[rz] Parallax (image and container!) *** UPD 2017-Apr-12 ***

[RZ] · Post by **[RZ]** » Wed May 09, 2012 7:42 pm

[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!

haakoo · Post by **haakoo** » Wed May 09, 2012 8:52 pm

Nice one again

Hans

[RZ] · Post by **[RZ]** » Wed May 09, 2012 9:54 pm

thank you!

[RZ] · Post by **[RZ]** » Thu May 10, 2012 6:14 am

Thank you, thank you, thank you!!!

madebyibloo · Post by **madebyibloo** » Thu May 10, 2012 9:14 am

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

Cheers,
Scott

[RZ] · Post by **[RZ]** » Thu May 10, 2012 9:44 am

thank you for your encouraging words.

stamjoe · Post by **stamjoe** » Sat May 12, 2012 9:02 am

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

[RZ] · Post by **[RZ]** » Sat May 12, 2012 6:39 pm

thank you joe!

[RZ] · Post by **[RZ]** » Sun Jun 24, 2012 6:55 am

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

)

Kev Loomes · Post by **Kev Loomes** » Thu Sep 06, 2012 9:28 pm

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

[RZ] · Post by **[RZ]** » Thu Sep 06, 2012 9:56 pm

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.

Kev Loomes · Post by **Kev Loomes** » Fri Sep 07, 2012 7:47 pm

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.

[RZ] · Post by **[RZ]** » Thu Feb 07, 2013 8:43 am

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.

[RZ] · Post by **[RZ]** » Thu Feb 07, 2013 9:29 pm

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.

[RZ] · Post by **[RZ]** » Sat May 11, 2013 6:13 pm

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

[RZ] · Post by **[RZ]** » Wed Jul 30, 2014 6:39 pm

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

sikhoonak2 · Post by **sikhoonak2** » Sun Aug 03, 2014 1:24 am

if its free for wb users?

[RZ] · Post by **[RZ]** » Sun Aug 03, 2014 4:41 am

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

[RZ] · Post by **[RZ]** » Mon Sep 15, 2014 11:20 am

www.magnawebstudio.com/shop

[RZ] · Post by **[RZ]** » Mon Oct 27, 2014 2:43 pm

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

FX3D · Post by **FX3D** » Mon Oct 27, 2014 8:07 pm

[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

[RZ] · Post by **[RZ]** » Mon Oct 27, 2014 8:42 pm

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

naftalina · Post by **naftalina** » Fri Nov 14, 2014 1:23 pm

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

[RZ] · Post by **[RZ]** » Fri Nov 14, 2014 2:09 pm

sorry, i dont understand your question

naftalina · Post by **naftalina** » Fri Nov 14, 2014 2:52 pm

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

[RZ] · Post by **[RZ]** » Sat Nov 15, 2014 4:14 pm

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

naftalina · Post by **naftalina** » Sat Nov 15, 2014 4:24 pm

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/

[RZ] · Post by **[RZ]** » Sat Nov 15, 2014 4:25 pm

yes, it can be done with this extension

naftalina · Post by **naftalina** » Sat Nov 15, 2014 4:29 pm

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

[RZ] · Post by **[RZ]** » Sat Nov 15, 2014 4:31 pm

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

naftalina · Post by **naftalina** » Sat Nov 15, 2014 4:44 pm

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

[RZ] · Post by **[RZ]** » Sat Nov 15, 2014 4:50 pm

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

naftalina · Post by **naftalina** » Sat Nov 15, 2014 4:58 pm

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?!

[RZ] · Post by **[RZ]** » Sat Nov 15, 2014 5:04 pm

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

naftalina · Post by **naftalina** » Sat Nov 15, 2014 5:06 pm

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

naftalina · Post by **naftalina** » Sat Nov 15, 2014 5:08 pm

https://www.dropbox.com/s/ln8pn1cnw5n4c ... x.zip?dl=0

[RZ] · Post by **[RZ]** » Sat Nov 15, 2014 5:23 pm

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)

naftalina · Post by **naftalina** » Sat Nov 15, 2014 5:42 pm

Now is okey

[RZ] · Post by **[RZ]** » Sat Nov 15, 2014 5:45 pm

naftalina · Post by **naftalina** » Sat Nov 15, 2014 5:47 pm

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?

[RZ] · Post by **[RZ]** » Sat Nov 15, 2014 5:49 pm

the objects move with the cursor...

naftalina · Post by **naftalina** » Sat Nov 15, 2014 5:58 pm

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/

[RZ] · Post by **[RZ]** » Sat Nov 15, 2014 6:03 pm

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

[RZ] · Post by **[RZ]** » Mon Nov 17, 2014 3:24 pm

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.

naftalina · Post by **naftalina** » Mon Nov 17, 2014 3:46 pm

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

[RZ] · Post by **[RZ]** » Mon Nov 17, 2014 3:52 pm

www.magnawebstudio.com/shop

[RZ] · Post by **[RZ]** » Mon Nov 17, 2014 3:54 pm

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

naftalina · Post by **naftalina** » Mon Nov 17, 2014 3:59 pm

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

[RZ] · Post by **[RZ]** » Mon Nov 17, 2014 4:03 pm

[RZ] wrote:for further questions about other upgrade details please contact here: http://www.magnawebstudio.com/shop

[RZ] · Post by **[RZ]** » Wed Apr 12, 2017 12:06 am

* New in version 1.2

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