@@include('./src/components/ES6/_global/include-header.html')
@@include('./src/components/ES6/_global/include-loader.html') @@include('./src/components/ES6/_global/include-toggle-trigger.html')

### Parallax Background

Use the `data-bg` attribute to set the background and parallax effect. E.g.

    HTML<div style="width:300px;height:300px;" data-bg='{"src":"assets/images/demo/cool-slider-3.jpg","position":"top left","size":"cover","repeat":"no-repeat","fill":false,"parallax":0.2, "transition":"0s linear"}'></div>

## height: 450px

### Background Text

Use the following sample code to achieve the following effects:

    HTML<h1 class="uix-relative" data-bg='{"src":"assets/images/demo/cool-slider-1.jpg","position":"top left","size":"cover","repeat":"no-repeat","fill":true,"parallax":-0.3}'>
        Background-Clip Text
    </h1>

# Background-Clip Text

### Movement Animation

Continuous position movement in different directions. E.g.

    HTML<div class="uix-relative" data-bg='{"src":"assets/images/demo/templates.jpg","size":"auto","repeat":"repeat","move":{"dir":"right","speed":"350","easing":"linear","loop":true}}' style="height: 450px;">
        <div class="uix-overlay uix-overlay--black uix-overlay--cover">
            <div class="uix-v-align--table">
                <div>
                    <h2 class="uix-typo--color-white uix-t-c">Text Here</h2>
                </div>
            </div>
        </div>
    </div>

## height: 450px (Move infinitely to the left)

## height: 450px (Move infinitely to the right)

## height: 450px (Move infinitely to the top)

## height: 450px (Move infinitely to the bottom)

@@include('./src/components/ES6/_global/include-copyright.html')
@@include('./src/components/ES6/_global/include-footer.html')