我在使用 scrollrereveal .js 和 flexbox 时遇到了问题。
我使用 display flex 沿页面创建了几行两列,当尝试使用 scrollreveal
引用单独显示每列时,只有其中一行在工作。
在仍然能够保持弹性属性的同时有什么解决方法吗?
.HTML
<div class="grid">
<div class="column __50 __reveal">one</div>
<div class="column __50 __reveal">two</div>
</div>
.CSS
.grid {
display: flex;
}
.column.__50 {
width: 50%;
}
.JS
window.sr = ScrollReveal({
distance: '30px',
duration: 1000,
scale: 0
});
sr.reveal('.__reveal');
如果我清楚地理解你:
- 给定 - 现有代码
- 何时滚动页面
- 然后 - 列应滚动到视图中
我提供了一个片段,表明它确实基于您的代码工作,但您必须提供足够的空间才能发生滚动显示效果。
要测试
添加一个占用初始视图中空间的div。
向.column.__50
类添加高度,以便可以看到它的运行情况。
添加边框,以便您可以看到它们的放置方式,在不再需要边框后,您可以随时注释掉边框。"调试"和可视化div 的良好做法。
window.sr = ScrollReveal({
distance: '30px',
duration: 1000,
scale: 0
});
sr.reveal('.__reveal');
.grid {
display: flex;
}
.column.__50 {
width: 50%;
height: 800px;
border: 2px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/scrollReveal.js/4.0.0-beta.25/scrollreveal.js"></script>
<div class="grid">
<div class="column __50 ">
No class="__reveal 1"
</div>
<div class="column __50 ">
No class="__reveal 2"
</div>
</div>
<div class="grid">
<div class="column __50 __reveal">
one
</div>
<div class="column __50 __reveal">
two
</div>
</div>
据我了解,您必须将序列间隔(以毫秒为单位(传递给 reveal(( 方法,使排序动画变得轻而易举。
sr.reveal('.__reveal', 300);
您可以从此参考链接阅读文档
堆栈代码段
window.sr = ScrollReveal({
distance: '30px',
duration: 1000,
scale: 0
});
sr.reveal('.__reveal', 300);
.grid {
display: flex;
font: 13px Verdana;
flex-wrap: wrap;
}
.column.__50 {
width: 50%;
height: 100px;
background: red;
border: 8px solid #ffffff;
border-radius: 20px;
padding: 20px;
color: #fff;
box-sizing: border-box;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>
<div class="grid">
<div class="column __50 __reveal">one</div>
<div class="column __50 __reveal">two</div>
<div class="column __50 __reveal">three</div>
<div class="column __50 __reveal">four</div>
</div>