0
저는 시차 효과가있는 Wordpress 테마로 작업 중입니다. 자세히 살펴보면이 테마는 scrollorama 스크립트를 사용하고 있습니다. (http://johnpolacek.github.io/scrollorama/)Scrollorama 시차가 작동하지 않습니다.
처음 테마를 다운로드 할 때 효과가 좋았지 만이 테마를 많이 사용자 지정해야하므로 효과가 더 이상 작동하지 않습니다. 스크롤 할 때 A에서 B로 이동해야하는 이미지는 이제 A에서 멈추어 움직이지 않습니다. 분명히 내가 한 일은 스패너를 작업에 넣었지만 전에 scrollorama를 사용한 적이 없는데, 나는 무엇을 찾아야할지 확신이 없습니다.
저는 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;
}
이 scrollorama에 사용되는 모든 코드해야한다입니다