你们中的一些人可能知道滚动时那些很酷的音频淡入淡出。我正在尝试在“vimeo iframe”上使用该方法。我的目的是让视频的声音在向下滚动页面时逐渐消失，并在向上滚动时再次变大。老实说，我是 js 的 super 新手，甚至不是 html 和 css 的高级用户，所以如果我要求太多，如果根本不可能，请告诉我，我很抱歉。
这就是我正在处理的内容:(归功于 http://codepen.io/envira/pen/AuGKh ) 它基本上是一个 vimeo 剪辑和音频淡入淡出的脚本效果
<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>
附注使用浏览器控制台调试应用程序 - 好主意!
关于javascript - Iframe 音频在滚动时淡入淡出，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31265945/