magna
Follow @magnawebstudio on Twitter Follow @magnawebstudio on Twitter
Follow /magnawebstudio on LinkedIn Follow /magnawebstudio on LinkedIn
awarded site
BS"D
magna web studio
Contact us! Contact us!
WB-Developers' Corner
WB-Developers' Corner
       [rz] Parallax


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


HTML 4.01 Transitional
W3C compliant


DEMO


* Just a brief about some of the changes that were made lately...

* 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 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 the parallax object the master page ID that contains your design.
That's all!

Enjoy!
w3c compliant
© 2012-17 by MAGNA web studio • all rights reserved


new shop with