Красивое смещение блока
Сделал смещение текста подобным образом:
function move_left()
{
if (parseInt(document.getElementById('company_text').style.left ) > 20 )
{
clearTimeout(right_timeout);
text=text-10;
a=text+'%';
document.getElementById('company_text').style.left=a;
if (text < 30) {
document.getElementById('company_text').style.right=a-5;
document.getElementById('company_text').style.left=a;
}
image=image-10;
b=image+'%';
document.getElementById('company_image').style.left=b;
document.getElementById('company_img').style.left=b;
left_timeout=setTimeout("move_left()", 50);
}
}
Т.е. просто меняю координаты, захотелось, чтобы текст как бы подпружинивали в самом конце, т.е. мотался из стороны в сторону. Может кто подскажет? Заколебался уже с координатами возиться, никак не получается достичь нужного результат. |
Чтобы пружинился - это же задача механники ;) Ну или школьной физики ;)
По поводу кода - как-то сумбурно сделано, как я понял, где-то должна быть еще функция для движения вправо... Зачем-то каждый раз создаются и сбрасываются таймауты... Зачем-то всякий раз при обращении к элементу, он ищется по его id...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<body>
<div id="foo" style="border: 1px solid red; overflow: hidden; position: relative; zoom: 1;">
<div id="bar" style="border: 1px solid green; position: absolute; padding: 1px 2px;">Страдаю фигней :)</div>
</div>
<script type="text/javascript">
(function() {
var foo = document.getElementById('foo'), bar = document.getElementById('bar');
foo.style.height = bar.offsetHeight + 'px';
var x = 0, reverse = false;
window.setInterval(function() {
var l = foo.clientWidth - bar.offsetWidth;
x += Math.pow(6 - x * 4 / l, 2) / 4;
if (x >= l) x = 0, reverse = !reverse;
bar.style.left = Math.floor(reverse ? l - x : x) + 'px';
}, 10);
})();
</script>
</body>
</html>
|
Да вот именно, что не хочется физику вообще вспоминать, лень матушка) Сейчас попробую пошаманить надо кодом, только вот эту строчку не понял x += Math.pow(6 - x * 4 / l, 2) / 4; Там где l,2 - вот это что значит?
|
Выражение в квадрат возводится, запятая - разделитель между аргументами функции pow
|
Гугл упорно не хочет выдавать формулу по которой движется последняя точка пружины)) Может кто поможет найти?
|
поищи затухающие колебания...
Мне гугл сразу выдал ссылку на вики, где всё есть... |
Да, так и искал и в принципе нашел, но все равно почему-то не тот эффект который хотелось бы, хочется, чтобы в самом конце движение было из стороны в сторону, максимум чего добился, вот:
function move_left()
{
if (parseInt(document.getElementById('company_text').style.left) > 20 ){
if (parseInt(document.getElementById('company_text').style.left)>50){
text = text - 2;
} else{
text -= 20*Math.sin(0.5*text+60);
}
a=text+'%';
document.getElementById('company_text').style.left=a;
}
}
|
ты б что ли целую страничку запостил, а то желания доделывать не было
попробуй, может это тебе надо было
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<body>
<div id="foo" style="border: 1px solid red; overflow: hidden; position: relative; zoom: 1;">
<div id="bar" style="border: 1px solid green; position: absolute; padding: 1px 2px;">Страдаю фигней :)</div>
</div>
<script type="text/javascript">
(function() {
var foo = document.getElementById('foo'), bar = document.getElementById('bar');
foo.style.height = bar.offsetHeight + 'px';
var alpha = 0;
var fading = 1.1;
window.setInterval(function() {
var l = foo.clientWidth - bar.offsetWidth;
x = l/2 * Math.sin(alpha);
bar.style.left = Math.floor( x+l/2 ) + 'px';
alpha += Math.PI / 180 / fading;
fading += 0.001;
}, 10);
})();
</script>
</body>
</html>
|
| Часовой пояс GMT +3, время: 09:56. |