Testowy head

Lorem ipsum

Poniżej prezentujemy blok G44 Motion Background Layers, który pozwala na tworzenie ruchomych warstw graficznych. Animacja może być skorelowana z ruchem kursora lub przewijaniem strony. Rozsuwające się i powiększające logo w górnej części strony g44.pl zostało zbudowane w oparciu o ten blok.

Test parallaxy w cover

!

Test parallaxy w html

useCSSVars: false

Test parallaxy w html

useCSSVars: true

Test parallaxy w html

useCSSVars: true

Scenariusz 1

Losowe dryfowanie
bez względu na kursor ani scroll.

Fusce ac dictum nisl, vel molestie metus. Nam egestas orci ut luctus bibendum. Fusce quis turpis sit amet urna porttitor ornare. Morbi pellentesque felis id ex pulvinar, dictum vestibulum felis blandit. Ut ac sem eget lectus efficitur scelerisque. Proin porttitor lacus mauris, in vulputate arcu consectetur suscipit. Aliquam ut ex dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elementum magna nec ex porta, quis egestas dui molestie. In est mauris, convallis ut justo eu, dapibus sodales massa. Proin varius ex in elit pretium, vitae sollicitudin libero feugiat. Morbi vel purus urna. Etiam scelerisque rutrum nisl eu placerat. Nulla pellentesque mi ac consectetur venenatis. Cras pellentesque turpis vitae libero porta scelerisque. Nulla maximus tincidunt felis, non venenatis lorem efficitur auctor.

Scenariusz 2

Przewijanie strony (scroll)
wpływa na ruch warstw.

Fusce ac dictum nisl, vel molestie metus. Nam egestas orci ut luctus bibendum. Fusce quis turpis sit amet urna porttitor ornare. Morbi pellentesque felis id ex pulvinar, dictum vestibulum felis blandit. Ut ac sem eget lectus efficitur scelerisque. Proin porttitor lacus mauris, in vulputate arcu consectetur suscipit. Aliquam ut ex dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elementum magna nec ex porta, quis egestas dui molestie. In est mauris, convallis ut justo eu, dapibus sodales massa. Proin varius ex in elit pretium, vitae sollicitudin libero feugiat. Morbi vel purus urna. Etiam scelerisque rutrum nisl eu placerat. Nulla pellentesque mi ac consectetur venenatis. Cras pellentesque turpis vitae libero porta scelerisque. Nulla maximus tincidunt felis, non venenatis lorem efficitur auctor.

Slajd z animacją w tle 0

Przewijanie strony (scroll)
wpływa na ruch warstw.

Slajd z animacją w tle 1

Losowe dryfowanie
bez względu na kursor ani scroll.

Slajd z animacją w tle 2

Przewijanie strony (scroll)
wpływa na ruch warstw.

Fusce ac dictum nisl, vel molestie metus. Nam egestas orci ut luctus bibendum. Fusce quis turpis sit amet urna porttitor ornare. Morbi pellentesque felis id ex pulvinar, dictum vestibulum felis blandit. Ut ac sem eget lectus efficitur scelerisque. Proin porttitor lacus mauris, in vulputate arcu consectetur suscipit. Aliquam ut ex dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elementum magna nec ex porta, quis egestas dui molestie. In est mauris, convallis ut justo eu, dapibus sodales massa. Proin varius ex in elit pretium, vitae sollicitudin libero feugiat. Morbi vel purus urna. Etiam scelerisque rutrum nisl eu placerat. Nulla pellentesque mi ac consectetur venenatis. Cras pellentesque turpis vitae libero porta scelerisque. Nulla maximus tincidunt felis, non venenatis lorem efficitur auctor.

Scenariusz 3

Losowe dryfowanie podczas bezczynności.
Po wykryciu ruchu kursora następuje podążanie za nim, ale w tym przypadku tylko w osi pionowej.

Fusce ac dictum nisl, vel molestie metus. Nam egestas orci ut luctus bibendum. Fusce quis turpis sit amet urna porttitor ornare. Morbi pellentesque felis id ex pulvinar, dictum vestibulum felis blandit. Ut ac sem eget lectus efficitur scelerisque. Proin porttitor lacus mauris, in vulputate arcu consectetur suscipit. Aliquam ut ex dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elementum magna nec ex porta, quis egestas dui molestie. In est mauris, convallis ut justo eu, dapibus sodales massa. Proin varius ex in elit pretium, vitae sollicitudin libero feugiat. Morbi vel purus urna. Etiam scelerisque rutrum nisl eu placerat. Nulla pellentesque mi ac consectetur venenatis. Cras pellentesque turpis vitae libero porta scelerisque. Nulla maximus tincidunt felis, non venenatis lorem efficitur auctor.

Scenariusz 4

Powiększanie warstw
podczas przewijania strony.

Fusce ac dictum nisl, vel molestie metus. Nam egestas orci ut luctus bibendum. Fusce quis turpis sit amet urna porttitor ornare. Morbi pellentesque felis id ex pulvinar, dictum vestibulum felis blandit. Ut ac sem eget lectus efficitur scelerisque. Proin porttitor lacus mauris, in vulputate arcu consectetur suscipit. Aliquam ut ex dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elementum magna nec ex porta, quis egestas dui molestie. In est mauris, convallis ut justo eu, dapibus sodales massa. Proin varius ex in elit pretium, vitae sollicitudin libero feugiat. Morbi vel purus urna. Etiam scelerisque rutrum nisl eu placerat. Nulla pellentesque mi ac consectetur venenatis. Cras pellentesque turpis vitae libero porta scelerisque. Nulla maximus tincidunt felis, non venenatis lorem efficitur auctor.

Scenariusz 5

Po wykryciu ruchu kursora następuje podążanie za nim w dowolnym kierunku.

Fusce ac dictum nisl, vel molestie metus. Nam egestas orci ut luctus bibendum. Fusce quis turpis sit amet urna porttitor ornare. Morbi pellentesque felis id ex pulvinar, dictum vestibulum felis blandit. Ut ac sem eget lectus efficitur scelerisque. Proin porttitor lacus mauris, in vulputate arcu consectetur suscipit. Aliquam ut ex dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elementum magna nec ex porta, quis egestas dui molestie. In est mauris, convallis ut justo eu, dapibus sodales massa. Proin varius ex in elit pretium, vitae sollicitudin libero feugiat. Morbi vel purus urna. Etiam scelerisque rutrum nisl eu placerat. Nulla pellentesque mi ac consectetur venenatis. Cras pellentesque turpis vitae libero porta scelerisque. Nulla maximus tincidunt felis, non venenatis lorem efficitur auctor.