Multiple sentences / text Sinusoidal Jquery animation
I have already found and tweaked the code that will animate the sentence in writing. However, there are several problems:
- I can't seem to get it to work on multiple sentences, basically I imagine two or three sentences like the one below, so all the sentences are under each other and animate at the same time.
- There is no way to figure out how to end the sentence animation and reappear to the left of the page at the start of the list options div.
Here is the link Here is the code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="options">
<ul id="list" style="">
<li>ABOUT</li>
</br>
<li>THE STREAM</li>
</br>
<li>TELL YOUR STORY</li>
</br>
<li>COMING EVENTS</li>
</br>
<li>CONTACT</li>
</ul>
</div>
<div id="sentences_block">
<div id="elements" style="margin-left:50px;"></div>
<div>
</body>
<style type="text/css">
.letter {
font-family: sans-serif;
font-size: 40px;
font-weight: bold;
position: absolute;
top: -100px;
left: 0px;
}
#list {
list-style-type: none;
color: #0067CE;font-weight: bold;
font-style:arial;
font-size:15px;
float:right;
}
#options {
margin-right:20px;
}
</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() - 0;
var starttime = new Date().getTime();
var letters = document.location.hash ? document.location.hash.substr(1) : 'sentence';
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.2;
$('div.letter').each(function(index, letter) {
var posx = (pos + 40 * index) % width;
var posy = 200 + Math.sin(posx / 50) *25;
$(letter).css('left', posx + 'px');
$(letter).css('top', posy + 'px');
});
}
setInterval(run, 3);
});
</script>
</html>
source to share
One solution for a lot of suggestions would be to make each div several lines high. You will need to calculate the maximum number of literal elements and keep each sentence the same length, but using whitespace ou can get pretty much any sentence you want while keeping your actual code structure. Like this:
var letters = document.location.hash ? document.location.hash.substr(1) : 'sentence';
var line_2 = document.location.hash ? document.location.hash.substr(1) : 'another ';
var line_3 = document.location.hash ? document.location.hash.substr(1) : ' again ';
$('<div>', {
html: letters[i]+'<br>'+line_2[i]+'<br>'+line_3[i]
})
For width, I'm not sure I understand, but if you want the animation to stop where the parameters start, the parameter's width can be calculated by adding the width #list
plus the margin, plus padding. Or, more simply, the animation width can be equal to the offset to the left of the list. Like this:
var width = $('#list').offset().left
see codepen: http://codepen.io/anon/pen/GJNMMP
source to share