Skip to content

Instantly share code, notes, and snippets.

@villiger

villiger/sinuswave.html

Created October 11, 2011 08:25
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save villiger/1277564 to your computer and use it in GitHub Desktop.
Save villiger/1277564 to your computer and use it in GitHub Desktop.
Download ZIP
Animate letters on screen with JavaScript along a sinus wave
Raw
sinuswave.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Sine 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="//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() {
var width = $(window).width() - 40;
var starttime = new Date().getTime();
var letters = document.location.hash ? document.location.hash.substr(1) : 'SINUSWAVE';
var elements = $('#elements');
for (i = 0; i < letters.length; i++) {
$('<div>', {
html: letters[i]
})
.addClass('letter')
.appendTo(elements);
}
function run() {
var elapsed = new Date().getTime() - starttime;
var pos = elapsed * 0.1;
$('div.letter').each(function(index, letter) {
var posx = (pos + 50 * index) % width;
var posy = 200 + Math.sin(posx / 50) * 50;
$(letter).css('left', posx + 'px');
$(letter).css('top', posy + 'px');
});
}
setInterval(run, 30);
});
</script>
</head>
<body>
<div id="elements"></div>
</body>
</html>
@pwfisher
Copy link

pwfisher commented Aug 2, 2019 

/*
 * Wave text
 */
const startTime = new Date().getTime();
const waveLetters = 'Your text here';
const waveTarget = document.getElementsByClassName('animated-wave')[0];
for (let i = 0; i < waveLetters.length; i++) {
  $(`<span class="letter">${ waveLetters[i] }</span>`).appendTo(waveTarget);
}
function runWave() {
  const width = $(window).width();
  const letterSpacing = width > 900 ? 24 : 16;
  const elapsed = new Date().getTime() - startTime;
  const pos = elapsed * 0.05;
  $('.animated-wave .letter').each(function(index, letter) {
    const posx = width - (pos - letterSpacing * index) % width;
    const posy = Math.sin(posx / 40) * 20;
    $(letter).css('left', posx + 'px');
    $(letter).css('top', posy + 'px');
  });
}
setInterval(runWave, 30);

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment