Changing Content with Parameters

In this example you can change the appearance and composition of the "Echo" Shot displayed on the background scrolling. Each section sets the Shot with a different set to Parameters sourced from the data attributes of its DOM ancestry.

All additional attributes with the data-pd- prefix are added to the Content Parameters.

NOTE

The -pd- prefix is only there so that unrelated data attributes are not sent into the Content changing functions and the prefix is removed automatically by the Plinthos system which is why data-pd-horizon="#6af" would have the same effect as { horizon: "#6af" } when using the JS Content control functions.

Red

<section
    data-pd-show="echo@background"
    data-pd-plinth-color="#f98"
    data-pd-echo-color="#f54"
    data-pd-nadir="#410"
    data-pd-horizon="#100"
    data-pd-bloom-threshold="0.2"
    >
    <!-- ... -->
</section>

Split

<section
    data-pd-show="echo@background"
    data-pd-plinth-color="#fff"
    data-pd-echo-color="#ccc"
    data-pd-zenith-offset="0.85"
    data-pd-zenith="#300"
    data-pd-horizon-offset="-0.4"
    data-pd-horizon="#030"
    data-pd-nadir="#003"
    data-pd-nadir-offset="0.85"
    data-pd-bloom-threshold="0.2"
    data-pd-x-chrom="0.3"
    data-pd-zoom="2"
    >
    <!-- ... -->
</section>

Ink

<section
    data-pd-show="echo@background"
    data-pd-plinth-color="#420"
    data-pd-echo-color="#630"
    data-pd-zenith="#eee"
    data-pd-horizon="#edc"
    data-pd-nadir="#543"
    data-pd-nadir-offset="0.2"
    data-pd-bloom-intensity="0"
    data-pd-bloom-radius="0"
    data-pd-bloom-threshold="1"
    data-pd-zoom="2"
    >
    <!-- ... -->
</section>

Default

<section data-pd-show="echo@background">
    <!-- ... -->
</section>

See how to set content with parameters using JS