使用CSS和JavaScript创建基本的视差滚动效果

网页设计中2015年最主要的趋势无疑是视差滚动效应,没有任何迹象正在减弱。视差滚动将页面转换为有趣的幻灯片,其中页面上的不同元素相对于页面的滚动以不同的速度移动。在本教程中,我们将熟悉如何在CSS和JavaScript中创建基本的视差滚动页面,并深入了解整个过程中的shebang。

? 视差滚动效果的解剖

维基百科简洁地将视差滚动效果定义 为:

“计算机图形学中的一种特殊的滚动技术,其中背景图像通过相机移动比前景图像慢,在2D视频游戏中产生深度幻觉并增加沉浸感。”

由于它属于网页,视差效果与页面的滚动有关; 当执行此动作时,页面上的不同元素(例如背景图像和前景元素)以相对于滚动条的不同速度移动/动画,所有这些元素都使用JavaScript进行编排。看一下下面的简单视差滚动示例,它包含一个大的背景图像以及相对于滚动条以不同速度移动的3个图层:

演示:简单的视差滚动效果

任何视差效果中使用的JavaScript都有效地完成以下两件事:

  • 通过检查诸如的关键属性,精确监控文档滚动的程度和变化率 window.pageYOffset
  • 通过调用窗口onscroll事件中的代码,在文档滚动时相对于滚动条为页面上的各种元素设置动画。

让我们一步一步解释如何将上面的视差效果放在一起,并通过它,将神秘主义者从它中解放出来!

? 与背景和泡沫的起始页

首先,我们将构建基本页面,只有深海背景和两个大气泡,没有鱼或JavaScript妨碍我们:

演示: 初始页面有两个气泡

HTML标记是准系统:

<span style="color:#000000"><BODY>
<div id =“bubbles1”> </ div>
<div id =“bubbles2”> </ div>
</ BODY></span>

观察页面上的不同图层以及它们的位置。BODY元素仅用于显示大型深海背景图像:

<span style="color:#000000">身体{
 身高:2000px;
 背景:海军网址(deepsea.jpg)顶部中心无重复固定;
 背景尺寸:封面;
}</span>

background-size: coverCSS3属性确保图像覆盖元素的整个区域; 它使用背景图像抹去我们身体每一寸的轻微工作,虽然这个属性是资源密集型的,并且应该在视差滚动应用中使用约束。

然后是我们的两个泡泡。每个都呈现为DIV的背景图像,该DIV固定在页面上并位于页面的左上角:

<span style="color:#000000">#bubbles1,#bubbles2 {
 宽度:100%;
 身高:100%;
 顶部:0;
 左:0;
 位置:固定;
 z-index:-1;
 background:url(bubbles1.png)5%50%不重复;
}

#bubbles2 {
 background:url(bubbles3.png)95%90%不重复;
}</span>

无论页面是否滚动,这都会在视图中以及在background属性内设置的精确坐标处锚定两个气泡。

? Parallaxing气泡

将平台设置为两个气泡层的视差。当我们滚动页面时,我们将以与滚动相反的方向移动每一层,并以不同的速度移动:

演示: 带有parallaxing气泡的页面

JavaScript的:

<span style="color:#000000"><SCRIPT>

//创建跨浏览器requestAnimationFrame方法:
window.requestAnimationFrame = window.requestAnimationFrame
 || window.mozRequestAnimationFrame
 || window.webkitRequestAnimationFrame
 || window.msRequestAnimationFrame
 || function(f){setTimeout(f,1000/60)}

var bubble1 = document.getElementById(‘bubbles1‘)
var bubble2 = document.getElementById(‘bubbles2‘)

function parallaxbubbles(){
 var scrolltop = window.pageYOffset //获取文档垂直滚动的像素数
 bubble1.style.top = -scrolltop * .2 +‘px‘//以20%的滚动速率移动bubble1
 bubble2.style.top = -scrolltop * .5 +‘px‘//以50%的滚动速率移动bubble2
}

window.addEventListener(‘scroll‘,function(){//页面滚动
 requestAnimationFrame(parallaxbubbles)//在下一个可用的屏幕画面上调用parallaxbubbles()
},false)

</ SCRIPT></span>

让我们分解这里发生的事情。现在忽略requestAnimationFrame()方法,首先,我们通过它们的ID引用两个气泡层。在parallaxbubbles()函数内部,我们将每个气泡移动当前垂直滚动量的一小部分,从而使气泡相对于滚动以不同的速度移动。在scrolltop 变量前面添加的负运算符会导致每个气泡在滚动的相反方向上移动。

继续,我们点击scroll窗口对象的“ ”事件,以便在窗口滚动时执行代码。但是parallaxbubbles(),我们不会直接在这个事件中直接调用 ,而是采取更加迂回的路线,有利于性能而不是简洁。而这条路线涉及parallaxbubbles()在JavaScript的requestAnimationFrame()方法中间接调用。后者是一个JavaScript方法(具有取决于浏览器的各种前缀版本),它接受函数引用并在下一个可用的屏幕重绘上执行该函数scroll事件,我们可以期望快速连续调用代码 - 优化性能然后是关键,并在内部应用任何动画代码requestAnimationFrame()

? 一种在屏幕上水平移动的parallaxing鱼

因此,我们现在有一个带有两个平行气泡的页面,每个气泡与滚动相比都以较低的速率移动。没有逻辑规定相对于文档滚动的程度,页面上的气泡应该精确到位。

对于下一个对象,我们将是parallaxing,让我们对它进行排列,使对象从窗口的左边缘向右滑动,与滚动条同步。当滚动条位于最顶部时,对象位于左边缘,逐渐移动,直到滚动条位于最右端,此时对象将位于右边缘。鱼对象的位置与其他图层的位置相似,但靠近窗口的左侧和底部。

演示:带有parallaxing气泡和鱼的页面

CSS:

<span style="color:#000000">#bubbles1,#bubbles2,#fish {
 宽度:100%;
 身高:100%;
 顶部:0;
 左:0;
 位置:固定;
 z-index:-1;
 background:url(bubbles1.png)5%50%不重复;
}

#鱼{
 左:-100%;
 background:url(fish.png)对90%不重复;
}</span>

JavaScript的:

<span style="color:#000000"><SCRIPT>

//创建跨浏览器requestAnimationFrame方法:
window.requestAnimationFrame = window.requestAnimationFrame
 || window.mozRequestAnimationFrame
 || window.webkitRequestAnimationFrame
 || window.msRequestAnimationFrame
 || function(f){setTimeout(f,1000/60)}

var bubble1 = document.getElementById(‘bubbles1‘)
var bubble2 = document.getElementById(‘bubbles2‘)
var fish = document.getElementById(‘fish‘)

var scrollheight = document.body.scrollHeight //整个文档的高度
var windowheight = window.innerHeight //浏览器窗口的高度

function parallaxbubbles(){
 var scrolltop = window.pageYOffset //获取文档垂直滚动的像素数
 var scrollamount =(scrolltop /(scrollheight-windowheight))* 100 //滚动量(以%为单位)
 bubble1.style.top = -scrolltop * .2 +‘px‘//以20%的滚动速率移动bubble1
 bubble2.style.top = -scrolltop * .5 +‘px‘//以50%的滚动速率移动bubble2
 fish.style.left = -100 + scrollamount +‘%‘//设置鱼的位置百分比(从-100%开始)
}

window.addEventListener(‘scroll‘,function(){//页面滚动
 requestAnimationFrame(parallaxbubbles)//在下一个可用的屏幕画面上调用parallaxbubbles()
},false)

window.addEventListener(‘resize‘,function(){//在窗口调整大小
 var scrolltop = window.pageYOffset //获取文档垂直滚动的像素数
 var scrollamount =(scrolltop /(scrollheight-windowheight))* 100 //滚动量(以%为单位)
 fish.style.left = -100 + scrollamount +‘%‘//设置鱼的位置百分比(从-100%开始)
},false)

</ SCRIPT></span>

我们首先在页面中添加ID为“fish”的DIV(查看演示页面源代码),然后fish在我们的JavaScript中使用“ ”变量引用它。接下来是两个变量,它们分别得到文档的总高度和浏览器窗口的高度:

<span style="color:#000000">var scrollheight = document.body.scrollHeight //整个文档的高度
var windowheight = window.innerHeight //浏览器窗口的高度</span>

parallaxbubbles()函数内部,我们可以精确计算滚动条的滚动量占整个可滚动轨道的百分比(其中0表示滚动条位于最顶部,100%表示位于最底部)使用此魔术线:

<span style="color:#000000">var scrollamount =(scrolltop /(scrollheight-windowheight))* 100 //滚动量(以%为单位)</span>

子操作(scrollheight-windowheight),或从文档的总高度中减去窗口的高度,使我们知道滚动条在到达文档底部之前能够行进的总距离。正是这一点,我们希望我们的鱼对象位于窗口的右边缘。

当我们划分scrolltop(滚动条当前行进多少)时(scrollheight-windowheight),我们得到滚动条行进的百分比,作为总距离的百分比。乘以100可将该信息转换为百分比值,其中0表示滚动条位于最顶部,100表示??滚动轨迹的最末端:

?

现在我们知道滚动条以百分比滚动了多少,我们可以直接将该值作为鱼图层left属性的一部分提供,并按比例移动滚动条滚动的数量:

<span style="color:#000000">fish.style.left = -100 + scrollamount +‘%‘//设置鱼的位置百分比(从-100%开始)</span>

-100left鱼的位置是-100%,将它隐藏起来。当用户滚动页面时,该值逐渐增加,直到达到0%。这就是当窗口右边缘的鱼应用耳朵(实际的鱼形图像应用耳朵作为背景定位在鱼群内部的最右侧)。

原文地址:https://www.cnblogs.com/cddehsy/p/9712295.html

时间: 2024-10-12 13:01:01

使用CSS和JavaScript创建基本的视差滚动效果的相关文章

css实现视差滚动效果

今天逛京东金融的时候发现他家网站首页的滚动效果看着很有意思,于是就做了一个,demo链接http://1.liwenyang.applinzi.com/index.html 大多数的视差滚动效果都是使用js来实现的,实际上,如果你对兼容性要求不是很高,比方说忽略IE浏览器,则我们使用简单的几行CSS代码就可以实现视差滚动效果了. css有一个background-attachment属性 作用是设置背景图像是否固定或者随着页面的其余部分滚动. 这里要注意任何版本的 Internet Explor

[Swift通天遁地]九、拔剑吧-(13)创建页面的景深视差滚动效果

景深视差经常被应用在游戏项目中. 本文将演示创建一个简单的景深视差滚动效果 首先确保已经安装了所需的第三方类库.双击查看安装配置文件[Podfile] 1 platform :ios, '12.0' 2 use_frameworks! 3 4 target 'DemoApp' do 5 source 'https://github.com/CocoaPods/Specs.git' 6 pod 'Presentation' 7 end 根据配置文件中的相关设置,安装第三方类库. 安装完成之后,双击

[Swift通天遁地]九、拔剑吧-(14)创建更美观的景深视差滚动效果

景深视差经常被应用在游戏项目中. 本文将演示创建更美观的景深视差滚动效果. 首先确保已经安装了所需的第三方类库.双击查看安装配置文件[Podfile] 1 platform :ios, '12.0' 2 use_frameworks! 3 4 target 'DemoApp' do 5 source 'https://github.com/CocoaPods/Specs.git' 6 pod 'Presentation' 7 end 根据配置文件中的相关设置,安装第三方类库. 安装完成之后,双击

ASP.NET中使用JavaScript实现图片自动水平滚动效果

参照网上的资料,在ASP.NET中使用JavaScript实现图片自动水平滚动效果. 1.页面前台代码: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ImageScroll.aspx.cs" Inherits="SlideDemo.ImageScroll" %> <!DOCTYPE html><html xmlns="

快速生成漂亮的移动端视差滚动效果

在线演示 本地下载 使用stellar.js可以帮助开发者快速的生成基于移动设备的视差滚动效果. 使用简单的data属性定义即可生成相关视差效果.

利用background-attachment做视差滚动效果

视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验.作为今年网页设计的热点趋势,越来越多的网站应用了这项技术. 不明白的可以先看看eBay上的效果:http://www.ebay.com/new/ 其实就是固定背景不让它随着滚动轴移动,但包含背景的容器是跟着滚动的,所造成的视觉差异看起来就像跟转换场景一样.(这个解释别嫌混乱-) 在CSS中定义背景滚动方式的属性是backgroud-attacthment backgroun

ListBuddies视差滚动效果的ListView案例源码

源码ListBuddies,效果非常棒强烈推荐!一对ListView在停止滚动之后会缓慢的向上滚动并且左右两列的滚动速度不一致,具有视差效果.可以在Playstore上先下载demo看效果(下载地址下面给出),这种效果其实是expedia 应用中已经出现过的.xml中: <ignore_js_op>  <ignore_js_op>  <ignore_js_op>  <ignore_js_op>  <ignore_js_op>  详细说明:http

自制一个UIView代替ViewController的导航栏视图跟随scrollview滑动而改变大小并且图片移动交错效果,列表的Header View中的图片产生视差滚动效果

#import <UIKit/UIKit.h> @interface ELHeaderView : UIView@property (nonatomic, weak) UIViewController *viewController;@property (nonatomic, weak) UIScrollView *scrollView; - (id)initWithFrame:(CGRect)frame backGroudImageURL:(NSString *)backImageURL h

视差滚动(Parallax Scrolling)效果的原理和实现(转)

视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验.作为今年网页设计的热点趋势,越来越多的网站应用了这项技术. 可以先看看效果:http://www.ok-studios.de/home/ 一.什么是视差滚动? 视差效果,原本是一个天文学术语,当我们观察星空时,离我们远的星星移动速度较慢,离我们近的星星移动速度则较快.当我们坐在车上向车窗外 看时,也会有这样的感觉,远处的群山似乎没有在动,而近处的稻田却在飞速掠过.许多游戏中