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 Objects


The most lightweight and simple solution to have amazing parallax background objects.
Supports both horizontal and vertical algorithms!
Maximum cross-browser and backward compatibility.
No jQuery required.


HTML 4.01 Transitional
W3C compliant


DEMO


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

* NEW in version 1.0.0.4:

- Added support for RWD.
- Improved horizontal and vertical parallax algorithm.
- Added "move back" feature for an object; this allows to put it back and, if applies, outside the container
  for an easier parallax background configuration.

* NEW in version 1.0.0.3:

- Non-full-width objects/layers can be "parallaxed" even on centered pages preserving their relative position.

* NEW in version 1.0.0.2:

- "Sleep" points:
  This is the complement of the previously implemented "wake-up" points.
  Means within how many pixels must be scrolled the browser so as the parallax effect can take place:
  if the pixels amount is not reached yet, the object remains fixed;
  if the pixels amount is beyond the limit, the object remains fixed again.

- Bounds source:
  Is the source of the active area in which the parallax effect takes effect.
  The source can be the setup in the objects list (wake-up and sleep points) or the size of the extension, which acts
  as a "mapper"; this method is the same as in the [rz] PFO extension.

* NEW in version 1.0.0.1

- "Wake-up" points:
  How many scrolled down (horizontal and/or vertical) pixels are required to activate the parallax effect to an object.
  Objects are initially fixed, once the "scroll level" is reached, objects start to move according to the selected ratio.
  Zero means that the effect is immediately applied.



How to use?

1. Drag and drop all the objects you want to parallax: layers, images, shapes, etc...
   (of course, forget the 'wb_' prefix and the like, all is done automatically).
2. Drag and drop the [rz] Parallax Objects extension.
3. Setup the objects ids and their scroll rate (%), vertical, horizontal or both; the default
    is 100 and means normal scroll (no effect).
4. Setup the page width and length: use some page format -page properties / center page
   (even align to left is useful)-, recommended; set the page size and lock the page width and
    height -menu / tools / arrange / guide settings- to avoid automatic size adjustments, also
    recommended.

Enjoy!


Notes:
- Intrinsically supports also IE5; however, depends on the complexity level of the page scheme
  and other used features that may not be supported in that version.
w3c compliant
© 2012-17 by MAGNA web studio • all rights reserved


new shop with