Iframe音频淡出滚动

Iframe audio fade on scroll

本文关键字：滚动 淡出 音频 Iframe      更新时间：2023-09-26

你们中的一些人可能知道那些很酷的滚动音频淡出。我正试图在"vimeo iframe"上使用该方法。我的目的是让视频的声音在页面向下滚动时逐渐消失，然后在页面向上滚动时再次变大。说实话，我是js的超级新手，甚至不是HTML和CSS的高级用户，所以我很抱歉，如果我要求太多，如果它不可能，请告诉我。

这是我的工作:(credit to http://codepen.io/envira/pen/AuGKh)它基本上是一个视频剪辑和音频淡出的脚本效果

<html>
<head>
<meta charset="utf-8">
<title>soundtest</title>
<link href="soundcss - Kopie.css" rel="stylesheet" type="text/css">
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript">
    var events=["abort","canplay","canplaythrough","durationchange","emptied","ended",
            "error","loadeddata","loadedmetadata","loadstart","pause","play","playing",
            "progress","ratechange","readystatechange","seeked","seeking","stalled",
            "suspend","timeupdate","volumechange","waiting"]
            $(document).ready(function() {
    var audioElm = $('#scrollaudio').get(0);
    audioElm.play();
    var height = $(document).height() - $(window).height();
    $(window).scroll(function() {
        audioElm.volume = 1 - $(window).scrollTop() / height;
        console.log(audioElm.volume);
    });
   });
</script>
<style>
.article1 {
    height:800px;
    background:#124A70;
    color: #fff;
    font-size: 2em;
    text-align: center;
    padding: 10px;
}
.article2 {
    height: 900px;
    background: #E04006;
    color: #fff;
    font-size: 2em;
    text-align: center;
    padding: 10px;
}
p {
    font-family: Tahoma, Arial, sans-serif;
    text-shadow: 0px 1px 1px #111;
}
@charset "utf-8";

.vimeoFrame {width:638px; height:358px; overflow:hidden; margin:0 auto;} .vimeoFrame .vimeoXtra {margin-top:-100px;}
.vimeo {display:block; width:638px; height:358px; margin:0 auto;} 
.vimeoXtra {display:block; width:638px; height:558px; margin:0 auto;}
#wrapper{
    height:358px;
    width:638px;
    background-color:
    overflow:hidden;
}
</style>
</head>
<body>
<div class="article1"><p> Scroll Down</p>
<div id=wrapper">
<div class="vimeoFrame"> <iframe class="vimeoXtra" src="https://player.vimeo.com/video/98417189?autoplay=1&loop=1" frameborder="0"></iframe></div>
</div>
    <audio loop id="scrollaudio" src="Material/8_Mile_Battle_Instrumental.mp3"></audio>
</div>
<div class="article2">
</div>
</body>
</html>

我很抱歉，如果我表现得愚蠢和草率，但我希望你能帮助我

最贴心的问候

一切正常-在您的例子中只有mp3文件是不可直接下载的。试试其他mp3: http://codepen.io/anon/pen/RPMQmq

<div class="article1"><p> Scroll Down</p>
    <audio loop id="scrollaudio" src="http://www.stephaniequinn.com/Music/Allegro%20from%20Duet%20in%20C%20Major.mp3"></audio>
</div>

注:使用浏览器控制台调试应用程序—这是一个好主意!

相关文章：