uix-kit

<!DOCTYPE html> <html lang="@@{website_lang}" dir="@@{website_dirLTR}"> <head> <meta charset="@@{website_charset}" /> <title>Background Interaction - @@{website_title}</title> @@include('./src/components/_global/include-header.html') </head> <body class="page"> @@include('./src/components/_global/include-loader.html') @@include('./src/components/_global/include-toggle-trigger.html') <div class="uix-wrapper">  <header class="uix-header__container"> <div class="uix-header"> <div class="container"> @@include('./src/components/_global/include-brand.html') @@include('./src/components/_global/include-menu.html') </div>  <div class="uix-clearfix"></div> </div> </header> <div class="uix-header__placeholder js-uix-header__placeholder-autoheight"></div> <main id="uix-maincontent">  <section class="uix-spacing--s uix-spacing--no-bottom"> <div class="container"> <div class="row"> <div class="col-12"> <h3>Parallax Background</h3> <p>Use the <code>data-bg</code> attribute to set the background and parallax effect. E.g.</p> <pre class="uix-precode"><label>HTML</label><code><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></code> </pre> </div> </div>  </div>  </section>  <section class="uix-spacing--s uix-spacing--no-top"> <div class="uix-relative" data-bg='{"src":"assets/images/demo/spiral-galaxy-1920x1080.jpg","position":"top left","size":"cover","repeat":"no-repeat","fill":false,"offsetTop":0,"parallax":0.3}' style="height: 450px;"> <div class="uix-v-align--absolute uix-t-c"> <div class="row"> <div class="col-12"> <h2>height: 450px</h2> </div> </div>  </div> </div> </section>  <section class="uix-spacing--s uix-spacing--no-bottom"> <div class="container"> <div class="row"> <div class="col-12"> <h3> Background Text </h3> <p>Use the following sample code to achieve the following effects:</p> <pre class="uix-precode"><label>HTML</label><code><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>	</code> </pre> </div> </div>  </div>  </section>  <section class="uix-spacing--s uix-t-c"> <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}' style="height: 150px;"> Background-Clip Text </h1> </section>  <section class="uix-spacing--s uix-spacing--no-bottom"> <div class="container"> <div class="row"> <div class="col-12"> <h3> Movement Animation </h3> <p>Continuous position movement in different directions. E.g.</p> <pre class="uix-precode"><label>HTML</label><code><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>	</code> </pre> </div> </div>  </div>  </section>  <section class="uix-spacing--s"> <div class="uix-relative" data-bg='{"src":"assets/images/demo/templates.jpg","size":"auto","repeat":"repeat","move":{"dir":"left","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">height: 450px (Move infinitely to the left)</h2> </div> </div> </div> </div> </section> <section class="uix-spacing--s"> <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">height: 450px (Move infinitely to the right)</h2> </div> </div> </div> </div> </section> <section class="uix-spacing--s"> <div class="uix-relative" data-bg='{"src":"assets/images/demo/templates.jpg","size":"auto","repeat":"repeat","move":{"dir":"top","speed":"350","easing":"linear","loop":true}}' style="height: 450px;"> <div class="uix-v-align--absolute uix-t-c"> <div class="row"> <div class="col-12"> <h2 style="box-shadow: 0 5px 15px 0 rgba(0,0,0,.07), 0 15px 35px 0 rgba(50,50,93,.1); background: #fff; padding: 3rem; display: inline-block;">height: 450px (Move infinitely to the top)</h2> </div> </div>  </div> </div> </section> <section class="uix-spacing--s"> <div class="uix-relative" data-bg='{"src":"assets/images/demo/templates.jpg","size":"auto","repeat":"repeat","move":{"dir":"bottom","speed":"350","easing":"linear","loop":true}}' style="height: 450px;"> <div class="uix-v-align--absolute uix-t-c"> <div class="row"> <div class="col-12"> <h2 style="box-shadow: 0 5px 15px 0 rgba(0,0,0,.07), 0 15px 35px 0 rgba(50,50,93,.1); background: #fff; padding: 3rem; display: inline-block;">height: 450px (Move infinitely to the bottom)</h2> </div> </div>  </div> </div> </section> </main> @@include('./src/components/_global/include-copyright.html') </div>  @@include('./src/components/_global/include-footer.html')