流行的7款jQuery视差和滚动效果的js插件

JavaScript 专栏收录该内容
22 篇文章 0 订阅
Parallax这一术语来源于希腊单词parallaxis,原意是改变。在网页设计中,视差效果是一个相对较新的趋势。这一效果已经存在了一段时间,但最近才被广泛应用和讨论。

网页设计中的视差效果或视差滚动是以分层的图像以不同的速度或角度在网页中移动,从而产生一种美妙而有趣的3D错觉为特色的技术。本文收集了一些使用视差效果的网站希望能带给你一些启发和灵感。此效果使得滚动网页成为一种有趣的体验。

这里我们搜集了7个视差和滚动效果插件。

1.jQuery Scroll Path 

scrollpath

这是一个自定义滚动路线的插件。它利用canvas来画直线和弧线,和它一起的还有自定义滚动条。在支持它的浏览器中还能够旋转。

2.Static Background 

parallax

这个演示网页来自于jQuery Parallax plugin demo 。下面展示的这个例子叫做静态背景。这个部分有一个比用户滚动条速度稍慢的背景。这是通过改变背景顶端的位置来实现的。

3.Curtain.js 

Curtain.js

这个插件让你能够创建一个有多重固定面板并以一种奇妙的效果展开的网页。就像升起一个幕布。你可以用你的键盘替代滚动条或者鼠标滚轮来操作文档。除此之外,还有更多的特性。例如你可以轻松地将一个固定元素或多重元素嵌入在一个面板。

4.Stellar.js 

stellar

这是一个给任意滚动元素提供视差滚动效果的插件。

5.scrolldeck 

scrolldeck

这是一个提供滚动展示平台的插件,你可以用左/右箭头来改变滑动。

6.Scrollorama 

scrollorama

这是一个让人惊奇的插件。你可以使用转换效果例如钉住,渐变、旋转和放大等等。你还可以做一个实验性的有乐趣的项目。

7.Parallax Slider with jQuery 

parallax_slider

当滑动一张图片时,我们会利用视差原理来移动不同的背景,从而创造一些美妙的视角。

原文出自:http://smashinghub.com/7-jquery-parallax-and-scrolling-effect-plugins.htm

  • 0
    点赞
  • 0
    评论
  • 2
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值