Iframe audio fade on scroll

Некоторые из вас могут знать, что эти прохладные звуковые эффекты исчезают при прокрутке. Я пытаюсь использовать этот метод для «vimeo iframe». мое намерение - позволить звуку видео исчезать, прокручивая страницу и позволяя ей становиться все громче, снова прокручивая вверх. Честно говоря, я супер новичок в js и даже не продвинутый пользователь html и css, поэтому я сожалею, если я прошу слишком много, если его вообще невозможно, скажите мне.Iframe audio fade on scroll

это то, что им работать: (кредитов http://codepen.io/envira/pen/AuGKh) его basicaly в 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>

Я извиняюсь, если я веду себя глупо и скраб-иш, но я надеюсь, что вы можете помочь мне

сердечного привета

источник

2015-07-07 Yusuf y

Все работает отлично - просто 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>

P.S. Используйте консоль браузера для отладки приложения - отличная идея!

источник

2015-07-07 10:36:22

Я думаю, вы не поняли мой вопрос. Я хочу сделать то, что аудио делает с видео на самом деле. но все равно спасибо –

Iframe audio fade on scroll

ответ

Смежные вопросы