资讯专栏INFORMATION COLUMN

css 滚动视差 之 水波纹效果

番茄西红柿 / 920人阅读

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

核心属性: 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); }

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

我们来看看最终效果:

 

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

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

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

相关文章

  • css 滚动视差 波纹效果

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

    _ang 评论0 收藏0
  • css 滚动视差 波纹效果

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

    番茄西红柿 评论0 收藏0
  • css 滚动视差 波纹效果

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

    番茄西红柿 评论0 收藏0
  • css 滚动视差 波纹效果

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

    番茄西红柿 评论0 收藏0
  • 滚动视差CSS 不在话下

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

    RobinTang 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<