css 滚动视差之水波纹效果

番茄西红柿发布于2019-04-22 16:12 / 3841人阅读

摘要：我们来看个例子代码很简单，让视口出现滚动条，然后它是这样的很普通的一个滚动效果，然后我们把注释去掉，就是加上这句话华丽变身由于它相对视口固定，看起来就好像只有一个背景一样。

核心属性： background-attachment

这个属性就牛逼了，它可以定义背景图片是相对视口固定，

还是随着视口滚动，加上这个属性网页瞬间就从屌丝变成

高大上。

我们来看个例子：

html:

 div /div 
 div I WANT FLY /div 
 div /div 
 div I WANT FLY /div 
 div /div 
 div I WANT FLY /div 
 div /div

css:

body{
 background-color: #cccccc;
 margin: 0;
 padding: 0;
.attach{
 background-image: url("./img/1.jpg");
 background-size: cover;
 /*background-attachment: fixed;*/
 background-position: center center;
.view{
 height: 100vh;
.text{
 font-size: 45px;
 text-align: center;
 line-height: 100vh;
 color: #ffffff;
}

代码很简单，让视口出现滚动条，

然后它是这样的：

很普通的一个滚动效果，然后我们把注释去掉，

就是加上这句话：

background-attachment: fixed;

华丽变身：

由于它相对视口固定，看起来就好像只有一个背景一样。

我们就用这个属性来制作水波纹效果：

波纹效果其实就是动态生成几个div 叠加在一起，并且背景图片一样

它们的宽高逐渐变大，透明度逐渐变为0，并且每个div有delay, 效果

结束后remove掉，并且多次点击产生的波纹的层级越来越高才不会被前面的波纹覆盖；

HTML：

 div 
 /div

CSS:

/*整体的背景*/
.water-wave {
 /*占满整个屏幕*/
 position: relative;
 height: 100vh;
 width: 100vw;
 background-image: url("./img/1.jpg");
 background-size: cover;
 background-position: center center;
 background-attachment: fixed;
 overflow: hidden;
 cursor: pointer;
/*存放波纹的一个自适应的正方形*/
.wave-container {
 position: absolute;
 /* vmin = 视口width 视口height ? height : width*/
 width: 80vmin;
 height: 80vmin;
.center{
 position: relative;
 width: 100%;
 height: 100%;
 /*背景铺满*/
 background-size: cover;
.wave {
 /*每个波纹居中*/
 position: absolute;
 top: calc((100% - 10vmin) / 2);
 left: calc((100% - 10vmin) / 2);
 width: 10vmin;
 height: 10vmin;
 border-radius: 50%;
 /*开启3d加速*/
 transform: translate3d(0, 0, 0);
 background-image: url("./img/1.jpg");
 background-position: center center;
 background-attachment: fixed;
 /*所有属性变化过渡200ms*/
 transition: all .2s;
/*每个波纹的动画延迟不一样， size由大变小再
变为100%这样效果更逼真*/
.wave1 {
 /*forwards停留在动画的最后一帧*/
 animation: move 1s ease-out .1s forwards;
 background-size: 106%;
 z-index: 10;
.wave2 {
 animation: move 1s ease-out .15s forwards;
 background-size: 102%;
 z-index: 20;
.wave3 {
 animation: move 1s ease-out .25s forwards;
 background-size: 104%;
 z-index: 30;
.wave4 {
 animation: move 1s ease-out .4s forwards;
 background-size: 100%;
 z-index: 40;
@keyframes move {
 0% {
 top: calc((100% - 10vmin) / 2);
 left: calc((100% - 10vmin) / 2);
 width: 10vmin;
 height: 10vmin;
 opacity: 1;
 /*动画过程中不能让opacity渐变，不然没有水波纹的效果*/
 /*但是这样又会产生一点小抖动， 不过不影响效果*/
 /*你也可以注释掉看看*/
 99% {
 opacity: 1;
 100% {
 top: calc((100% - 40vmin) / 2);
 left: calc((100% - 40vmin) / 2);
 width: 40vmin;
 height: 40vmin;
 opacity: 0;
}

JS: 我尽量每行都写注释

const container = document.getElementsByClassName(water-wave); // 取父级
const number = 4; // 自定义产生几个水波纹
let index = 0; // 定义每次点击产生的波纹的层级
const containerWidth = document.body.clientHeight document.body.clientWidth
 ? document.body.clientWidth * 0.8 / 2 : document.body.clientHeight * 0.8 / 2;
// 取包裹波纹的正方形的半个宽 这是为了计算点击时正方形的位置

function addWave(e, parentNode, number, index) {
 // 渲染完波纹后插入父级， 传入波纹数， 点击的坐标x, y ，层级
 parentNode.appendChild(renderWave(number, e.pageX, e.pageY, index));
 // 移除每次点击产生的波纹，
 // index是用来识别每次点击的波纹相当于唯一的ID
 removeWave(parentNode, index);
// 渲染波纹的函数
function renderWave(number, x, y, z) {
 let childrenNode = ;
 // 创建一个父级div元素用来包裹波纹
 let childrenContainer = document.createElement(div);
 // 添加一个class用来标记，方便删除
 childrenContainer.classList.add(`remove${z}`);
 // 循环产生波纹
 for (let i = 0; i number; i++) {
 childrenNode += ` div /div `
 // 波纹放进div里
 childrenContainer.innerHTML =
 ` div 
 div 
 ${childrenNode}
 /div 
 /div 
 // 返回这个div
 return childrenContainer;
function removeWave(parentNode, index) {
 // 延迟3秒删除波纹
 setTimeout(() = {
 const node = document.getElementsByClassName(`remove${index}`)[0];
 parentNode.removeChild(node);
 }, 3000);
}

注释已经写的很详细了，自己动手写写才能发现问题哦

我们来看看最终效果：

可在下方评论大声说出你的看法

GPU云服务器云服务器水波纹效果视差滚动效果水波纹水波纹动画

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/775.html

css 滚动视差之水波纹效果

摘要：我们来看个例子代码很简单，让视口出现滚动条，然后它是这样的很普通的一个滚动效果，然后我们把注释去掉，就是加上这句话华丽变身由于它相对视口固定，看起来就好像只有一个背景一样。核心属性： background-attachment 这个属性就牛逼了，它可以定义背景图片是相对视口固定，还是随着视口滚动，加上这个属性网页瞬间就从屌丝变成高大上。我们来看个例子： ...

_ang 2019-04-23 10:49 评论0 收藏0
css 滚动视差之水波纹效果

摘要：我们来看个例子代码很简单，让视口出现滚动条，然后它是这样的很普通的一个滚动效果，然后我们把注释去掉，就是加上这句话华丽变身由于它相对视口固定，看起来就好像只有一个背景一样。核心属性： background-attachment 这个属性就牛逼了，它可以定义背景图片是相对视口固定，还是随着视口滚动，加上这个属性网页瞬间就从屌丝变成高大上。我们来看个例子： html: I WANT...

番茄西红柿 2019-04-22 19:50 评论0 收藏0
css 滚动视差之水波纹效果

摘要：我们来看个例子代码很简单，让视口出现滚动条，然后它是这样的很普通的一个滚动效果，然后我们把注释去掉，就是加上这句话华丽变身由于它相对视口固定，看起来就好像只有一个背景一样。核心属性： background-attachment 这个属性就牛逼了，它可以定义背景图片是相对视口固定，还是随着视口滚动，加上这个属性网页瞬间就从屌丝变成高大上。我们来看个例子： html: d...

番茄西红柿 2019-04-22 17:02 评论0 收藏0
css 滚动视差之水波纹效果

摘要：我们来看个例子代码很简单，让视口出现滚动条，然后它是这样的很普通的一个滚动效果，然后我们把注释去掉，就是加上这句话华丽变身由于它相对视口固定，看起来就好像只有一个背景一样。核心属性： background-attachment 这个属性就牛逼了，它可以定义背景图片是相对视口固定，还是随着视口滚动，加上这个属性网页瞬间就从屌丝变成高大上。我们来看个例子： html: d...

番茄西红柿 2019-04-22 16:34 评论0 收藏0
滚动视差？CSS 不在话下

摘要：可以感受下种不同取值的不同效果使用实现滚动视差首先，我们使用来实现滚动视差。何为滚动视差视差滚动（Parallax Scrolling）是指让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。作为网页设计的热点趋势，越来越多的网站应用了这项技术。通常而言，滚动视差在前端需要辅助 Javascript 才能实现。当然，其实 CSS 在实现滚动视差效果方面，也有着不俗...

RobinTang 2019-04-23 13:29 评论0 收藏0