论坛 › 古风雅韵 › 【长相思】步韵朝云暮雨

樵歌 发表于 2024-7-2 13:15

【长相思】步韵朝云暮雨

<style>
        #papa { --width: 1269px; margin: 120px 0 20px calc(50% - (var(--width) / 2 + 81px)); width: var(--width); height: 764px; background: url('https://xlaj.cn/assets/file/zp/20240630174320.gif ') no-repeat center/cover; box-shadow: 3px 3px 8px #666; user-select: none; z-index: 1; position: relative; }
       
        #txtbox { position: absolute; right: 360px;top: 110px; width: 300px; min-height: 100px; padding: 10px 20px; box-sizing: border-box; overflow: hidden; }
        #txtbox p { position: relative; margin: 4px 0; padding: 0; font: normal 24px/30px sans-serif; color: Teal; txtAr-shadow: 1px 1px 1px gray; animation: 2s forwards; }
        #player { position: absolute; width: 100px;   left: 80px; bottom: 70px; cursor: pointer; animation: rot 6s linear infinite; opacity: 0.65; z-index: 5;}
        #vid { position: absolute; width: 100%; height: 80%; object-fit: cover; mix-blend-mode: screen; opacity: 0.5; pointer-events: none; }
        .tMid, .tRight { display: inline-block; width: 100%; }
        .tMid { text-align: center; }
        .tRight { text-align: right; font-size: 18px; }

.wz { position: relative; --w: 400px; border: 0px solid; left:400px; top:510px; width: var(--w); overflow: hidden;}
.wz div { word-break: keep-all; white-space: nowrap; font-family: '微软雅黑','微软雅黑'; font-size: 24px; color: Teal; animation: wz1 52s linear infinite; opacity: .95; }
@keyframes wz1 { from { transform: translateX(100%); } to { transform: translateX(calc(-240% - var(--w))); }}

        @keyframes move { to { transform: translate(0); } }
        @keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="papa">
        <audio id="aud" src="https://file.uhsea.com/2406/bac62f056ef2bbf6fb217c90e6278e203C.mp3" autoplay loop></audio>

        <div id="txtbox"></div>
        <img id="player" alt="" src="https://xlaj.cn/assets/file/zp/20240630174238.png" title"播放/暂停" />

<div class="wz"><div>朝云深，暮云深，深夜焚香抚素琴，冰弦碧月心。思愔愔，路愔愔，路远山遥怀子衿，鬓丝霜雪侵。山留痕，水留痕，山水迢迢不负春，长歌正忆君。恋红尘，醉红尘，醒后相思诗与文，两情圆九分。 ---樵歌</div></div>
</div>

</div>

<script>
var txtAr = [
        `<span class="tMid"><strong>【长相思】 </strong><br>（其一）</span><br><br>\n朝云深\n暮云深\n深夜焚香抚素琴\n冰弦碧月心\n思愔愔\n路愔愔\n路远山遥怀子衿\n鬓丝霜雪侵\n<span class="tRight">——文字/樵歌//音画/小辣椒</span>`,
`<span class="tMid"><strong>【长相思】 </strong><br>（其二）</span><br><br>\n山留痕\n水留痕\n山水迢迢莫负春\n长歌正忆君\n恋红尘\n醉红尘\n醒后相思诗与文\n两情圆九分\n \n<span class="tRight">——文字/樵歌//音画/小辣椒</span>`,
];
var curIdx = 0;
var paras = [];
var ww = txtbox.offsetWidth;

var addPs = () => {
        var txtstr = txtAr;
        txtbox.innerHTML = '';
        paras.length = 0;
        var ar = txtstr.split(/\n/).filter(item => item !=='');
        ar.forEach((p,k) => {
                var para = document.createElement('p');
                para.innerHTML = p;
                para.style.cssText += `transform: translate(${ww}px);`;
                txtbox.appendChild(para);
                paras.push(para);
        });
        curIdx = (curIdx + 1) % txtAr.length;
        mkAni();
};

var parasReset = () => {
        addPs();
        paras.forEach(p => {
                p.style.animationName = '';
                p.style.transform = 'translate(${ww}px)';
                setTimeout( () => { paras.style.animationName = 'move'; }, 500);
        });
};

var mkAni = () => {
        paras.forEach((p,k) => {
                p.onanimationend = () => {
                        paras[(k+1) % paras.length].style.animationName = 'move';
                        if(k === paras.length - 1) setTimeout( () => parasReset(), 10000);
                };
        });
};

var mState = () => {
        [...paras,...].forEach(p => p.style.animationPlayState = aud.paused ? 'paused' : 'running');
        aud.paused ?vid.pause() : vid.play();
        player.title = ['暂停', '播放'][+aud.paused];
};

aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();

addPs();
paras.style.animationName = 'move';

</script>

樵歌 发表于 2024-7-2 13:18

附：朝云暮雨词『长相思•二阕』 〖半夜心〗风已深，更已深，寂静坐深聊弄琴，满弦半夜心。山愔愔，月愔愔，未复鱼书及子衿，又添烦恼侵。 〖醉红尘〗山一痕，月一痕，落入眉尖三月春，当时始识君。笑红尘，渡红尘，诺与片情同字文，醉醒各半分。

樵歌 发表于 2024-7-2 13:19

@朝云暮雨

樵歌 发表于 2024-7-2 13:22

@小辣椒   来看看，上面一行音乐地址符去不掉{:4_198:}

樵歌 发表于 2024-7-2 13:23

感谢@马黑黑代码加持！{:4_176:}

朝云暮雨 发表于 2024-7-2 13:57

哇哇哇，这图文很美，{:4_173:}

朝云暮雨 发表于 2024-7-2 13:58

先过来收了，下去慢慢欣赏一会再说。{:4_182:}

朝云暮雨 发表于 2024-7-2 13:58

好看好看，乐的……{:4_182:}

朝云暮雨 发表于 2024-7-2 13:59

文字的特效也好呀，这横呀，竖的排出来。{:4_173:}

樵歌 发表于 2024-7-2 16:23

朝云暮雨 发表于 2024-7-2 13:57
哇哇哇，这图文很美，

本想自己找个图和音乐来弄的，觉得，还小辣椒那图做得极好，以后都用这个了，只换音乐{:4_189:}

樵歌 发表于 2024-7-2 16:24

朝云暮雨 发表于 2024-7-2 13:58
好看好看，乐的……

小心别乐晕了{:4_189:}

樵歌 发表于 2024-7-2 16:25

朝云暮雨 发表于 2024-7-2 13:59
文字的特效也好呀，这横呀，竖的排出来。

文字特效是马大师设计的，小辣椒创造性运用，一会就捣鼓出来了。{:4_189:}

红影 发表于 2024-7-2 16:30

师兄这就直接用上这个文字代码了呢，诗词好，运用也漂亮。{:4_199:}

红影 发表于 2024-7-2 16:33

樵歌 发表于 2024-7-2 16:23
本想自己找个图和音乐来弄的，觉得，还小辣椒那图做得极好，以后都用这个了，只换音乐

小辣椒的这个制作还带师兄的头像呢，是为师兄量身定做的，师兄当然用这个模版才好啊{:4_187:}

醉美水芙蓉 发表于 2024-7-2 16:50

樵歌 发表于 2024-7-2 16:56

红影 发表于 2024-7-2 16:30
师兄这就直接用上这个文字代码了呢，诗词好，运用也漂亮。

知道是师妹帮把那个音乐地址弄下来的吧。谢谢啦{:4_187:}

樵歌 发表于 2024-7-2 16:58

红影 发表于 2024-7-2 16:33
小辣椒的这个制作还带师兄的头像呢，是为师兄量身定做的，师兄当然用这个模版才好啊

我试用，用其它图图都没这个效果好。就不知道换音乐地址能不能放出来，哪天试试。

樵歌 发表于 2024-7-2 16:59

醉美水芙蓉 发表于 2024-7-2 16:50
樵歌这个模板不错的，诗歌也写得好！

是小辣椒为我量身订制的谢谢@小辣椒

樵歌 发表于 2024-7-2 17:00

红影 发表于 2024-7-2 16:33
小辣椒的这个制作还带师兄的头像呢，是为师兄量身定做的，师兄当然用这个模版才好啊

嗯，她@小辣椒 一会就为我量身订制出来了，真的非常棒！

红影 发表于 2024-7-2 17:51

樵歌 发表于 2024-7-2 16:56
知道是师妹帮把那个音乐地址弄下来的吧。谢谢啦

自己人啊，有什么客气的{:4_173:}

查看完整版本: 【长相思】步韵朝云暮雨