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] Background Scroller


This lightweight extension creates multi-directional animated backgrounds based on layered images that gives a constant 'parallax' effect with variable speeds. It can also be used to show seamless moving patterns and supports smooth background colors variations.

Some features:

- Multidirectional seamless movements with custom timing.
- Smooth background colors variations with custom timing and cycles variations with delays.
- Advanced alignments handling.
- Variable transparencies levels.
- Custom patterns.
- Fixed, RWD and fluid support.
- Maximum cross-browser and backward compatibility.
- Lightweight, no additional dependencies, no jQuery required.

...and more!


HTML 4.01 Transitional
W3C compliant


DEMO


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

* New in version 1.1.1

- Fixes some performance issues.
- Step units: fixed pixels or instance size percentages.
- Sequence modes: directional and bounce.
- Sequence factor: optional delayed sequence.
- Improved 'Optimize resources mode' feature; now detects when the browser is not the active window and
  when the instance is outside of the viewport releasing more CPU resources.

* New in version 1.1

- Support for no-images mode to allow transitions between solid background colors.
- Step mode effects: fast, ease, ease-in, ease-out, ease-in-out and linear for each background image; requires modern
   browsers and higher values for 'step' and 'factor' so that the effect is perceptible (with fallback for browsers that
   do not support this type of transitions).
- Optimize resources mode that optionally halts the instance when the browser is not active (useful for 'heavy' schemes).

* New in version 1.0.0.1

- Improved stack handling feature.
- Improved behavior/alignment within layers with alignments.
- Workaround for a height issue (not related to the extension itself).


How to use?

1. Drag and drop an extension instance (it can be within a layer).
2. Open the properties dialog and enter the images with their respective parameters.
3. Setup the variable background colors.
4. Preview or publish.

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


new shop with