摘要:我们来看个例子代码很简单,让视口出现滚动条,然后它是这样的很普通的一个滚动效果,然后我们把注释去掉,就是加上这句话华丽变身由于它相对视口固定,看起来就好像只有一个背景一样。
核心属性: 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 /divcss:
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 /divCSS:
/*整体的背景*/ .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); }注释已经写的很详细了, 自己动手写写才能发现问题哦
我们来看看最终效果:
可在下方评论大声说出你的看法
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/867.html
摘要:我们来看个例子代码很简单,让视口出现滚动条,然后它是这样的很普通的一个滚动效果,然后我们把注释去掉,就是加上这句话华丽变身由于它相对视口固定,看起来就好像只有一个背景一样。核心属性: background-attachment 这个属性就牛逼了, 它可以定义背景图片是相对视口固定, 还是随着视口滚动, 加上这个属性网页瞬间就从屌丝变成 高大上。 我们来看个例子: ...
摘要:我们来看个例子代码很简单,让视口出现滚动条,然后它是这样的很普通的一个滚动效果,然后我们把注释去掉,就是加上这句话华丽变身由于它相对视口固定,看起来就好像只有一个背景一样。核心属性: background-attachment 这个属性就牛逼了, 它可以定义背景图片是相对视口固定, 还是随着视口滚动, 加上这个属性网页瞬间就从屌丝变成 高大上。 我们来看个例子: html: I WANT...
摘要:我们来看个例子代码很简单,让视口出现滚动条,然后它是这样的很普通的一个滚动效果,然后我们把注释去掉,就是加上这句话华丽变身由于它相对视口固定,看起来就好像只有一个背景一样。核心属性: background-attachment 这个属性就牛逼了, 它可以定义背景图片是相对视口固定, 还是随着视口滚动, 加上这个属性网页瞬间就从屌丝变成 高大上。 我们来看个例子: html: d...
摘要:我们来看个例子代码很简单,让视口出现滚动条,然后它是这样的很普通的一个滚动效果,然后我们把注释去掉,就是加上这句话华丽变身由于它相对视口固定,看起来就好像只有一个背景一样。核心属性: background-attachment 这个属性就牛逼了, 它可以定义背景图片是相对视口固定, 还是随着视口滚动, 加上这个属性网页瞬间就从屌丝变成 高大上。 我们来看个例子: html: d...
摘要:可以感受下种不同取值的不同效果使用实现滚动视差首先,我们使用来实现滚动视差。何为滚动视差 视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验。 作为网页设计的热点趋势,越来越多的网站应用了这项技术。 通常而言,滚动视差在前端需要辅助 Javascript 才能实现。当然,其实 CSS 在实现滚动视差效果方面,也有着不俗...
阅读 654·2023-04-25 19:43
阅读 3834·2021-11-30 14:52
阅读 3711·2021-11-30 14:52
阅读 3775·2021-11-29 11:00
阅读 3732·2021-11-29 11:00
阅读 3789·2021-11-29 11:00
阅读 3516·2021-11-29 11:00
阅读 5934·2021-11-29 11:00