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,"offsetTop":0,"parallax":0.2, "transition":"0s linear"}'></div>

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,"offsetTop":0,"parallax":-0.3}'>
    Background-Clip Text 
</h1>	

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>