java 水波纹_css 滚动视差之水波纹效果

今天药忘吃喽~ 2022-11-09 12:36 231阅读 0赞

核心属性： background-attachment

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

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

高大上。

我们来看个例子：

html:

I WANT FLY

css:

body\{

background-color: \#cccccc;

margin:0;

padding:0;

.attach\{

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;

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

然后它是这样的：

![1a45d27a3a10761e9baebc601fff677e.gif][]

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

就是加上这句话：

background-attachment: fixed;

华丽变身：

![65d5ddd5d198cd13c1ef23f3cb25050c.gif][]

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

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

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

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

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

HTML：

CSS:

/\*整体的背景\*/.water-wave \{/\*占满整个屏幕\*/position: relative;

height: 100vh;

width: 100vw;

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-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;//取包裹波纹的正方形的半个宽 这是为了计算点击时正方形的位置

container\[0\].addEventListener('click', (e) =>\{//传入事件， 父级， 波纹数， 层级

addWave(e, container\[0\], number, index++)

\},false); //注册点击事件

//点击触发

functionaddWave(e, parentNode, number, index) \{//渲染完波纹后插入父级， 传入波纹数， 点击的坐标x, y ，层级

parentNode.appendChild(renderWave(number, e.pageX, e.pageY, index));//移除每次点击产生的波纹，

//index是用来识别每次点击的波纹相当于唯一的ID

removeWave(parentNode, index);

\}//渲染波纹的函数

functionrenderWave(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里

childrenContainer.innerHTML =\`

$\{childrenNode\}

\`;

//返回这个div

returnchildrenContainer;

\}functionremoveWave(parentNode, index) \{//延迟3秒删除波纹

setTimeout(() =>\{

const node= document.getElementsByClassName(\`remove$\{index\}\`)\[0\];

parentNode.removeChild(node);

\},3000);

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

我们来看看最终效果：

![6a2fa55e6f33b28b700febab6f07b0f4.gif][]

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

[1a45d27a3a10761e9baebc601fff677e.gif]: /images/20221023/1a0aae1933074d2282b3f574164a0496.png
[65d5ddd5d198cd13c1ef23f3cb25050c.gif]: /images/20221023/e89e9b4cf65b48d7908cbc1c81b389f0.png
[6a2fa55e6f33b28b700febab6f07b0f4.gif]: /images/20221023/378d085149464756936f060eaeaf99d2.png