视差滚动js_使用StickyStack.js轻松实现视差滚动

视差效果很快引起了人们的注意。 在向下滚动页面时，这些效果可以使某些背景保持可见。 您会在许多网站和WordPress主题上发现视差滚动，它们是现代网页设计的重要组成部分。

您还可以使用StickyStack.js插件构建独特的视差样式 。 它基于jQuery构建，并在向下滚动时使每个主页部分始终停留在顶部。

这造成了分层网站的错觉，其中每个页面都“堆叠”在另一个页面的顶部。 真的很酷，而且很容易自行设置。

尽管设置起来非常容易，但确实需要对前端开发有所了解。

您需要首先在主容器内创建单个页面节 。 这样，您将所有内容都包含在HTML中 ，因此您可以使用StickyStack jQuery函数定位所有内容。

它还带有一些选项，您可以在其中自定义父容器 ， 应堆叠的元素以及可能需要的阴影（如果您喜欢该效果）。

这是GitHub页面上的代码示例 ：

$('.main-content-wrapper').stickyStack({
	containerElement: '.main-content-wrapper',
	stackingElement: 'section',
	boxShadow: '0 -3px 20px rgba(0, 0, 0, 0.25)'
});

尽管此更新大约两年没有更新，但它仍然是一个非常可靠的插件。 它在我测试过的所有浏览器 （Chrome，Safari和Firefox） 中都起作用，并且支持所有版本的jQuery 。

另外，压缩后的文件只有2KB ，对于一个插件来说是一个不错的大小。

要了解更多信息，请访问主仓库并查看StickyStack可以提供的服务。 我认为它在单页网站或具有全屏大背景的登录页面上效果最佳。

如果您想在现场站点上查看效果，还可以在CodePen上查看现场演示 。

翻译自: https://www.hongkiat.com/blog/parallax-scrolling-stickystack-js/