Last change: November 14, 2019

Current version: 1.4.0

Module parallaxScreens devides a list into screens, shown one at a time

syntax

webanizr.collect('parallaxScreens', parameters, callback);

parameters

The collect method of dragAndDrop accepts the following parameters.

id__dom (required)

The id of the div of which the screens are the children.

list__screens (optional)

The list of screens to be affected by this module. The syntax is:

{
    'id-div1' : {
        ...
    },
    'id-div2' : {
    },
    ...
}

for each div, properties can be set. The following properties are supported:

list__css (optional)

The list css defines the css for the screen and elements in it. Example:

{
    'id-div1' : {
         list__styles : {
             "screen" : "opacity: 0 1 0",
              #screen2 span' : "margin-left : 10px 30px 10px, margin-right : 10px 30px 10px",
              ...

The key of each item is the query selector of the items to style. The key "screen" refers to the div it self. As value the css styling is defined. The different properties are comma seperated. Each property has 3 values. The first value is the inital value. The second value is the value to use when the screen comes into view. The third value is the value to apply when the screen goes out of view.

time__scrollpause (optional)

The number of miliseconds you need to stop scrolling before the screen snaps.

log__triggers (optional)

If set to true, debugging information about the triggers and scrolling will be shown in the console log of the browser.

callback

The callback is called when setting the screens up is finished.

demo

https://cdn.cpmodules.webanizr.com/demo/parallax-screens/index.html

changelog

• November 14, 2019: 1.4.0 - "document" now supported as query selector and introduced the log__triggers parameter for debugging
• October 28, 2019: 1.1.0 - introduced time__scrollpause for a better UX
• October 28, 2019: 1.0.0 - first version