更改滚动显示.js视口
Changing ScrollReveal.js viewport
我想在我的项目中使用ScrollReveal.js(https://github.com/julianlloyd/scrollReveal.js)和Isotope,以便在用户滚动时对对象进行动画处理,但页面必须有一个适合整个视口的固定div。这意味着页面实际上并没有滚动,用户在固定的div内滚动。
我正在寻找一种方法来更改滚动显示引用的视口。它不是跟踪页面的滚动,而是跟踪特定div 的滚动。
有什么想法吗?
提前致谢
<main id="mainn">
<div class="isotope">
<div data-sr='scale up 20%' class="item width2"></div>
<div data-sr='scale up 20%' class="item width2 height2"></div>
<div data-sr='scale up 20%' class="item width2"></div>
<div data-sr='scale up 20%' class="item width2 height2"></div>
<div data-sr='scale up 20%' class="item width2"></div>
<div data-sr='scale up 20%' class="item width2"></div>
<div data-sr='scale up 20%' class="item width2 height2"></div>
<div data-sr='scale up 20%' class="item width2"></div>
<div data-sr='scale up 20%' class="item width2 height2"></div>
<div data-sr='scale up 20%' class="item width2"></div>
<div data-sr='scale up 20%' class="item width2 height2"></div>
<div data-sr='scale up 20%' class="item width2"></div>
<div data-sr='scale up 20%' class="item width2 height2"></div>
<div data-sr='scale up 20%' class="item width2"></div>
<div data-sr='scale up 20%' class="item width2"></div>
<div data-sr='scale up 20%' class="item width2 height2"></div>
<div data-sr='scale up 20%' class="item width2"></div>
<div data-sr='scale up 20%' class="item width2 height2"></div>
<div data-sr='scale up 20%' class="item width2"></div>
<div data-sr='scale up 20%' class="item width2 height2"></div>
<div data-sr='scale up 20%' class="item width2"></div>
<div data-sr='scale up 20%' class="item width2 height2"></div>
<div data-sr='scale up 20%' class="item width2"></div>
<div data-sr='scale up 20%' class="item width2"></div>
<div data-sr='scale up 20%' class="item width2 height2"></div>
<div data-sr='scale up 20%' class="item width2"></div>
<div data-sr='scale up 20%' class="item width2 height2"></div>
<div data-sr='scale up 20%' class="item width2"></div>
<div data-sr='scale up 20%' class="item width2 height2"></div>
<div data-sr='scale up 20%' class="item width2"></div>
<div data-sr='scale up 20%' class="item width2 height2"></div>
<div data-sr='scale up 20%' class="item width2"></div>
<div data-sr='scale up 20%' class="item width2"></div>
<div data-sr='scale up 20%' class="item width2 height2"></div>
<div data-sr='scale up 20%' class="item width2"></div>
<div data-sr='scale up 20%' class="item width2 height2"></div>
<div data-sr='scale up 20%' class="item width2"></div>
<div data-sr='scale up 20%' class="item width2 height2"></div>
<div data-sr='scale up 20%' class="item width2"></div>
<div data-sr='scale up 20%' class="item width2 height2"></div>
<div data-sr='scale up 20%' class="item width2"></div>
<div data-sr='scale up 20%' class="item width2"></div>
<div data-sr='scale up 20%' class="item width2 height2"></div>
<div data-sr='scale up 20%' class="item width2"></div>
<div data-sr='scale up 20%' class="item width2 height2"></div>
<div data-sr='scale up 20%' class="item width2"></div>
<div data-sr='scale up 20%' class="item width2 height2"></div>
<div data-sr='scale up 20%' class="item width2"></div>
<div data-sr='scale up 20%' class="item width2 height2"></div>
<div data-sr='scale up 20%' class="item width2"></div>
<div data-sr='scale up 20%' class="item width2"></div>
<div data-sr='scale up 20%' class="item width2 height2"></div>
<div data-sr='scale up 20%' class="item width2"></div>
<div data-sr='scale up 20%' class="item width2 height2"></div>
</div>
</main>
代码笔在这里: http://codepen.io/grahammcuk/pen/ogBNdp
v2.3.2
关键是在构造函数配置对象中指定视口。
window.sr = new scrollReveal({
viewport: document.getElementById('main')
});
这是一个有效的代码笔:http://codepen.io/anon/pen/ByRxKG
更新:v3.0.0
概念是相同的,但看起来有点不同:
window.sr = ScrollReveal({
container: document.getElementById('main')
});
- 构造函数大写
-
viewport
- 重命名 ->container
相关文章:
- 将视口底部滚动到元素底部
- 使用JavaScript根据窗口/视口的高度动态调整图像大小
- 使用条件语句,使 jquery fadeIn/fadeOut 仅在视口 >= 480px 时才有效
- 宽度为100%的CSS元素位于视口之外
- CSS3:当页面向下滚动到第一个视口时,是否可以在元素上触发转换
- 如何设置浏览器视口大小
- Javascript em根据窗口/视口尺寸调整大小,不影响文档样式的text/css
- 检测视口并重定向到不同的主页
- 如何在按住鼠标按钮且光标在视口外时检测鼠标离开
- d3.js缩放并将力布局平移到视口中心
- 三.js - 同时使用视口和效果编辑器
- 更改滚动显示.js视口
- HTML & JS:如何在移动设备(iOS)上打开带有视口的网站,默认情况下使用小视口
- 两个视口,用于立体 3D,无需三个.js
- 三.js为什么渲染器带有视口和剪刀,我有一个完整的黑色画布
- 三个.js双视口只有一个显示
- angular js设置动画以滚动到视口顶部
- JS Mobile检测视口方向更改
- 响应式fullpage.js:增加视口以显示完整内容
- 检测视口单元(使用modernizr或normal js)并提供适当的样式表