论坛 › 现代文学 › 【陪你】TO 小辣椒

樵歌 发表于 2024-7-4 12:09

【陪你】TO 小辣椒

<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: 100px; width: 350px; min-height: 100px; padding: 10px 20px; box-sizing: border-box; overflow: hidden; }
        #txtbox p { position: relative; margin: 4px 0; padding: 0; font: normal 22px/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:540px; width: var(--w); overflow: hidden;}
.wz div { word-break: keep-all; white-space: nowrap; font-family: '微软雅黑','微软雅黑'; font-size: 20px; 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://s138.ananas.chaoxing.com/sv-w7/audio/e5/a9/0f/ce7475fd464ca44da0e8fea3a287648b/audio.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>（1）</span><br><br>\n稍一闭眼\n忧伤的歌谣直达叙事的边缘\n消息像电流烧灼全身\n亲人病了，我的世界 \n充满了中药古老的芳香\n<span class="tRight">——樵歌//音画/小辣椒</span>`,
`<span class="tMid"><strong>【陪你】 </strong><br>（2）</span><br><br>\n花开花落，岁岁枯荣\n我体会到万物生命的疲倦\n痛定思痛后\n我试着将时空一眼看开\n回到从前，回到你的身边\n面对面凝视\n那双美丽的大眼，然后\n牵手坐听，天籁的歌声\n<span class="tRight">——樵歌//音画/小辣椒</span>`,
`<span class="tMid"><strong>【陪你】 </strong><br>（3）</span><br><br>\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-4 12:17

@小辣椒

樵歌 发表于 2024-7-4 12:18

换了首埙曲，就没声音了。前面还出现一行代码。我可是完全抄的。{:4_198:}

樵歌 发表于 2024-7-4 12:25

◆陪你
稍一闭眼忧伤的歌谣直达叙事的边缘消息像电流烧灼全身亲人病了，我的世界充满了中药古老的芳香

花开花落，岁岁枯荣我体会到万物生命的疲倦痛定思痛后我试着将时空一眼看开回到从前，回到你的身边面对面凝视那双美丽的大眼，然后牵手坐听，天籁的歌声

而此时，你却在空旷的梳妆镜前醒着昨夜的泪水还没抵达枕边就已奔流至我的手心我紧紧攥住你流出的一汪心事，不管你醒着、泪着我都远远的陪着你

小辣椒 发表于 2024-7-4 13:05

樵哥哥，此时我只有感动。。。。。。。{:4_179:}

梦江南 发表于 2024-7-4 13:38

小辣椒 发表于 2024-7-4 13:05
樵哥哥，此时我只有感动。。。。。。。

欣赏点赞！

梦油 发表于 2024-7-4 16:41

绝妙合作的精品。

醉美水芙蓉 发表于 2024-7-4 17:09

樵歌 发表于 2024-7-4 19:19

小辣椒 发表于 2024-7-4 13:05
樵哥哥，此时我只有感动。。。。。。。

我知道触到你的痛点了，我写着也很难受的，，，，，但诗歌必须这样表达呵。{:4_184:}

樵歌 发表于 2024-7-4 19:21

梦油 发表于 2024-7-4 16:41
绝妙合作的精品。

谢谢老哥{:4_190:}

樵歌 发表于 2024-7-4 19:22

醉美水芙蓉 发表于 2024-7-4 17:09
欣赏樵歌精美作品！

谢谢水芙蓉谬赞。{:4_190:}

红影 发表于 2024-7-4 19:24

师兄的诗句很漂亮，用这个模版代码做出的音画也很漂亮。这个帖子太赞了{:4_199:}

红影 发表于 2024-7-4 19:26

师兄的现代一直都写得很美，诗句的通感运用很赞，比如握住一汪心事，十分灵动自然{:4_199:}

樵歌 发表于 2024-7-4 20:20

红影 发表于 2024-7-4 19:24
师兄的诗句很漂亮，用这个模版代码做出的音画也很漂亮。这个帖子太赞了

都是小辣椒运用马大师的音画做得漂亮，我只是沾光了。

樵歌 发表于 2024-7-4 20:22

红影 发表于 2024-7-4 19:26
师兄的现代一直都写得很美，诗句的通感运用很赞，比如握住一汪心事，十分灵动自然

其实，我一边写着也一边难受着。还有的，没有发。

红影 发表于 2024-7-4 21:33

樵歌 发表于 2024-7-4 20:20
都是小辣椒运用马大师的音画做得漂亮，我只是沾光了。

这个是带师兄签名的，是小辣椒特地为师兄做的模版呢{:4_187:}

红影 发表于 2024-7-4 21:34

樵歌 发表于 2024-7-4 20:22
其实，我一边写着也一边难受着。还有的，没有发。

师兄能用诗句表达出自己的真实感受，这点本身就很赞{:4_187:}

樵歌 发表于 2024-7-5 08:18

红影 发表于 2024-7-4 21:33
这个是带师兄签名的，是小辣椒特地为师兄做的模版呢

这两攻模版都特别漂亮有意境。以后作为写字的模板了{:4_189:}

樵歌 发表于 2024-7-5 08:19

红影 发表于 2024-7-4 21:34
师兄能用诗句表达出自己的真实感受，这点本身就很赞

也怕触动到痛点，所以后面的都不想发了

梦油 发表于 2024-7-5 14:21

樵歌 发表于 2024-7-4 19:21
谢谢老哥

樵歌朋友别客气。

查看完整版本: 【陪你】TO 小辣椒