<u1-parallax-bg> - element

Parallax backgrounds

Features

• fast!
• easy, declarative API
• works for dynamic added elements
• reduced background-container to the reachable area!
• css only fallback
• light weight

Ussage

<div class=u1-parallax-bg-stage style="height:10rem">
    <u1-parallax-bg>
        <div style="background: linear-gradient(#ffa, #aff)">TEST</div>
        <div style="background: linear-gradient(#afa, #aaa)">TEST</div>
    </u1-parallax-bg>
</div>

u1-parallax-bg {
    --parallax-bg-speed:.7
}
u1-parallax-bg div {
    display:grid;
    place-items: center;
}

Install

<link href="https://cdn.jsdelivr.net/gh/u1ui/[email protected]/parallax-bg.min.css" rel=stylesheet>
<script src="https://cdn.jsdelivr.net/gh/u1ui/[email protected]/parallax-bg.min.js" type=module>

Demos

demo.html
minimal.html
test.html
visible.html

Also interesting

Parallax scrolling Elements (not Backgrounds) https://github.com/u1ui/parallax.attr

About

• MIT License, Copyright (c) 2022 (like all repositories in this organization)
  
• Suggestions, ideas, finding bugs and making pull requests make us very happy. ♥