Guest User

Untitled

a guest
Mar 2nd, 2014
925
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
  5. <meta charset="UTF-8" />
  6. <meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1" />
  7. <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
  8. <script type="text/javascript">
  9. var events=["abort","canplay","canplaythrough","durationchange","emptied","ended",
  10. "error","loadeddata","loadedmetadata","loadstart","pause","play","playing",
  11. "progress","ratechange","readystatechange","seeked","seeking","stalled",
  12. "suspend","timeupdate","volumechange","waiting"]
  13. // The Plugin.
  14. $.fn.scrollPlay=function(O){
  15. return this.each(function(){
  16. var audio=this
  17. audio.volume=0
  18. audio.play() // iPhone does not allow play without a click, nor can you change the volume!
  19. $(window).on('scroll scroll-music',function(){
  20. var st=$(window).scrollTop(),
  21. isLoud=$(audio).is('.loud')
  22. loud=st>=O.top && st< O.bottom,
  23. isIgnored=$(audio).is('.ignored')
  24. if (isIgnored){
  25. if(audio.volume!=0){
  26. $(audio).trigger("scroll-before-off").stop().animate({volume:0},O.duration,function(){
  27. $(audio).trigger("scroll-off")
  28. })
  29. }
  30. }else if (isLoud !==loud){
  31. if (isLoud){
  32. $(audio).trigger("scroll-before-off").stop().animate({volume:0},O.duration,function(){
  33. $(audio).trigger("scroll-off")
  34. })
  35. }else{
  36. $(audio).trigger("scroll-before-on").stop().animate({volume:1},O.duration,function(){
  37. $(audio).trigger("scroll-on")
  38. })
  39. }
  40. $(audio).toggleClass('loud',loud)
  41. }
  42. }).trigger('scroll-music')
  43. })
  44. }
  45. // a sample way to call it.
  46. $(function(){
  47. var set=localStorage.musicSet
  48. if (set)
  49. $('.set1,.set2').not('.'+set).addClass('ignored')
  50. else
  51. $('.set2').addClass('ignored')
  52. $('.switch').click(function(){
  53. var set=this.id
  54. localStorage.musicSet=set
  55. $('.set1,.set2').addClass('ignored').removeClass('loud').filter('.'+set).removeClass('ignored')
  56. $(window).trigger('scroll-music')
  57. })
  58.  
  59. $('#soundTour3,#soundTour2').scrollPlay({
  60. top:-Infinity,
  61. bottom:1400,
  62. duration:2000
  63. })
  64.  
  65. $('#soundTour4,#soundTour5').scrollPlay({
  66. top:1400,
  67. bottom:2800,
  68. duration:2000
  69. })
  70. $('#soundTour99').scrollPlay({
  71. top:2800,
  72. bottom:Infinity,
  73. duration:2000
  74. })
  75. $('audio').on({// only needed for debugging
  76. volumechange:function(){
  77. $('#monitor_'+this.id).width(this.volume*100).text('*')
  78. },
  79. 'scroll-before-off scroll-before-on scroll-off scroll-on':function(e){
  80. $('#musicStatus').prepend("<div>"+e.type +" " + $(this).attr('src')+"</div>")
  81. }
  82. })
  83. $(window).scroll(function(){
  84. var top=$(window).scrollTop(),
  85. currentDiv=0,
  86. active=false
  87. if (top<0) return
  88. $('.float').parent().each(function(i){
  89. var float=$(this).find('.float'),
  90. dTop = $(this).offset().top,
  91. dHeight=$(this).outerHeight(),
  92. bHeight=float.outerHeight(),
  93. dBottom = dTop + dHeight,
  94. current = dTop <= top && dBottom >= top
  95. if(current) {
  96. active=current&& top-dTop<dHeight-bHeight
  97. currentDiv=i
  98. if(active){
  99. float.css({top:top-dTop})
  100. }
  101. return false
  102. }
  103. })
  104. $('.float').each(function(i){
  105. if(i<currentDiv || (i==currentDiv && !active))
  106. $(this).css({top:$(this).parent().outerHeight()-$(this).outerHeight()})
  107. else if(i>currentDiv)
  108. $(this).css({top:0})
  109. })
  110. }).trigger('scroll')
  111. })
  112. function isElementInViewport(el) {
  113. var rect = el.getBoundingClientRect();
  114. return (
  115. rect.top >= 0 &&
  116. rect.left >= 0 &&
  117. rect.bottom <= (window.innerHeight || document. documentElement.clientHeight) &&
  118. rect.right <= (window.innerWidth || document. documentElement.clientWidth)
  119. );
  120. }
  121. </script>
  122. <style type="text/css">
  123. html,body{ height:5500px;background:beige;border:0;margin:0;padding:0;}
  124. #musicStatus,#buttons
  125. {
  126. background-color: #87C3FF;
  127. border: 10px #6FC solid;
  128. border-radius: 10px;
  129. position: fixed;
  130. top: 1em;
  131. height: 8em;
  132. width: 20em;
  133. overflow: hidden;
  134. }
  135. #buttons
  136. {
  137. right: 2em;
  138. width: 13em;
  139. }
  140. #buttons span
  141. {
  142. width: 50px;
  143. background: yellow;
  144. display: inline-block;
  145. border-radius:5px;
  146. }
  147. #buttons span[id]
  148. {
  149. width: 0px; margin-left:1em;
  150. background: black;
  151. }
  152. #tracks,#beat,#finale
  153. {
  154. height: 1400px;
  155. width: 100%;
  156. background-color: #F66;
  157. border-radius: 10px;
  158. }
  159. #beat { background-color: #66F; }
  160. #finale { background-color: #6F6; }
  161. .box
  162. {
  163. left: 500px;
  164. height: 500px;
  165. width: 100px;
  166. position: relative;
  167. border: 20px solid blue;
  168. border-radius: 5px;
  169. background:beige;
  170. }
  171. /
  172. #beat .box{
  173. left: 450px;
  174. height: 200px;
  175. }
  176. */
  177. </style>
  178. <title>smoothFade/tracks</title>
  179. </head>
  180. <body>
  181. <div id="musicStatus">
  182. </div>
  183. <!-- audio downloaded from http://mp3skull.com/mp3/smooth_beat.html -->
  184. <audio loop class="set1" id="soundTour3" src="1.mp3"></audio>
  185. <audio loop class="set2" id="soundTour2" src="2.mp3"></audio>
  186. <audio loop class="set1" id="soundTour4" src="3.mp3"></audio>
  187. <audio loop class="set2" id="soundTour5" src="4.mp3"></audio>
  188. <audio id="soundTour99" src="5.mp3"></audio>
  189.  
  190. <div id="buttons">
  191. <button class="switch" id="set1">set 1</button>
  192. <button class="switch" id="set2">set 2</button><br>
  193. <span>track1:</span><span id="monitor_soundTour3"></span><br>
  194. <span>track2:</span><span id="monitor_soundTour2"></span><br>
  195. <span>smooth:</span><span id="monitor_soundTour4"></span><br>
  196. <span>track3:</span><span id="monitor_soundTour5"></span><br>
  197. <span>love it:</span><span id="monitor_soundTour99"></span><br><br>
  198. </div>
  199. <div id="tracks">
  200. <div class="float box">Floating Box</div>
  201. </div>
  202. <div id="beat">
  203. <div class="float box">Floating Box</div>
  204. </div>
  205. <div id="finale">
  206. <div class="float box">Floating Box</div>
  207. </div>
  208.  
  209. </body>
  210. </html>
  211.  
  212. <!-- Localized -->
RAW Paste Data