css 滚动视差 之 水波纹效果

发布时间:2020-11-17 发布网站:脚本之家
前端之家收集整理的这篇文章主要介绍了css 滚动视差 之 水波纹效果前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

核心属性: background-attachment

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

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

高大上。

我们来看个例子:

html:

<div class="attach view"></div>
<div class="text view">I WANT FLY</div>
<div class="attach view"></div>
<div class="text view">I WANT FLY</div>
<div class="attach view"></div>
<div class="text view">I WANT FLY</div>
<div class="attach view"></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;
}

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

然后它是这样的:

css 滚动视差   之   水波纹效果

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

就是加上这句话:

background-attachment: fixed;

华丽变身:

css 滚动视差   之   水波纹效果

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

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

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

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

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

HTML:

<div class="water-wave">

</div>

CSS:

整体的背景
.water-wave {
    占满整个屏幕
    position: relative;
    height: 100vh;
    width: 100vw;
    background-image: url("./img/1.jpg"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%;
    背景铺满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);
    background-image: url("./img/1.jpg"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);    注册点击事件

 点击触发
function addWave(e,parentNode,index) {
     渲染完波纹后插入父级, 传入波纹数, 点击的坐标x,y ,层级
    parentNode.appendChild(renderWave(number,e.pageX,e.pageY,index));
    
      移除每次点击产生的波纹,
      index是用来识别每次点击的波纹相当于唯一的ID
    removeWave(parentNode,index);
}

 渲染波纹的函数
 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 class='wave wave${i + 1}'></div>`
    }
     波纹放进div里
    childrenContainer.innerHTML =
        `<div class='wave-container' style='left:${x - containerWidth}px;top:${y - containerWidth}px;z-index:${z}'>
            <div class="center">
                ${childrenNode}
            </div>
         </div>`;
     返回这个div
    return childrenContainer;
}

 removeWave(parentNode,1)"> 延迟3秒删除波纹
    setTimeout(() => {
        const node = document.getElementsByClassName(`remove${index}`)[0];
        parentNode.removeChild(node);
    },3000);
}

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

我们来看看最终效果:

css 滚动视差   之   水波纹效果

 

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

总结


以上是前端之家为你收集整理的css 滚动视差 之 水波纹效果全部内容,希望文章能够帮你解决css 滚动视差 之 水波纹效果所遇到的程序开发问题。

如果觉得前端之家网站内容还不错,欢迎将前端之家网站推荐给前端开发程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。