Анимированный квадрат

Проведите мышкой над квадратом для анимации.

В Inkscape нарисуем цветной квадрат размером 100х100px.

Присвоим ему идентификатор и подпись. Для этого открываем Object | Object Properties и назначаем для ID - bigRect, а для Label - #bigRect.

В центре первого квадрата рисуем квадрат поменьше другого цвета. Назначаем ему свойства smallRect и #smallRect соответственно.

Группируем два квадрата и присваиваем группе значения group и #group.

Сохраняем файл под именем rect.svg в режиме Plain SVG.

Откываем svg-файл текстовым редактором и находим позицию y для smallRect

<rect
   id="smallRect"
   width="13.229165"
   height="13.229165"
   x="0.26458192"
   y="-132.68335" />

Это текущее значение по вертикали. Мы будем менять его при наведении мыши.

<script>
    window.onload = function () {

    var s = Snap("#rect");
    //загружаем файл
    Snap.load("rect.svg", function(f) {
        //маленький квадрат
        smallRect = f.select("#smallRect");
        //группа из двух квадратов
        icon = f.select("#group");
        //Когда курсор над группой, то анимируем смещение маленького квадрата с эффектом
        icon.hover(function() {
    		smallRect.animate({y:-122.68335}, 500, mina.elastic);
        },
            //Возвращаем в первоначальную позицию
            function() {
    		    smallRect.animate({y:-132.68335}, 500, mina.elastic);
    	    }
        );
    //Присоединяем svg к блоку div
    s.append(f);
    	});		     
    };
</script>

Реклама