资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/css 滚动视差 之 水波纹效果

css 滚动视差 之 水波纹效果

番茄西红柿 / 822人阅读

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

核心属性： 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条评论

番茄西红柿

男|高级讲师
我要私信

TA的文章

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