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

In this section you can announce self-made paid extensions.
*** THIS SECTION CONTAINS PAID EXTENSIONS ONLY ***
User avatar
[RZ]
 
 
Posts: 2138
Joined: Tue Nov 04, 2008 12:08 pm

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

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!
Last edited by [RZ] on Wed Apr 12, 2017 12:02 am, edited 2 times in total.

haakoo
 
 
Posts: 233
Joined: Fri Apr 25, 2008 8:02 am
Location: Groningen/NL

Re: Parallax (image and container!)

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

Nice one again

Hans

User avatar
[RZ]
 
 
Posts: 2138
Joined: Tue Nov 04, 2008 12:08 pm

Re: Parallax (image and container!)

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

thank you!

gzagone
 
 
Posts: 25
Joined: Sun Nov 14, 2010 6:14 pm

Re: Parallax (image and container!)

Post by gzagone » Thu May 10, 2012 5:48 am

Wonderful, wonderful, wonderful!!!

User avatar
[RZ]
 
 
Posts: 2138
Joined: Tue Nov 04, 2008 12:08 pm

Re: Parallax (image and container!)

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

Thank you, thank you, thank you!!!
:lol:

User avatar
madebyibloo
 
 
Posts: 379
Joined: Fri Mar 27, 2009 3:58 pm
Location: East Yorkshire, United Kingdom
Contact:

Re: Parallax (image and container!)

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

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




Cheers,
Scott
Cheers,
Scott


creating the new, together.

User avatar
[RZ]
 
 
Posts: 2138
Joined: Tue Nov 04, 2008 12:08 pm

Re: Parallax (image and container!)

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

thank you for your encouraging words.

User avatar
stamjoe
 
 
Posts: 246
Joined: Sat Feb 09, 2008 10:32 am
Location: GREECE

Re: Parallax (image and container!)

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

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

User avatar
[RZ]
 
 
Posts: 2138
Joined: Tue Nov 04, 2008 12:08 pm

Re: Parallax (image and container!)

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

thank you joe!

User avatar
[RZ]
 
 
Posts: 2138
Joined: Tue Nov 04, 2008 12:08 pm

Re: Parallax (image and container!)

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 :lol: )

Kev Loomes
 
 
Posts: 7
Joined: Sun Apr 25, 2010 8:32 am

Re: Parallax (image and container!)

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

User avatar
[RZ]
 
 
Posts: 2138
Joined: Tue Nov 04, 2008 12:08 pm

Re: Parallax (image and container!)

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
 
 
Posts: 7
Joined: Sun Apr 25, 2010 8:32 am

Re: Parallax (image and container!)

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.

zotekW7
 
 
Posts: 76
Joined: Sat Oct 01, 2011 12:45 am
Location: san diego

Re: Parallax (image and container!)

Post by zotekW7 » Thu Feb 07, 2013 8:18 am

all image has to be desame sizes?

User avatar
[RZ]
 
 
Posts: 2138
Joined: Tue Nov 04, 2008 12:08 pm

Re: Parallax (image and container!)

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.

Post Reply

Who is online

Users browsing this forum: No registered users and 3 guests