滚动视差让你不相信“眼见为实”
引言
视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果。其实,这项技术早在 2013 年就已经开始在一些国外的网站中得到了大量的应用。由于它给网站带来了非常出色的视觉体验,现在已经有数不胜数的网站应用了这项技术。我是在最近的项目中用到了这块,觉得有必要整理一下。本文主要是简单的介绍一下什么是视差滚动,实现方式以及如何在现有框架(vue/react)中使用视差滚动。
什么是视差滚动?
视差效果, 最初是一个天文术语。当我们看着繁星点点的天空时,较远的恒星运动较慢,而较近的恒星运动较快。当我们坐在车里看着窗外时,我们会有相同的感觉。远处的山脉似乎没有动,附近的稻田很快过去了。许多游戏使用视差效果来增加场景的三维度。说的简单点就是,滚动屏幕时,网页中元素的位置会发生变化。但是不同的元素位置变化的速度不同,导致网页中产生分层元素的错觉。看完上面这段,相信你对视差滚动的概念已经有了一个初步的了解。下面让我们先来看一下如何用 css 来实现视差滚动。
css 实现
css 中主要有两种实现方式:分别是通过background-attachment: fixed
和transform: translate3d
来实现,下面让我们看一下具体的实现方式:
background-attachment: fixed
平时业务开发中可能不太会用到background-attachment
,让我们先来认识一下它。background-attachment
CSS 属性决定背景图像的位置是在视口内固定,还是随着包含它的区块滚动。它一共有三个属性:
fixed
: 键字表示背景相对于视口固定。即使一个元素拥有滚动机制,背景也不会随着元素的内容滚动。local
: 此关键字表示背景相对于元素的内容固定。如果一个元素拥有滚动机制,背景将会随着元素的内容滚动。scroll
: 此关键字表示背景相对于元素本身固定, 而不是随着它的内容滚动。我们使用 background-attachment: fixed 来实现视差滚动,看一下示例:
<div class="a-text">1</div>
<div class="a-img1">2</div>
<div class="a-text">3</div>
<div class="a-img2">4</div>
<div class="a-text">5</div>
<div class="a-img3">6</div>
<div class="a-text">7</div>
$img1: "https://images.pexels.com/photos/1097491/pexels-photo-1097491.jpeg";
$img2: "https://images.pexels.com/photos/2437299/pexels-photo-2437299.jpeg";
$img3: "https://images.pexels.com/photos/1005417/pexels-photo-1005417.jpeg";
div {height: 100vh;background: rgba(0, 0, 0, 0.7);color: #fff;line-height: 100vh;text-align: center;font-size: 20vh;
}
.a-img1 {background-image: url($img1);background-attachment: fixed;background-size: cover;background-position: center center;
}
.a-img2 {background-image: url($img2);background-attachment: fixed;background-size: cover;background-position: center center;
}
.a-img3 {background-image: url($img3);background-attachment: fixed;background-size: cover;background-position: center center;
}
效果如下:
当然,你可以直接去这里查看:https://codepen.io/jack-cool/pen/MWYogYQ
transform: translate3d
同样,让我们先来看一下两个概念transform
和perspective
transform
: css3 属性,可以对元素进行变换(2d/3d),包括平移 translate,旋转 rotate,缩放 scale,等等perspective
: css3 属性,当元素涉及 3d 变换时,perspective 可以定义我们眼睛看到的 3d 立体效果,即空间感。
先来看一下示例:
<div id="app"><div class="one">one</div><div class="two">two</div><div class="three">three</div>
</div>
html {overflow: hidden;height: 100%;
}
body {perspective: 1px;transform-style: preserve-3d;height: 100%;overflow-y: scroll;overflow-x: hidden;
}
#app {width: 100vw;height: 200vh;background: skyblue;padding-top: 100px;
}
.one {width: 500px;height: 200px;background: #409eff;transform: translateZ(0px);margin-bottom: 50px;
}
.two {width: 500px;height: 200px;background: #67c23a;transform: translateZ(-1px);margin-bottom: 150px;
}
.three {width: 500px;height: 200px;background: #e6a23c;transform: translateZ(-2px);margin-bottom: 150px;
}
效果如下:
当然,你可以直接去这里查看:https://codepen.io/jack-cool/pen/zYxzOpb
这里解释下使用transform: translate3d
来实现视差滚动的原理:
1、给容器设置上transform-style: preserve-3d
和perspective: xpx
,那么处于这个容器下的子元素就会处于 3D 空间中;
2、给子元素分别设置不同的transform: translateZ()
,这时不同子元素在 3D Z 轴方向距离屏幕的距离也就不一样;
3、滚动滚动条,由于子元素设置了不同的transform: translateZ()
,那么他们滚动的上下距离translateY
相对屏幕(我们的眼睛),也是不一样的,这就达到了滚动视差的效果。
总结下来就是: 父容器设置transform-style: preserve-3d
和perspective: xpx
,子元素设置不同的transform: translateZ()
看完了用 css 实现滚动视差的两种方式,下面让我们看下如何在现有框架(vue/react)中来应用滚动视差。
vue 或 react 中使用
react 中使用
在 react 中使用可以采用react-parallax
,代码示例:
import React from "react";
import { render } from "react-dom";
import { Parallax } from "react-parallax";
import Introduction from "./Introduction";
const styles = { fontFamily: "sans-serif", textAlign: "center" };
const insideStyles = {background: "white",padding: 20,position: "absolute",top: "50%",left: "50%",transform: "translate(-50%,-50%)",
};
const image1 ="https://images.pexels.com/photos/830891/pexels-photo-830891.jpeg";
const image2 ="https://images.pexels.com/photos/1236701/pexels-photo-1236701.jpeg";
const image3 ="https://images.pexels.com/photos/3210189/pexels-photo-3210189.jpeg";
const image4 ="https://images.pexels.com/photos/2437299/pexels-photo-2437299.jpeg";
const App = () => (<div style={styles}>{" "}<Introduction name="React Parallax" /> <ParallaxbgImage={image1}strength={500}>{" "}<div style={{ height: 500 }}>{" "}<div style={insideStyles}>HTML inside the parallax</div>{" "}</div>{" "}</Parallax> <h1>| | |</h1> <ParallaxbgImage={image3}blur={{ min: -1, max: 3 }}>{" "}<div style={{ height: 500 }}>{" "}<div style={insideStyles}>Dynamic Blur</div>{" "}</div>{" "}</Parallax> <h1>| | |</h1> <Parallax bgImage={image2} strength={-100}>{" "}<div style={{ height: 500 }}>{" "}<div style={insideStyles}>Reverse direction</div>{" "}</div>{" "}</Parallax> <h1>| | |</h1> <ParallaxbgImage={image4}strength={200}renderLayer={(percentage) => (<div>{" "}<divstyle={{position: "absolute",background: `rgba(255, 125, 0, ${percentage * 1})`,left: "50%",top: "50%",borderRadius: "50%",transform: "translate(-50%,-50%)",width: percentage * 500,height: percentage * 500,}}/>{" "}</div>)}>{" "}<div style={{ height: 500 }}>{" "}<div style={insideStyles}>renderProp</div>{" "}</div>{" "}</Parallax> <div style={{ height: 500 }} /> <h2>{"\u2728"}</h2>{" "}</div>
);
render(<App />, document.getElementById("root"));
效果如下:
当然,更多细节可以查看:https://codesandbox.io/s/react-parallax-zw5go
vue 中使用
在 vue 中使用可以采用vue-parallaxy
,代码示例:
<template><div id="app"><div style="background-color: #fff; height: 100vh;"><h1 style="margin-top: 0; padding-top: 20px;">Scroll down ⬇</h1></div><div style="position: relative; z-index: 9999; background-color: #fff;"><h1 style="margin:0;">Parallax Effect</h1><parallax><imgsrc="https://images.pexels.com/photos/830891/pexels-photo-830891.jpeg"/></parallax></div><div style="background-color: #fff; height: 100vh;"></div><h1>Parallax fixed position</h1><div style="position: relative;"><parallax :fixed="true"><imgsrc="https://images.pexels.com/photos/3210189/pexels-photo-3210189.jpeg"/></parallax></div><div style="background-color: #fff; height: 100vh;"></div></div
></template>
<script>import Parallax from "vue-parallaxy";export default { name: "App", components: { Parallax } };
</script>
<style>body {margin: 0;}#app {font-family: "Avenir", Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;position: relative;}
</style>
效果如下:
当然,更多细节可以查看: https://codesandbox.io/s/vue-parallaxjs-ljh9g
滚动视差让你不相信“眼见为实”相关推荐
- 滚动视差?CSS 不在话下
何为滚动视差 视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验. 作为网页设计的热点趋势,越来越多的网站应用了这项技术. 通常 ...
- 96.魔幻的滚动视差特效
效果 (源码网盘地址在最后) 大家都说简历没项目写,我就帮大家找了一个项目,还附赠[搭建教程]. 演示视频 [前端特效 96]魔幻的滚动视差特效 视频地址一:https://www.ixigua.co ...
- 写给你的前端滚动视差设计指南(附7个神级案例)
设计师应该要了解网页上各种效果的实现能力,才能给用户创造出非常吸引人的视觉体验. 滚动页面是一个很常规的操作,结合这个交互行为可以在设计上有哪些可以发挥的点呢?可能这对很多人来说,算是一块知识盲区,那 ...
- 6款帮助 滚动视差jquery插件
在网页设计中,视差滚动(Parallax Scrolling)是当下流行的网页设计技术,通过让多层背景以不同的速度或者不同的方向移动来形成非常有趣的 3D 运动效果.下面是一些运用视差滚动效果的优秀网 ...
- ios 横向滚轮效果_iOS列表滚动视差效果
效果:UITableView滚动的时候会有动画加视差效果 一个未处理的列表.png 当cell出现的时候 -(void)tableView:(UITableView *)tableView willD ...
- html5页面滚动视差效果特,34个网页视差滚动插件和视差特效教程分享
34个网页视差滚动插件和视差特效教程分享 Sponsor 视差滚动这个设计趋势从去年开始一直流行到现在,这个特效的视觉体验非常不错,比如前面分享的<19个创意网页设计欣赏>文章,有很多使视 ...
- 视差滚动的爱情故事之优化篇
上篇博客链接:视差滚动的爱情故事 [优化问题 : 解决Chrome下跳动的bug] 在上一篇的爱(diao)情(si)故事里面,demo3在 Chrome下是这样的问题:鼠标滚动视差元素动画生硬,鬼畜 ...
- 视差滚动的原理及实现
1.视差滚动 视差滚动(Parallax Scrolling)指网页滚动过程中,多层次的元素进行不同程度的移动,视觉上形成立体运动效果的网页展示技术. 2.特性 视差滚动效果酷炫,适合于个性展示的场合 ...
- 【面试题】1014- 面试官:如何使用CSS完成视差滚动效果?
一.是什么 视差滚动(Parallax Scrolling)是指多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验 我们可以把网页解刨成:背景层.内容层.悬浮层 当滚动鼠标滑轮的时候 ...
最新文章
- idea(2)快捷键
- mysql性能优化简书_MySQL性能优化
- python3实现字符串的全排列的方法(无重复字符)
- jquery ajax.then,jQuery动态AJAX Promise链
- MongoDB(1)--简单介绍以及安装
- memcached在大负载高并发网站上的应用(一)
- power bi自定义地图_如何使用自定义形状图在Power BI中创建地理图
- Ubuntu下自定义调整CPU工作频率(用于省电或提高性能都好用)
- CNDS-Markdown之公式编辑(一)
- 天刀服务器未响应,天涯明月刀卡顿怎么办 教你如何优化游戏不在卡顿
- 从零开始搭建ROS智能小车@sp头子
- Win10以太网属性空白怎么回事
- Python装逼神器,Python实现一键批量扣图
- 根据日期计算属于第几周(周日是一周的第一天)
- Pytorch实现nms (torchvision.ops.nms torchvision.ops.boxes.batched_nms)
- 廖雪峰git入门教程——学习笔记
- Effective STL读书笔记
- 国内最美最豪华图书馆!我一定要考上!
- Canvas之粒子动画
- Excel之复制除了某几行之外的所有行(非专业人士,自用的土方法)
热门文章
- 项目部署常用linux命令(丰富的教程、资源)
- 中国房价均价去年每平4600元 房改后涨幅最高
- vb.net 图形控件_玩转图形:VB.net GlassLabel控件
- SASE究竟还能火多久?
- VuePress 博客之 SEO 优化(一) sitemap 与搜索引擎收录
- 华三路由器qos 简单的接口限速
- 7 种模型加权集成方法
- MAUI 入门教程系列(5.XAML及页面介绍)
- 怎么用照片制作MV视频?把照片合集做成MV视频的软件,实用制作教程!
- mysql双主架构沈剑_58 沈剑 - 数据库架构师做什么-58同城数据库架构设计思路