четверг, июля 05, 2012

Падающие лепестки - в народ

Этих скриптов стотыщпицот. Но вышло так, что сделал падающие + растворяющиеся лепестки, а заказчица возьми, да и охладей к самой идее. Чем совсем уж на помойку, лучше в народ, сэкономит кому-то полчаса времени. Заменив лепестки на соответствующие предметы, можно "падать" снежинки (НГ на носу, и снежинки должны быть у всех!), брюкву, пассатижи... не знаю... кабинет министров...

Лепестки.


Это ничаво (с), что они с грубыми краями: в движении не видно.

Их надо вставить абсолютно куда-нибудь в 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 - время падения, подставьте нужное.
Единственным достоинством скрипта вижу .remove() по окончании.

2 комментария:

Анонимно комментирует...

Я поставила ваш скрипт на сайт но у меня он почему-то не работает, что делать?

Сергей комментирует...

Это не дистрибутив, он не будет работать из коробки. Лепестки надо добавить все по образцу, и подключить jQuery. Если это сделано, и не работает, то F12 и читаем в консоли об ошибке.

Поиск по этому блогу