视觉差效果制作总结和案例下载

视觉差效果描述

所谓视觉差效果,就是我们所看到的那种背景固定的滚动的效果,你可以预览查看。我前面加链接的这两个,都是我们所常说的视觉差效果。其实视觉差效果流行蛮久了!那今天,我和大家简单介绍一下这个视觉差效果!

视觉差效果的原理

视觉差效果的制作,我们主要要了解css背景background-attachment: fixed;这个属性,我之前有介绍过background-image,制作多个背景这个属性,但是没有介绍个background-attachment,background-attachment有三个值,scroll,fixed,和inherit,默认是scroll,背景随着滚动而滚动,那fixed呢,表示"当页面的其余部分滚动时,背景图像不会移动"。

一种方式,我们可以通过css3属性translate变换来实现。例如我们下面这个插件

css制作固定背景,全屏滑动固定背景,代码我已经在插件介绍中贴出来了。欢迎出查看!

另外一种方式,我们可以通过background-position,y轴的不断变化,来实现,例如这个案例:

固定背景的视觉差滚动效果之jquery-parallax

通过下面这段js代码

ini 复制代码
function update(){
			var pos = $window.scrollTop();				

			$this.each(function(){
				var $element = $(this);
				var top = $element.offset().top;
				var height = getHeight($element);

				// Check if totally above or totally below viewport
				if (top + height < pos || top > pos + windowHeight) {
					return;
				}

				$this.css('backgroundPosition', xpos + " " + Math.round((firstTop - pos) * speedFactor) + "px");
			});
		}

在页面滚动的时候,不断变化backgroundPosition。来实现视觉差效果!

综合案例下载

对于视觉差效果,我在前端资源库里面列举了3个案例可以供大家下载!

1、css制作固定背景,全屏滑动固定背景

2、固定背景的视觉差滚动效果之jquery-parallax

3、这个是综合案例,parallax-slider流行的视觉差图片滑动效果

感兴趣的可以去下载一下,研究一下他们的源码!关于视觉差就说到这里,感谢大家!

相关推荐
Gnevergiveup3 分钟前
2024网鼎杯青龙组Web+Misc部分WP
开发语言·前端·python
你不讲 wood22 分钟前
使用 Axios 上传大文件分片上传
开发语言·前端·javascript·node.js·html·html5
Iqnus_1231 小时前
vue下载安装
前端·vue.js·笔记
网安_秋刀鱼1 小时前
CSRF防范及绕过
前端·安全·web安全·网络安全·csrf·1024程序员节
新知图书1 小时前
Django 5企业级Web应用开发实战-分页
前端·python·django
GDAL1 小时前
HTML入门教程8:HTML格式化
前端·html
清灵xmf2 小时前
UI 组件的二次封装
前端·javascript·vue.js·element-plus
聪明的墨菲特i2 小时前
Vue组件学习 | 二、Vuex组件
前端·vue.js·学习·前端框架·1024程序员节
海盗12342 小时前
Web前端开发工具和依赖安装
前端
小何学计算机2 小时前
Nginx配置基于端口的 Web 服务器
服务器·前端·nginx