`

视差滚动

 
阅读更多

我们已经有一个很酷的飞船在屏幕上了,但是,它看起来就好像坐在那里一样,毫无生气!我们可以通过往里面添加视差滚动背景来解决这个问题。

  但是,等一下,到底什么是视差滚动了?

  视差滚动,简单来说,就是“移动背景中的一些图片比其它图片慢一点点”,打个比方,一个背景中的物体有远有近,近的背景移动地快(比如地面),远的背景移动地慢(比如天空),这样子就会形成景深不一样的视差效果出来。

  想要在cocos2d里面使用视差滚动效果非常简单。你只需要做3步就ok了:

  1. 创建一个CCParallaxNode,然后把它加到层中去。
  2. 创建你想要滚动的元素,然后通过调用CCParallaxNode的addChild:parallaxRatio:positionOffset方法把这些元素添加进去。
  3. 移动CCParallaxNode来滚动背景。这样的话,CCParallaxNode就会根据parallaxRatio的不同,或快或慢地移动它里面添加的元素了。

 

分享到:
评论

相关推荐

    jQuery全屏视差滚动效果

    全屏视差滚动是一种网页设计技术,通过在页面滚动时以不同的速度展示背景图像,创造出深度感和立体感,使用户在浏览时感受到丰富的视觉体验。这种效果常用于网站的首页或产品展示部分,能够吸引用户的注意力并提升...

    10个优秀视差滚动插件

    视差滚动(Parallax Scrolling)是一种网页设计技术,它通过让背景图像以不同的速度移动,来创造出一种深度感和立体感,使用户在浏览网页时有更丰富的视觉体验。这种效果通常应用于单页网站或者长滚动页面,以增强...

    vueparallax快速60fps视差滚动效果组件

    在Web设计中,视差滚动效果是一种增强用户体验的流行技术,它使得背景元素以较慢的速度移动,相比于前景元素,从而营造出深度感和立体感。"vue-parallax"就是这样一个专门针对Vue.js设计的组件,它能够帮助开发者...

    jQuery+swiper.js幻灯片图片视差滚动轮播特效

    **jQuery + Swiper.js 幻灯片图片视差滚动轮播特效详解** 在网页设计中,动态效果常常能提升用户体验,使网站更具吸引力。"jQuery + Swiper.js 幻灯片图片视差滚动轮播特效"就是一种常用的技术,它结合了jQuery库的...

    html5页面滚动图片视差滚动效果

    此外,CSS3的新属性,如`transform`、`transition`和`requestAnimationFrame`,为平滑动画和视差滚动提供了强大的工具。 在CSS3中,`transform`属性允许我们对元素进行旋转、缩放、移动等操作,而`translate3d()`...

    HTML5视差滚动特效

    视差滚动的关键在于JavaScript库的运用,例如Skrollr。Skrollr是一个轻量级的库,专门用于实现视差滚动效果。它通过监听用户的滚动行为,然后根据预设的属性值调整页面元素的位置和透明度等样式,实现动态效果。...

    jq视差滚动框架特效.zip

    "jq视差滚动框架特效"就是基于JavaScript库jQuery实现的一种视差滚动效果,它使得网页的动态展示更加生动有趣。 jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画制作和Ajax交互等任务。...

    全屏图片视差滚动切换代码.zip

    全屏图片视差滚动切换是一种常见的网页设计技术,它通过创建深度感和动态效果来提升用户的浏览体验。这种效果在现代网页设计中被广泛应用,尤其是用于制作引人入胜的首页或产品展示页面。本资源"全屏图片视差滚动...

    jquery上下页面视差滚动切换效果

    **jQuery上下页面视差滚动切换效果详解** 在网页设计中,视差滚动是一种常见的特效,它使得背景元素相对于前景元素以不同的速度移动,营造出深度感和动态视觉体验。jQuery库因其丰富的功能和易用性,常被用来实现...

    html视差滚动

    2. CSS样式:CSS用于设置各个层的位置和大小,以及它们在视差滚动中的行为。例如,可以使用`position: absolute`或`fixed`来控制元素相对于浏览器窗口的位置,`z-index`属性决定各层的前后顺序。 二、视差效果的...

    视差滚动实例

    视差滚动是一种网页设计技术,它通过创建深度感和立体感来增强用户的浏览体验。当用户滚动页面时,背景图像以较慢的速度移动,而前景元素则以较快的速度移动,这种速度差产生的视觉效果就称为视差滚动。这种技术常...

    html5视差滚动标题固定显示代码.zip

    2. CSS文件:负责样式设置,包括视差滚动效果的CSS3属性(如背景定位、视差滚动速度差异)以及翻牌页角的3D变换和过渡效果。 3. JavaScript/jQuery文件:实现了焦点图的图片切换逻辑,包括淡入淡出效果和进度条的...

    jquery css3网页背景视差滚动效果代码.zip

    网页背景视差滚动效果是一种利用JavaScript(jQuery)和CSS3技术来实现的创新设计手法,它使得网页在滚动时,不同层的背景元素以不同的速度移动,从而产生一种深度感和立体感,为用户带来独特的视觉享受。...

    视差滚动特效.zip

    视差滚动特效是一种流行且富有创意的网页设计技术,它为用户提供了一种独特而引人入胜的浏览体验。在“视差滚动特效.zip”这个压缩包中,可能包含了一个用于实现这种效果的JavaScript插件或者相关代码示例,文件名为...

    Web开发视差滚动

    JavaScript是实现视差滚动的关键技术,通过监听滚动事件、计算滚动距离以及动态更新元素样式,可以创建出丰富的视差滚动效果。例如,可以使用`window.pageYOffset`获取当前滚动条的位置,然后根据这个值调整各个...

    背景视差滚动插件

    标题中的“背景视差滚动插件”是一种网页设计技术,它通过创建背景元素相对于前景元素以不同速度移动的视觉效果,来营造出深度感和立体感。这种效果通常用于提升用户体验,使网页浏览过程更加生动有趣。视差滚动在...

    类似愤怒的小鸟场景的视差滚动效果

    在IT行业中,视差滚动是一种常见的网页设计技术,它通过创建深度感和动态效果来增强用户的浏览体验。这种效果在游戏领域,特别是像"愤怒的小鸟"这样的2D游戏里非常常见,它使得背景和前景元素以不同的速度移动,营造...

    支持视差滚动的ScrollView

    然而,为了提供更丰富的用户体验,有时我们需要自定义`ScrollView`以实现一些特殊效果,比如视差滚动(Parallax Scrolling)。视差滚动是一种设计手法,当用户滚动页面时,不同元素以不同的速度移动,从而产生深度感...

    discrollview视差滚动.rar

    "discrollview视差滚动"是一个与Android开发相关的技术点,主要涉及到的是DiscrollView这一自定义视图组件。DiscrollView通常用于实现类似iOS中的Parallax Header效果,即视差滚动效果,它使得背景元素在用户滚动...

Global site tag (gtag.js) - Google Analytics