Question

我正在制作一个水平视差卷轴的网站。我的目的是通过在改变不透明度的同时上下移动渐变（div 100vw, 300vh）来从黎明到夜晚产生环境效应。我希望javascript在某个div进入视口时触发所需的操作。

我正在使用jquery，Waypoints和jInvertScroll。

我从控制台得到这个：

<div class="dawndusk"></div>当一切都在开始时。滚动到<div class="dawndusk lettherebenight"></div>时#dawn。滚动到其他div时没有任何变化。为什么？

这是我的HTML

<div class="dawndusk"></div>

    <div class="flex" id="birth">
        ...content...
    </div>

    <div class="flex" id="dawn">
        ...content...
    </div>

    <div class="flex" id="day">
        ...content...
    </div>

    <div class="flex" id="dusk">
        ...content...
    </div>

    <div class="flex" id="night">
        ...content...
    </div>

这是我的CSS

.dawndusk {
    z-index:750;
    opacity: .9;

    background: #4B79A1;
    background: -webkit-linear-gradient(to top, #f6d365 0%, #fda085 50%, #283E51 50%, #0A2342 100%);
    background: -olinear-gradient(to top, #f6d365 0%, #fda085 50%, #283E51 50%, #0A2342 100%);
    background: linear-gradient(to top, #f6d365 0%, #fda085 30%, #283E51 60%, #0A2342 100%);

    width:100vw;
    height:300vh;
    position:fixed;
}

#birth,
#dawn,
#day,
#dusk,
#night {
position: absolute;
top:0;
}

#birth {
left:0; 
}
#dawn {
left:100vw; 
}
#day {
left:200vw; 
}
#dusk {
left:300vw; 
}
#night {
left:400vw; 
}

.lettherebebirth,
.lettherebedawn,
.lettherebeday,
.lettherebedusk,
.lettherebenight {
    transition: all 4s;
    -webkit-transition: all 4s;
}

.lettherebebirth {
    opacity: .9;
    transform: translateY(0);

}

.lettherebedawn {
    opacity: .2;
    transform: translateY(-200vh);
}

.lettherebeday {
    opacity: 0;
    transform: translateY(0);
}

.lettherebedusk {
    opacity: .5;
    transform: translateY(-200vh);
}

.lettherebenight {
    opacity: .8;
    transform: translateY(-200vh);
}

Javascript就是这样：

$('#birth').waypoint(function(direction) {
  if (direction === 'up') {
    $('.dawndusk').removeClass('lettherebedawn');
    $('.dawndusk').addClass('lettherebebirth');
  }
});

$('#dawn').waypoint(function(direction) {
  if (direction === 'down') {
    $('.dawndusk').removeClass('lettherebebirth');
    $('.dawndusk').addClass('lettherebedawn');
  }
});

$('#day').waypoint(function(direction) {
  if (direction === 'down') {
    $('.dawndusk').removeClass('lettherebedawn');
    $('.dawndusk').addClass('lettherebeday');
  }
});

$('#dusk').waypoint(function(direction) {
  if (direction === 'down') {
    $('.dawndusk').removeClass('lettherebeday');
    $('.dawndusk').addClass('lettherebedusk');
  }
});

$('#night').waypoint(function(direction) {
  if (direction === 'down') {
    $('.dawndusk').removeClass('lettherebedusk');
    $('.dawndusk').addClass('lettherebenight');
  }
});

如何在需要时启动和关闭所需的类？

Answer 1

我自己想出来了。

jInvertscroll代表垂直滚动模仿水平滚动。因此，虽然屏幕上和代码上的一切似乎都很好，但问题是路点触发器都放在水平轴上。它应该在垂直轴上。

#birth {
        top:0;
}
#dawn {
        top:100vw;
}
#day {
        top:200vw;
}
#dusk {
        top:300vw;
}
#night {
        top:400vw;
}

带Waypoint的addClass和removeClass触发器

1 个答案: