Question

我正在研究具有视差效果的Wordpress主题。仔细观察，这个主题是使用scrolllorama脚本。（http://johnpolacek.github.io/scrollorama/）

当我最初下载主题时，效果很好，但由于我不得不大量自定义此主题，效果不再有效。滚动时应从A移动到B的图像现在只是卡在A处而不会移动。很明显，我所做的事情已经把扳手投入到工作中，但之前从未使用过卷轴画，我不确定要寻找什么。

我在scrolllorama部分专门查看了原始主题代码，所有内容都完美匹配，所以有没有人有任何想法可能导致问题？

这可能仅仅是兼容性问题吗？除了scrollorama之外我唯一使用的是添加的图像滑块http://www.menucool.com/responsive-slider.aspx

这应该是用于scrolllorama的所有代码：

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

这是与fancybox有关的一些奇怪问题。我删除了fancybox插件然后重新添加，现在图像动画。奇怪！

Scrollorama视差不起作用

1 个答案: