| css 滚动视差 之 水波纹效果 | 您所在的位置：网站首页 › 水波纹flash制作过程 › css 滚动视差 之 水波纹效果 |
css 滚动视差 之 水波纹效果
|
核心属性： background-attachment 这个属性就牛逼了， 它可以定义背景图片是相对视口固定， 还是随着视口滚动， 加上这个属性网页瞬间就从屌丝变成 高大上。 我们来看个例子： html: I WANT FLY I WANT FLY I WANT FLYcss: 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： 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; // 取包裹波纹的正方形的半个宽 这是为了计算点击时正方形的位置 container[0].addEventListener('click', (e) => { // 传入事件， 父级， 波纹数， 层级 addWave(e, container[0], number, index++) }, false); // 注册点击事件 // 点击触发 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里 childrenContainer.innerHTML = ` ${childrenNode} `; // 返回这个div return childrenContainer; } function removeWave(parentNode, index) { // 延迟3秒删除波纹 setTimeout(() => { const node = document.getElementsByClassName(`remove${index}`)[0]; parentNode.removeChild(node); }, 3000); }注释已经写的很详细了， 自己动手写写才能发现问题哦 我们来看看最终效果：
可在下方评论大声说出你的看法 ↓↓?
|
【本文地址】
公司简介
联系我们