Sideways parallax scroll


#1

I am trying to write an sideways parallax scroll ( like https://en.wikipedia.org/wiki/File:Parallax_scrolling_example_scene.gif )

This code works awesome on the web but in my NS app its embarrassing slow. Any one got idea how to write smooth parallax scroll for NS. Is there any native api’s that could solve this instead of angular code?

See my angular 2 code bellow.

–Controller

import { Component, OnInit, ElementRef, ViewChild } from “@angular/core”;

@Component({
    selector: “ns-parallax”,
    moduleId: module.id,
    templateUrl: “./parallax.component.html”,
    styleUrls: [‘./parallax.css’]
})
export class ItemsComponent implements OnInit {
    @ViewChild(“layer1") layer1: ElementRef;
    @ViewChild(“layer2”) layer2: ElementRef;
    @ViewChild(“layer3") layer3: ElementRef;

    layer1Position: number = 0;
    layer2Position: number = 0;
    layer3Position: number = 0;

    ngOnInit(): void {
        setInterval(() => {
            this.layer3Position++;
            this.layer1.nativeElement.style.backgroundPosition = this.layer1Position + “px 0px”;
        }, 3);

        setInterval(() => {
            this.layer2Position++;
            this.layer2.nativeElement.style.backgroundPosition = this.layer2Position + “px 0px”;
        }, 2);

        setInterval(() => {
            this.layer3Position++;
            this.layer3.nativeElement.style.backgroundPosition = this.layer3Position + “px 0px”;
        }, 1);
    }

}

–View

<GridLayout rows=“*” columns=“*”>
    <StackLayout>
        <Image #layer3 class=“layer”></Image>
        <Image #layer2 class=“layer”></Image>
        <Image #layer1 class=“layer”></Image>
    </StackLayout>
</GridLayout>

–Stylesheet

.layer {
    background-image: url(“~/images/space.jpeg”);
}

#2

How about setting the interval at at least 16ms (60fps), and add 1 or 2ms to each of the two other intervals.

Right now you are changing 3 different properties of 3 different IMAGEs, 1000 + 1000/2 + 1000/3 times every second. I am not sure it is supposed to be quick, by mobile standards.

You could also consider using css animations, which is a more natural way to animate views, and native properties are not modified as often.


#3

I tried first to get this work with css keyframe anination but it failed because background-image is not working together with keyframe animations.

My goal is to have an endless loop.