Мне удалось добиться своего, только вот проблема не могу исправить скролинг текста, он почему-то все время уезжает за пределами экрана и появляется с другой стороны, а должен оставаться на месте, нужно сохранить
эффект волн, но чтобы текст оставался на месте. Я понимаю что дело в стиле left, но не знаю как исправить может кто подскажет? Вот рабочий код.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Text Wave</title>
<style type="text/css">
.letter {
font-family: sans-serif;
font-size: 40px;
font-weight: bold;
position: absolute;
top: -100px;
left: 0px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function() {
const width = $(window).width();
const letterSpacing = 35;
var startTime = new Date().getTime();
const waveText = 'Мой текст';
var elements = $('#elements');
for (i = 0; i < waveText.length; i++) {
$('<div>', {
html: waveText[i]
})
.addClass('letter')
.appendTo(elements);
}
function runWave() {
var elapsed = new Date().getTime() - startTime;
var pos = elapsed * 0.05;
$('div.letter').each(function(index, letter) {
var posx = ((pos + letterSpacing * index) % width);
var posy = 100 + Math.sin(posx / 50) * 20;
$(letter).css('left', posx + 'px');
$(letter).css('top', posy + 'px');
});
}
setInterval(runWave, 30);
});
</script>
</head>
<body>
<div id="elements"></div>
</body>
</html>