Лепестки.
Это ничаво (с), что они с грубыми краями: в движении не видно.
Их надо вставить абсолютно куда-нибудь в HTML типа
<img alt="" class="petal" id="petal_1" src="/img/1-petal.png" />
CSS класс .petal { display:none; }
Падающие предметы должны иметь последовательно возрастающие id по схеме выше. Да, гораздо элегантнее брать их автоматически-случайно по селектору, но мне было в лом делать это для 4 элементов - дерзайте.
Скрипт (даже не упоминаю, что требует jQuery - ну как не упоминаю... ну ладно):
$(document).ready(function(){ timer(); }); function timer(){ window.setTimeout(petalFall,
Math.floor(Math.random()*1501)+500); } function petalFall(){ timer(); var size=Math.floor(Math.random() * 81) + 20; var petal=$('#petal_'+(Math.floor(Math.random() * 4) + 1)); var x=Math.floor(Math.random() * 21) + 15; petal .clone() .appendTo('body') .css({ left: x+'%', size: size+'%' }) .show() .animate({ top: 700, opacity: 0 }, 4700, function(){ $(this).remove(); }); }
Параметры, которые можно подстроить:
- в вычислении size - вариация процентовки размера
- в вычислении x - вариация места экрана, в которой будет падать (в данном случае эффект болтается в левой части)
- 4700 - время падения, подставьте нужное.
2 комментария:
Я поставила ваш скрипт на сайт но у меня он почему-то не работает, что делать?
Это не дистрибутив, он не будет работать из коробки. Лепестки надо добавить все по образцу, и подключить jQuery. Если это сделано, и не работает, то F12 и читаем в консоли об ошибке.
Отправить комментарий