Я создаю веб-сайт с бесконечно прокручивающимися GIF-файлами, и мне бы хотелось, чтобы у некоторых из них был звук. Я хочу, чтобы звук начал воспроизводиться, когда изображение становится видимым, но мне не удается это сделать. Мне даже не удается нормально воспроизвести звук, я не уверен, что это CodePen или что-то еще, но любая помощь будет признательна.
Вот ссылка на кодовый блок:
https://codepen.io/sofiazymnis/pen/yLNQWWR?editors=1111
<html>
<head>
<style>
body {
height: 6000px; /* Used to enable scrolling */
background: linear-gradient(#86c2db 0%, #c8a096 40%, #263c63 60%, #86c2db 100%);
}
::scrollbar {
display: none;
}
</style>
</head>
<body>
<img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/90c10bc74835779c958d7b88b56e6448/a40464e7-ace9-45ac-9d3d-dfaf654e72bb.gif?h=e5a391ce48cc2e3b3f5f9d794a047453"/>
<img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/90c10bc74835779c958d7b88b56e6448/05f5fe64-1c41-4474-90a5-7a44b3cc71b0_rw_1200.gif?h=eb995134c6f0a3eba25ed8225bdce453"/>
<img src="https://pro2-bar-s3-cdn-cf3.myportfolio.com/90c10bc74835779c958d7b88b56e6448/42e12f74-dfa4-440d-8ae3-6003a7f43cbe.gif?h=30c446631edf9eb669135a8ffdfaae0b"/>
<img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/90c10bc74835779c958d7b88b56e6448/0bfec675-86e1-4171-a216-2f700bd536d4.gif?h=cc9d39bb85a2950762d4b1613a03788a"/>
<img src="https://pro2-bar-s3-cdn-cf4.myportfolio.com/90c10bc74835779c958d7b88b56e6448/5b57d85f-29e9-4b23-bd76-8fcc208cf4be_rw_1200.gif?h=6445de67f776143199f5b49fb1a22a69"/>
<img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/90c10bc74835779c958d7b88b56e6448/a40464e7-ace9-45ac-9d3d-dfaf654e72bb.gif?h=e5a391ce48cc2e3b3f5f9d794a047453"/>
<img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/90c10bc74835779c958d7b88b56e6448/05f5fe64-1c41-4474-90a5-7a44b3cc71b0_rw_1200.gif?h=eb995134c6f0a3eba25ed8225bdce453"/>
<img src="https://pro2-bar-s3-cdn-cf3.myportfolio.com/90c10bc74835779c958d7b88b56e6448/42e12f74-dfa4-440d-8ae3-6003a7f43cbe.gif?h=30c446631edf9eb669135a8ffdfaae0b"/>
<img src="https://pro2-bar-s3-cdn-cf4.myportfolio.com/90c10bc74835779c958d7b88b56e6448/5b57d85f-29e9-4b23-bd76-8fcc208cf4be_rw_1200.gif?h=6445de67f776143199f5b49fb1a22a69"/>
<img src="https://pro2-bar-s3-cdn-cf1.myportfolio.com/90c10bc74835779c958d7b88b56e6448/22c4daf1-38f8-43ec-af1d-fea6c41c4207.gif?h=68085baffa11c935010e9e7ea70e7442"/>
<img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/90c10bc74835779c958d7b88b56e6448/a40464e7-ace9-45ac-9d3d-dfaf654e72bb.gif?h=e5a391ce48cc2e3b3f5f9d794a047453"/>
<img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/90c10bc74835779c958d7b88b56e6448/05f5fe64-1c41-4474-90a5-7a44b3cc71b0_rw_1200.gif?h=eb995134c6f0a3eba25ed8225bdce453"/>
<img src="https://pro2-bar-s3-cdn-cf3.myportfolio.com/90c10bc74835779c958d7b88b56e6448/42e12f74-dfa4-440d-8ae3-6003a7f43cbe.gif?h=30c446631edf9eb669135a8ffdfaae0b"/>
<img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/90c10bc74835779c958d7b88b56e6448/0bfec675-86e1-4171-a216-2f700bd536d4.gif?h=cc9d39bb85a2950762d4b1613a03788a"/>
<img src="https://pro2-bar-s3-cdn-cf4.myportfolio.com/90c10bc74835779c958d7b88b56e6448/5b57d85f-29e9-4b23-bd76-8fcc208cf4be_rw_1200.gif?h=6445de67f776143199f5b49fb1a22a69"/>
и css:
body {
background-color: $blue;
margin-top:0;
}
img{
display:block;
margin:auto;
line-height: 0;
max-width:50%;
}
jQuery
$('document').ready(function() {
$(document).scroll(function(){
if(document.documentElement.clientHeight +
$(document).scrollTop() >= document.body.offsetHeight )$(document).scrollTop(0);
});
});