трансформация svg объектов с помощью скрола мыши
Добрый день!
Очень нужна помощь в данной проблемке - "Нужно трансформировать svg объект из круга в прямоугольник с помощью скролла мыши" вот таким образом - http://prntscr.com/3b2wdz И при этом эти объекты должны появляться бесконечное количество раз Может кто-то сталкивался с подобной задачей? или подкинете идею как это можно реализовать? а еще лучше примерчик если видели в сети? Всем заранее спасибо за помощь!!! |
<svg style="width: 200px; height: 200px;">
<rect id="rect" width="100" height="100" fill="lightsalmon"></rect>
</svg>
<script>
var factor = 50;
var id = setInterval(function() {
rect.setAttribute('rx', factor);
rect.setAttribute('ry', factor);
factor--;
if (!factor) clearInterval(id);
}, 100);
</script>
|
<h3>Scroll down / up</h3>
<svg style="width: 200px; height: 200px; background-color: lavenderblush;">
<rect id="rect" width="100" height="100" fill="lightsalmon"></rect>
</svg>
<script>
var app = {
_rect: rect,
_factor: 0,
get factor() {
return this._factor;
},
set factor(v) {
this._factor = v;
this._factor = Math.max(0, this._factor);
this._factor = Math.min(50, this._factor);
},
refresh: function() {
this._rect.setAttribute('rx', this.factor);
this._rect.setAttribute('ry', this.factor);
}
};
document.onwheel = function(event) {
app.factor += Math.sign(event.deltaY);
app.refresh();
return false;
};
// ----------------
Math.sign = function(v) {
return v/Math.abs(v);
};
</script>
|
nerv_, Спасибо огромное за подсказки!
Буду пробовать что из выше написанного помогло - отпишусь обязательно!! |
| Часовой пояс GMT +3, время: 13:47. |