马黑黑 发表于 2023-10-22 08:07

似水年华

<style>
#papa {
        margin: 0 0 0 calc(50% - 593px);
        width: 1024px;
        height: 640px;
        background: url('https://638183.freep.cn/638183/t23/webp2/005.webp') no-repeat center/cover;
        box-shadow: 3px 3px 20px #000;
        overflow: hidden;
        z-index: 1;
        position: relative;
        display: grid;
        place-items: center;
}
</style>

<div id="papa"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2085110548" autoplay loop></audio>

<script>
(function() {
        let loadJs = (url,callback) => {
                let body = document.querySelector('body'), jsNode = document.createElement('script');
                jsNode.charset = 'utf-8';
                jsNode.setAttribute('src', url);
                body.appendChild(jsNode);
                jsNode.onload = () => callback();
        };

        let rippleJs = 'https://638183.freep.cn/638183/web/svg/ripple-min.js',
                playerJs = 'https://638183.freep.cn/638183/web/api/svg_path_lrc.js';
        let lrcAr = [,,];
        loadJs(rippleJs, () => rippleEffect(papa));
       
        loadJs(playerJs, () => {
                HCPlayer({
                        papa: '#papa',
                        lrcAr: lrcAr,
                        lrc_css: 'top: 20px;',
                        fs_css: 'top: -1000px; background: transparent;',
                        player_css: `
                                width: 200px;
                                height: 200px;
                                right: 100px;
                                bottom: 40px;
                                background: url('https://638183.freep.cn/638183/t23/btn/12f.png') -5px 1px,
                        `,
                        path: 'M10 100 A90 80 0 1 1 190 100 A90 80 0 1 1 10 100',
                        btn: {left: 34, top: 80},
                        track: {track: 'pink', prog: 'steelblue'},
                        img: {play: '', pause: ''}
                });
        });
})();
</script>

马黑黑 发表于 2023-10-22 08:08

帖子代码
<style>
#papa {
        margin: 0 0 0 calc(50% - 593px);
        width: 1024px;
        height: 640px;
        background: url('https://638183.freep.cn/638183/t23/webp2/005.webp') no-repeat center/cover;
        box-shadow: 3px 3px 20px #000;
        overflow: hidden;
        z-index: 1;
        position: relative;
        display: grid;
        place-items: center;
}
</style>

<div id="papa"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2085110548" autoplay loop></audio>

<script>
(function() {
        let loadJs = (url,callback) => {
                let body = document.querySelector('body'), jsNode = document.createElement('script');
                jsNode.charset = 'utf-8';
                jsNode.setAttribute('src', url);
                body.appendChild(jsNode);
                jsNode.onload = () => callback();
        };

        let rippleJs = 'https://638183.freep.cn/638183/web/svg/ripple-min.js',
                playerJs = 'https://638183.freep.cn/638183/web/api/svg_path_lrc.js';
        let lrcAr = [,,];
        loadJs(rippleJs, () => rippleEffect(papa));
       
        loadJs(playerJs, () => {
                HCPlayer({
                        papa: '#papa',
                        lrcAr: lrcAr,
                        lrc_css: 'top: 20px;',
                        fs_css: 'top: -1000px; background: transparent;',
                        player_css: `
                                width: 200px;
                                height: 200px;
                                right: 100px;
                                bottom: 40px;
                                background: url('https://638183.freep.cn/638183/t23/btn/12f.png') -5px 1px,
                        `,
                        path: 'M10 100 A90 80 0 1 1 190 100 A90 80 0 1 1 10 100',
                        btn: {left: 34, top: 80},
                        track: {track: 'pink', prog: 'steelblue'},
                        img: {play: '', pause: ''}
                });
        });
})();
</script>

马黑黑 发表于 2023-10-22 08:17

本帖最后由 马黑黑 于 2023-10-22 08:19 编辑

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

    rippleEffect(Dom);

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

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

红影 发表于 2023-10-22 08:37

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

红影 发表于 2023-10-22 08:38

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

红影 发表于 2023-10-22 08:39

这个制作真漂亮。似水年华应该改成似水波纹年华{:4_173:}

红影 发表于 2023-10-22 08:44

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

红影 发表于 2023-10-22 08:45

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

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

这个太好了{:4_199:}

马黑黑 发表于 2023-10-22 08:48

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

这个太好了

非常不错的

马黑黑 发表于 2023-10-22 08:49

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

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

马黑黑 发表于 2023-10-22 08:51

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

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

马黑黑 发表于 2023-10-22 08:52

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

还水皱纹年华呢{:4_170:}

马黑黑 发表于 2023-10-22 08:53

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

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

红影 发表于 2023-10-22 11:14

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

非常漂亮的波纹{:4_199:}

红影 发表于 2023-10-22 11:15

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

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

马黑黑 发表于 2023-10-22 11:16

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

这个也发现了

马黑黑 发表于 2023-10-22 11:16

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

商用级别的

红影 发表于 2023-10-22 11:17

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

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

红影 发表于 2023-10-22 11:18

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

水皱纹，这个更猛{:4_189:}

马黑黑 发表于 2023-10-22 11:19

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

我还没有研究代码，估计不提供，毕竟这个插件是一个练习，记得好像是2018年发布的，当时只是为了展现svg滤镜的效果。
页: [1] 2 3 4 5
查看完整版本: 似水年华