学做无缝连续移动代码音画——美丽的嘉陵江

肖燕

休闲在清迈 发表于 2024-10-29 17:41
精彩的宽银幕大片美丽的嘉陵江，看了使人心胸开阔，构成了一幅磅礴的音乐画卷。

谢谢朋友的到访鼓励。确实，这种无缝连续移动的嘉陵江画面看上去比较壮观，我就是想到了这一点才学习制作的。

春归来

音画优美怡人。

肖燕

春归来 发表于 2024-10-29 21:04
音画优美怡人。

谢谢老师的到访点评。向您问好！

大坪人

无缝连续图片对我来说还是新事物，看了很舒服，用了什么软件和手段搞出来的？

肖燕

大坪人 发表于 2024-11-1 20:57
无缝连续图片对我来说还是新事物，看了很舒服，用了什么软件和手段搞出来的？

是用代码做出来的。其他代码是固定的，但图片和音乐的链接要自己搞出来，替换到代码相应的位置。

镁光灯

全屏移动效果很好，音乐动听，非常成功。我也代码试过，发帖时页面全是代码，不是画面，不知哪里错了。你的代码请发给我进行校对一下。最好把图片，歌曲代码置换位置用红色标示。谢谢。

肖燕

镁光灯 发表于 2024-11-2 10:14
全屏移动效果很好，音乐动听，非常成功。我也代码试过，发帖时页面全是代码，不 ...

好的。我只有这个无缝连续移动的代码，其他形式的代码我没有收藏。另外一个很重要的问题，就是设置时，要勾选“全文本”和附加选项里面的“HTML代码”，否则出来的就全是代码。我也是折腾了好多次才成功的。

<style>

        :root        {--w:1416px;--h:500px;}

  #oBlk {

    margin-left: 50% ; left:calc(-0.5 *var(--w));

    margin-top:50px;

    width: var(--w);

    height: var(--h);

    box-shadow: 3px 3px 10px #000;

    overflow: hidden;

    position: absolute;

  }

  #oBlk::before,

  #oBlk::after {

    position: absolute;

    content: '';

    left: var(--curX0);

    top: 0px;

    width: 100%;

    height: 100%;

    background: url('https://pic.imgdb.cn/item/67139ba5d29ded1a8cb463c4.jpg') no-repeat center / cover;

  }

  #oBlk::after {

    left: var(--curX1);

    transform: scaleX(-1);

  }

  #comp {height:calc(var(--h) + 100px);}

</style>

<divid="oBlk"></div>

<divid="comp"></div>

<audiosrc=https://music.163.com/song/media/outer/url?id=1363677193.mp3 autoplayloop></audio>

<script>

{

eval(function(p,a,c,k,e,d){e=function(c){return(c<a?"":e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)d[e(c)]=k[c]||e(c);k=[function(e){returnd[e]}];e=function(){return'\\w+'};c=1;};while(c--)if(k[c])p=p.replace(newRegExp('\\b'+e(c)+'\\b','g'),k[c]);return p;}('5 4=6.g;5 7=1.0,8=0,2=0,3=4,b;59=()=>{2-=7;3-=7;a(2<=-4)2=4;a(3<=-4)3=4;8=3+(2>=0?1:-1);6.c.d(\'--2\',2+\'e\');6.c.d(\'--3\',8+\'e\');b=f(9)};9();',17,17,'||curX0|curX1|blkWidth|let|oBlk|step|tune|moving|if|raf|style|setProperty|px|requestAnimationFrame|offsetWidth'.split('|'),0,{}))

}  

</script>

红色的需要自己设置。

有其他问题我们再讨论。

红红的太阳

赞赏无缝连续移动代码音画——美丽的嘉陵江精湛制作！功夫不负有心人，您的钻研执着的精神令人敬佩。您太棒了！

衷心祝肖燕妹妹：幸福健康快乐每一天！

肖燕

红红的太阳 发表于 2024-11-2 15:51
赞赏无缝连续移动代码音画——美丽的嘉陵江精湛制作！功夫不负有心人，您的钻研执着的精神令人敬佩。您太棒 ...

谢谢姐姐的到访鼓励。我看到网友制作做的移动音画，想起我拍的嘉陵江全景，比较适合这种形式，临时起意，才一点点了解、学习制作出来的。也祝您幸福安康！

镁光灯

肖燕 发表于 2024-11-2 11:09
好的。我只有这个无缝连续移动的代码，其他形式的代码我没有收藏。另外一个很重要的问题，就是设置时，要 ...

谢谢您及时发来代码，试了一下，还是不行。只好冷静、冷静，等等再做。