web视觉差滚动效果插件--stellarjs的使用说明

视差滚动(Parallax Scrolling)指网页滚动过程中,多层次的元素进行不同程度的移动,视觉上形成立体运动效果的网页展示技术。主要核心就是前景和背景以不同的速度移动,从而创造出3D效果。 这种效果可以给网站一个很好的补充。
stellar.js是一个 jQuery插件,能很容易地给网站添加视差滚动效果。它允许将效果添加到任何滚动的元素。 虽然已经停止了维护,但它非常稳定,与最新版本的jQuery兼容。
stellar.js的特性

  • 视差滚动效果酷炫,适合于个性展示的场合。
  • 视差滚动徐徐展开,适合于娓娓道来,讲故事的场合。
  • 视差滚动容易迷航,需要具备较强的导航功能。
    stellarjs的原理
    传统的网页的文字、图片、背景都是一起按照相同方向相同速度滚动的,
    而视差滚动则是在滚动的时候,内容和多层次的背景实现或不同速度,或不同方向的运动。
    有的时候也可以加上一些透明度、大小的动画来优化显示。利用background-attachment属性实现。
    stellarjs的使用步骤
    第一步映入文件:
!--第一步引入-->


在这里插入图片描述
第二步 在html 上添加属性:

 

在这里插入图片描述
第三步:在需要添加 视觉滚动效果的标签上添加css样式:

.bg {
    height: 400px;
    background-attachment: fixed;
}

web视觉差滚动效果插件--stellarjs的使用说明_第1张图片
第四步:参数初始化

 $.stellar({
            horizontalScrolling: false,
            responsive: true
        });

web视觉差滚动效果插件--stellarjs的使用说明_第2张图片
还有其他的参数以及解释:
web视觉差滚动效果插件--stellarjs的使用说明_第3张图片

你可能感兴趣的:(web视觉差滚动效果插件--stellarjs的使用说明)