Scrollorama parallax not working

Question

I am working on a Wordpress theme that has a parallax effect. On closer inspection, this theme is using the scrollorama script. (http://johnpolacek.github.io/scrollorama/)

When I initially downloaded the theme, the effect worked fine but since I have had to heavily customize this theme, the effect no longer works. The images that should move from A to B when scrolling are now just stuck at A and don't move. Clearly something I have done has put a spanner in the works but having never used scrollorama before, I am unsure what to look for.

I have looked at the original themes code specifically at the scrollorama parts and everything matches perfectly so has anyone got any ideas off the bat that could be causing the issue?

Could it simply be a compatibility problem? The only thing I am using other than scrollorama is an added image slider http://www.menucool.com/responsive-slider.aspx

This should be all the code that is being used for scrollorama:

HTML

<div class="scroll-block-wrapper">
    <div class="scrollblock">
        <div class="space-small-planet"></div>
        <div class="space-jupiter"></div>
        <div class="space-moon"></div>
        <div class="space-spaceship"></div>

        <div class="sky-sun"></div>
        <div class="sky-plane"></div>
        <div class="sky-clouds-1"></div>
        <div class="sky-clouds-2"></div>
        <div class="sky-clouds-3"></div>
        <div class="sky-clouds-4"></div>
        <div class="sky-clouds-5"></div>
        <div class="sky-clouds-6"></div>

        <!--waves and ship-->
        <div class="wave-1"></div>
        <div class="wave-2"></div>
        <div class="wave-3"></div>
        <div class="wave-4"></div>
        <div class="wave-5"></div>
        <div class="wave-6"></div>
        <div class="wave-7"></div>
        <div class="ship"></div>
        <div class="wave-8"></div>
        <div class="wave-9"></div>
        <div class="wave-10"></div>
        <div class="wave-11"></div>
        <div class="wave-12"></div>
        <div class="wave-13"></div>
        <div class="wave-14"></div>


        <div class="water-jellyfish"></div>
        <div class="water-fishes"></div>
        <div class="water-shark"></div>
    </div>
</div>

CSS

.scroll-block-wrapper {
overflow: hidden;
position: absolute;
width: 100%;
height: 100%;
left: 0;
}

.scrollblock {
position: absolute;
width: 1900px;
left: 50%;
margin-top: -20px;
margin-left: -950px;
}

.space-small-planet {
position: absolute;
top: 600px;
left: 311px;
width: 109px;
height: 108px;
background: url("/img/space-small-planet.png") 0 0 no-repeat;
}

.space-jupiter {
position: absolute;
top: 292px;
left: 67px;
width: 345px;
height: 238px;
background: url("/img/space-jupiter.png") 0 0 no-repeat;
}

.space-moon {
position: absolute;
top: 580px;
right: 39px;
width: 419px;
height: 416px;
background: url("/img/space-moon.png") 0 0 no-repeat;
}

.space-spaceship {
position: absolute;
top: 228px;
right: 238px;
width: 286px;
height: 167px;
background: url("img/space-spaceship.png") 0 0 no-repeat;
}

.sky-plane {
position: absolute;
top: 1510px;
right: -230px;
width: 224px;
height: 98px;
background: url("img/sky-plane.png") 0 0 no-repeat;
}

.sky-clouds-1 {
position: absolute;
top: 838px;
left: 293px;
width: 327px;
height: 106px;
background: url("img/sky-clouds-1.png") 0 0 no-repeat;
}

.sky-clouds-2 {
position: absolute;
top: 970px;
right: 46px;
width: 677px;
height: 171px;
background: url("img/sky-clouds-2.png") 0 0 no-repeat;
}

.sky-clouds-3 {
position: absolute;
top: 1632px;
left: 129px;
width: 605px;
height: 135px;
background: url("img/sky-clouds-3.png") 0 0 no-repeat;
}

.sky-clouds-4 {
position: absolute;
top: 1950px;
left: 60px;
width: 253px;
height: 81px;
background: url("img/sky-clouds-4.png") 0 0 no-repeat;
}

.sky-clouds-5 {
position: absolute;
top: 2220px;
left: 149px;
width: 346px;
height: 253px;
background: url("img/sky-clouds-5.png") 0 0 no-repeat;
}

.sky-clouds-6 {
position: absolute;
top: 2380px;
right: 192px;
width: 215px;
height: 104px;
background: url("img/sky-clouds-6.png") 0 0 no-repeat;
}

.sky-sun {
position: absolute;
top: 1800px;
right: 80px;
width: 876px;
height: 871px;
background: url("img/sky-sun.png") 0 0 no-repeat;
}

.water-jellyfish {
position: absolute;
top: 5090px;
right: 168px;
width: 235px;
height: 257px;
background: url("img/water-jellyfish.png") 0 0 no-repeat;
}

.water-fishes {
position: absolute;
top: 5114px;
left: 33px;
width: 481px;
height: 679px;
background: url("img/water-fishes.png") 0 0 no-repeat;
}

.water-shark {
position: absolute;
top: 5096px;
left: 50%;
margin-left: -309px;
width: 617px;
height: 932px;
background: url("img/water-shark.png") 0 0 no-repeat;
}

/*waves*/

.wave-1 {
position: absolute;
top: 3084px;
left: -200px;
right: -200px;
height: 32px;
background: url("img/waves/wave1.png") 0 0 repeat-x;
}

.wave-2 {
position: absolute;
top: 3101px;
left: -200px;
right: -200px;
height: 39px;
background: url("img/waves/wave2.png") 0 0 repeat-x;
}

.wave-3 {
position: absolute;
top: 3119px;
left: -200px;
right: -200px;
height: 62px;
background: url("img/waves/wave3.png") 0 0 repeat-x;
}

.wave-4 {
position: absolute;
top: 3156px;
left: -200px;
right: -200px;
height: 67px;
background: url("img/waves/wave4.png") 0 0 repeat-x;
}

.wave-5 {
position: absolute;
top: 3199px;
left: -200px;
right: -200px;
height: 82px;
background: url("img/waves/wave5.png") 0 0 repeat-x;
}

.wave-6 {
position: absolute;
top: 3244px;
left: -200px;
right: -200px;
height: 83px;
background: url("img/waves/wave6.png") 0 0 repeat-x;
}

.wave-7 {
position: absolute;
top: 3302px;
left: -200px;
right: -200px;
height: 105px;
background: url("img/waves/wave7.png") 0 0 repeat-x;
}

.wave-8 {
position: absolute;
top: 3362px;
left: -200px;
right: -200px;
height: 92px;
background: url("img/waves/wave8.png") 0 0 repeat-x;
}

.wave-9 {
position: absolute;
top: 3424px;
left: -200px;
right: -200px;
height: 105px;
background: url("img/waves/wave9.png") 0 0 repeat-x;
}

.wave-10 {
position: absolute;
top: 3493px;
left: -200px;
right: -200px;
height: 105px;
background: url("img/waves/wave10.png") 0 0 repeat-x;
}

.wave-11 {
position: absolute;
top: 3562px;
left: -200px;
right: -200px;
height: 105px;
background: url("img/waves/wave11.png") 0 0 repeat-x;
}

.wave-12 {
position: absolute;
top: 3643px;
left: -200px;
right: -200px;
height: 105px;
background: url("img/waves/wave12.png") 0 0 repeat-x;
}

.wave-13 {
position: absolute;
top: 3716px;
left: -200px;
right: -200px;
height: 122px;
background: url("img/waves/wave13.png") 0 0 repeat-x;
}

.wave-14 {
position: absolute;
top: 3795px;
left: -200px;
right: -200px;
height: 190px;
background: url("img/waves/wave-last.png") 0 0 repeat-x;
}

.ship {
position: absolute;
top: 3085px;
right: 100px;
width: 317px;
height: 330px;
background: url("img/ship.png") 0 0 no-repeat;
}

Answer 1

It was some odd issue related to fancybox. I removed the fancybox plugin then re-added and the images are now animated. Strange!