似水年华

马黑黑

马黑黑

帖子代码

1. <style>
   
2. #papa {
   
3.         margin: 0 0 0 calc(50% - 593px);
   
4.         width: 1024px;
   
5.         height: 640px;
   
6.         background: url('https://638183.freep.cn/638183/t23/webp2/005.webp') no-repeat center/cover;
   
7.         box-shadow: 3px 3px 20px #000;
   
8.         overflow: hidden;
   
9.         z-index: 1;
   
10.         position: relative;
    
11.         display: grid;
    
12.         place-items: center;
    
13. }
    
14. </style>
    
15. 
    
16. <div id="papa"></div>
    
17. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2085110548" autoplay loop></audio>
    
18. 
    
19. <script>
    
20. (function() {
    
21.         let loadJs = (url,callback) => {
    
22.                 let body = document.querySelector('body'), jsNode = document.createElement('script');
    
23.                 jsNode.charset = 'utf-8';
    
24.                 jsNode.setAttribute('src', url);
    
25.                 body.appendChild(jsNode);
    
26.                 jsNode.onload = () => callback();
    
27.         };
    
28. 
    
29.         let rippleJs = 'https://638183.freep.cn/638183/web/svg/ripple-min.js',
    
30.                 playerJs = 'https://638183.freep.cn/638183/web/api/svg_path_lrc.js';
    
31.         let lrcAr = [[2,"似水年华",2],[6,"水波纹点击效果测试",2],[12,"ripple封装 ：张鑫旭",1]];
    
32.         loadJs(rippleJs, () => rippleEffect(papa));
    
33.        
    
34.         loadJs(playerJs, () => {
    
35.                 HCPlayer({
    
36.                         papa: '#papa',
    
37.                         lrcAr: lrcAr,
    
38.                         lrc_css: 'top: 20px;',
    
39.                         fs_css: 'top: -1000px; background: transparent;',
    
40.                         player_css: `
    
41.                                 width: 200px;
    
42.                                 height: 200px;
    
43.                                 right: 100px;
    
44.                                 bottom: 40px;
    
45.                                 background: url('https://638183.freep.cn/638183/t23/btn/12f.png') -5px 1px,
    
46.                         `,
    
47.                         path: 'M10 100 A90 80 0 1 1 190 100 A90 80 0 1 1 10 100',
    
48.                         btn: {left: 34, top: 80},
    
49.                         track: {track: 'pink', prog: 'steelblue'},
    
50.                         img: {play: '', pause: ''}
    
51.                 });
    
52.         });
    
53. })();
    
54. </script>

复制代码

马黑黑

水波纹效果是就职于上海阅文集团的张鑫旭先生的作品。ripple-min.js 封装了 svg 水波纹滤镜效果，加载资源文档后，仅一句代码就能在目标页面点击任意地方出现水波纹的美妙效果：

    rippleEffect(Dom);

其中，Dom 是容器操作句柄，比如本帖 id="papa" 的 papa，或是，如果你有 class="mydiv" 的 div，你希望 第一个出现的此类 div 拥有水波纹点击效果，你可以：

    let myDiv = document.querySelector('.mydiv');
    rippleEffect(myDiv);

红影

开始点击按钮和进度条，看到波纹，还以为只有这里有，正奇怪没看到定位内容啊，然后，点别处，发现都有波纹，原来整个papa上都能点出

红影

看到有 overflow: hidden;啊，点到边上时，怎么还是能看到波纹延伸到画面之外了呢

红影

这个制作真漂亮。似水年华应该改成似水波纹年华

红影

这水波纹扩展得很远，最大的半径处大约有260左右呢。

红影

马黑黑 发表于 2023-10-22 08:17
水波纹效果是就职于上海阅文集团的张鑫旭先生的作品。ripple-min.js 封装了 svg 水波纹滤镜效果，加载资源 ...

“仅一句代码就能在目标页面点击任意地方出现水波纹的美妙效果”

这个太好了

马黑黑

红影 发表于 2023-10-22 08:45
“仅一句代码就能在目标页面点击任意地方出现水波纹的美妙效果”

这个太好了

非常不错的

马黑黑

红影 发表于 2023-10-22 08:37
开始点击按钮和进度条，看到波纹，还以为只有这里有，正奇怪没看到定位内容啊，然后，点别处，发现都有波纹 ...

对，这里定义的作用对象是 papa

马黑黑

红影 发表于 2023-10-22 08:44
这水波纹扩展得很远，最大的半径处大约有260左右呢。

这基本是商用标准的水波纹半径。张鑫旭大佬将通用商用图片做成了可伸缩的图形资源，理论上可以定义涟漪半径。

马黑黑

红影 发表于 2023-10-22 08:39
这个制作真漂亮。似水年华应该改成似水波纹年华

还水皱纹年华呢

马黑黑

红影 发表于 2023-10-22 08:38
看到有 overflow: hidden;啊，点到边上时，怎么还是能看到波纹延伸到画面之外了呢

水波纹基于 document，并不是 papa 标签的子元素

红影

马黑黑 发表于 2023-10-22 08:48
非常不错的

非常漂亮的波纹

红影

马黑黑 发表于 2023-10-22 08:49
对，这里定义的作用对象是 papa

在进度条附近的尤其漂亮，让进度条都跟着荡漾起来了

马黑黑

红影 发表于 2023-10-22 11:15
在进度条附近的尤其漂亮，让进度条都跟着荡漾起来了

这个也发现了

马黑黑

红影 发表于 2023-10-22 11:14
非常漂亮的波纹

商用级别的

红影

马黑黑 发表于 2023-10-22 08:51
这基本是商用标准的水波纹半径。张鑫旭大佬将通用商用图片做成了可伸缩的图形资源，理论上可以定义涟漪半 ...

直接使用插件，没法定义涟漪半径的吧。

红影

马黑黑 发表于 2023-10-22 08:52
还水皱纹年华呢

水皱纹，这个更猛

马黑黑

红影 发表于 2023-10-22 11:17
直接使用插件，没法定义涟漪半径的吧。

我还没有研究代码，估计不提供，毕竟这个插件是一个练习，记得好像是2018年发布的，当时只是为了展现svg滤镜的效果。