Описание: Продолжу тему создания различных анимационных эффектов на JavaScript , и сегодня покажу Вам ещё один интересный скрипт, который двигает изображение по синусоиде с заданной амплитудой, благодаря чему создаётся эффект " Изображение на волнах ". Вы можете поиграться с различными константами, и уверяю Вас, ест...
Описание: Продолжу тему создания различных анимационных эффектов на JavaScript, и сегодня покажу Вам ещё один интересный скрипт, который двигает изображение по синусоиде с заданной амплитудой, благодаря чему создаётся эффект "Изображение на волнах". Вы можете поиграться с различными константами, и уверяю Вас, есть режимы, которые действительно завораживают.
Результат:
Код JavaScript (вставлять между тегами <head> и </head>):
<script type="text/javascript">
var amp = 50;
function nextImageSize(i, length) {
return amp * Math.abs(Math.sin(i / (length / Math.PI)));
}
function sizeImageCycle(count, d) {
out = "";
for (i = 0; i < count; i++) {
size = parseInt(nextImageSize(i + d, count));
out += "<img src = 'Foto3.jpg' style='width: "+ size +"px;' />";
}
imagewave.innerHTML = out;
}
function doImageWave(count, n) {
sizeImageCycle(count, n);
if (n > count) n = 0;
setTimeout("doImageWave(\"" + count + "\", " + (n + 1) + ")", 80);
}
</script>
Код HTML (вставлять между тегами <body> и </body>):
<div id="imagewave"></div>
