{% else-1 %}
Обновить
* Тема закрыта!
1. [автор] (12 янв 2016, 16:29) [1/0] [1] [спам] [под]

Всем привет!
Решил заняться написанием дизайна в стиле Material....
Так вот - Все сделал, все отлично, но эффект "волны" кривовато работает. Волновой эффект - как в Android 5.0 при нажатии - образуется волна, так вот суть в том что нажимая на кнопку, активируются сразу все и я не знаю как разделить их по-отдельности...
js:

var ripplyScott = (function() {
var circle = document.getElementById('js-ripple'),
ripple = document.querySelectorAll('.js-ripple');

function rippleAnimation(event, timing) {
var tl = new TimelineMax();
x = event.offsetX,
y = event.offsetY,
w = event.target.offsetWidth,
h = event.target.offsetHeight,
offsetX = Math.abs( (w / 2) - x ),
offsetY = Math.abs( (h / 2) - y ),
deltaX = (w / 2) + offsetX,
deltaY = (h / 2) + offsetY,
scale_ratio = Math.sqrt(Math.pow(deltaX, 2) + Math.pow(deltaY, 2));

console.log('x is:' + x);
console.log('y is:' + y);
console.log('offsetX is:' + offsetX);
console.log('offsetY is:' + offsetY);
console.log('deltaX is:' + deltaX);
console.log('deltaY is:' + deltaY);
console.log('width is:' + w);
console.log('height is:' + h);
console.log('scale ratio is:' + scale_ratio);

tl.fromTo(ripple, timing, {
x: x,
y: y,
transformOrigin: '50% 50%',
scale: 0,
opacity: 1,
ease: Linear.easeIn
},{
scale: scale_ratio,
opacity: 0
});

return tl;
}

return {
init: function(target, timing) {
var button = document.getElementById(target);

button.addEventListener('click', function(event) {
rippleAnimation.call(this, event, timing);
});
}
};
})();

ripplyScott.init('js', 0.75);
ripplyScott.init('js1', 0.75);
ripplyScott.init('js2', 0.75);
ripplyScott.init('js3', 0.75);

в конце я пытался их разделить, но не получилось.
Прошу помощи! Спасибо!
Добавлено 12.01.16 в 16:33:36:
скрин
Добавлено 12.01.16 в 16:35:25:
1111111111
Добавлено 12.01.16 в 21:03:57:
ап
Добавлено 13.01.16 в 14:52:11:
Ап

Прикрепленные файлы:
* PROFIWM_COM_7334_1435723_Bezymyannyj.png (536.16 кб)
* PROFIWM_COM_7334_1435723_Bezymyannyj.png (536.16 кб)

Изм. 1 раз. / Посл. изм. (13 янв 2016, 15:14)
2. [автор] (13 янв 2016, 14:55) [0/0] [0] [спам] [под]

ExiZ/GM, Апну, актуально

3.
DDR * 6.15
(13 янв 2016, 15:03) [0/0] [0] [спам] [под]

Пункт 2.6. Каждый
пользователь обязуется
использовать Поднятие темы
(АП) производится лишь раз в
24 часа. Первый пост в теме и
соответствует первому апу.

4. [автор] (13 янв 2016, 15:05) [0/0] [0] [спам] [под]
DDR,

2 часа разница.

5.
DDR * 6.15
(13 янв 2016, 15:08) [0/0] [0] [спам] [под]

ExiZ/GM, Пункт 2.6. Каждый пользователь обязуется использовать Поднятие темы (АП) производится лишь раз в 24 часа. Первый пост в теме и соответствует первому апу.

6. [автор] (13 янв 2016, 15:08) [0/0] [0] [спам] [под]
DDR,

Я прям извиняюсь *

7. (13 янв 2016, 15:10) [0/0] [0] [спам] [под]

ExiZ/GM, в читабельном виде выложи код, тогда помогу

8. [автор] (13 янв 2016, 15:14) [0/0] [0] [спам] [под]
Odo Veiz,

Так?

9. (13 янв 2016, 15:21) [0/0] [0] [спам] [под]

ExiZ/GM, более менее, а html код можно?

10. [автор] (13 янв 2016, 15:23) [0/0] [0] [спам] [под]
Odo Veiz,

Ой-ой, я в универе, последняя пара, а код на компе,если можно прийду домой, скину!? Ок?

Подписаны: 1
Скачать тему | Файлы темы | Фильтр сообщений