Skrollr background images disappear when changed

Question

Im trying to do an animation with skrollr, but when the background-images are changing they disappear for a short time, sometimes when the server lags for a sec they disappear completely until I scroll back and forwards again.

Heres the code im using:

@-skrollr-keyframes name {
    1100 {background: url(img/heads/picture1.png) no-repeat;}
    1101 {background: url(img/heads/picture2.png) no-repeat;}
}

BTW: The div that contains the background image is inside a moving div. Any way to fix this issue?

EDIT: Every background image which is animated is flickering alot!

PS: Sorry for my bad english, im german.

maybe add some js to prevent it from happening ? maybe load all assets before running skrollr? — naeluh, Dec 05 '13 at 21:57
https://github.com/Prinzhorn/skrollr#preventing-interpolation — Prinzhorn, Dec 06 '13 at 08:39

score 0 · Answer 1 · answered Oct 10 '14 at 14:50

First of all, from skrollr's documentation, skrollr doesn't know how to animate in between images. To take care of this issue, you need to add an exclamation mark before the css property of the url like below

background: !url(img/heads/picture1.png) no-repeat;

See source here

For the flickering images, consider preloading all the images before you render anything on the DOM. Try this,

var images = new Array()
        function preload() {
            for (i = 0; i < preload.arguments.length; i++) {
                images[i] = new Image()
                images[i].src = preload.arguments[i]
            }
        }
        preload(
            "img-path/imagename.jpg",
            "img-path/imagename.jpg",
            "img-path/imagename.jpg",
            "img-path/imagename.jpg",
            "img-path/imagename.jpg"
        )

Hope it helps, good luck!

Skrollr background images disappear when changed

1 Answers1