www.wysiwygwebbuilder.com

[rz] PCT v1.2

Page Position Color Transition (aka "PCT").
The easiest solution to manipulate the background color of an object according to the browser scrollbar position with a really smooth transition.
How to use? Please see the included sample project file, it is self descriptive...

- Smooth background colors transition.
- Alpha values transition (transparency levels preserving the child objects opacity).
- A single instance can apply to several objects with the same settings.
- Multiple instances for different objects.
- Multiple instances to the same object for multiple/chained colors transitions.
- BONUS: [rz] PCT (cssmenu) extension works with the CSS Menu object!


DEMO


HTML 4.01 Transitional
W3C compliant


* New in version 1.2

- Improved objects handling.
- Added support for body and layout backgrounds.
- Improved backgrounds support for images (the image itself should be a gif or png with transparencies), masterobjects, pageheader/footer, carousel, table, text, form, editbox, etc...

* New in version 1.1

Added support for RWD.

Last-minute bonus: [rz] PCT (cssmenu).
This extension works with the CSS Menu object; colors transitions can be applied to backgrounds, texts and borders and supports both menus and submenus.
(updated demo)

UPGRADE AVAILABLE

* NEW in version 1.1:

Added support for RWD.

Is there a setting to snap to color transitions with rz-position-color-transition?
Or is it required that the color makes a gradual transition from color A to B?
I'm ok with the gradual transition, but would like the flexibility to sometimes snap immediately from color A to B when reaching a particular point in the scrolling process.
If it's possible, please let me know the setting - I haven't found it yet.
Great extension, btw.
Thank you - from Peter

thanks for the feedback
about your question you can do it with more than one method, and it depends on the complexity of your approach
the basic principle can be "the shorter your instance is, the fastest transition will be"
this means that 1px height results in a no-color-transition, that is an immediately color change

Perfect, yes I see that now. I can just drag the size of the extension to determine the duration.
Excellent and amazing design, thank you.

* New in version 1.2

- Improved objects handling.
- Added support for body and layout backgrounds.
- Improved backgrounds support for images (the image itself should be a gif or png with transparencies), masterobjects, pageheader/footer, carousel, table, text, form, editbox, etc...