Передача значения между JS-функциями и CSS-свойствами

Question

Передача значения между JS-функциями и CSS-свойствами

serega dushka Знаток (383), закрыт 1 месяц назад

var coef = 1;

function enlarge(value) {
coef = value; }

document.getElementById('shadow').addEventListener('mouseover', enlarge(2) );
document.getElementById('shadow').addEventListener('mouseout', enlarge(1) );

.set('.img', {
transformOrigin: '50% 50% '+(500 * coef)+'px',
});

Я не могу изменить функцию и изменить свойства CSS каким-либо другим способом, потому что функция более сложная, содержит много свойств CSS.
Именно в таком виде она работает хорошо.
Я могу только добавить коэффициент.

Нужно transformOrigin: '50% 50% 1000px',

Как это сделать ?

Дополнен 1 месяц назад

gsap.time() // GSAP -- это библиотека, все связано с анимацией.
.set('.img', {
...
transformOrigin: '50% 50% '+(500*koef)+'px',
...
})

Answer 1

Андрей Панарин Искусственный Интеллект (233755) 1 месяц назад

.set - это что такое? У кого вызываем set?
Вам нужно через JS прописать CSS-правило?

serega dushkaЗнаток (383) 1 месяц назад

я на разных сайтах спрашивал. Даже на StackOver , там много умных, но похоже ты самый толковый вопрос задал. Я думал не пугать народ, обрезал эту библиотечную функцию.
Сам не знаю, что за точка вначале. Думал вообще, что это класс :)
GSAP -- стандартная библиотека, здоровая , лезть туда не надо .
Но ты прав, она добавляет ступень , и надо эту учитывать.

Андрей Панарин Искусственный Интеллект (233755) Если это рабочий код, то предлагаю поменять его так:

 var coef = 1;  
 
function enlarge(value) {   
    coef = value;
}

function enlargeFunc(coef) {
    return function() {
        enlarge(coef);
        gsap.time().set('.img', {  
            transformOrigin: '50% 50% '+(500 * coef)+'px'
        });
    };
}

document.getElementById('shadow').addEventListener('mouseover', enlargeFunc(2));  
document.getElementById('shadow').addEventListener('mouseout', enlargeFunc(1));

serega dushkaЗнаток (383) 1 месяц назад

gsap.timeline().set('.img', {
rotateY: .... ,
transformOrigin: '50% 50% '+(500*koef)+'px',
z: ... ,
backgroundImage: .... ,
backgroundPosition: ... ,
backfaceVisibility: ...
})

видишь, сколько. Если вместо koef -- 2, то все работает, все смещается.

Там ниже, вместо .set('.img', { .... дальше идет такое же, равнозначное
.add(()=>{
// когда мышь попадает в зону карусели
$('.img').on('mouseenter', (e)=>{ ....
$('.img').on('mouseleave', (e)=>{ ....

gsap.to ('.img', {opacity:1, ease:'power2.inOut'})

я дальше и не смотрел, но сейчас вижу, что автор и так прекрасно обрабатывает мышь. но для своих целей.
Видишь, можно прозрачность задавать, и даже timing
Прямо хочется эту функцию себе забрать

serega dushkaЗнаток (383) 1 месяц назад

мне нужно :
было ----- transformOrigin: '50% 50% 500px',
стало ----- transformOrigin: '50% 50% 1000px',
раз плюнуть , правда :)

serega dushkaЗнаток (383) 1 месяц назад

Андрей, где кнопка "Решение " ?

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

Answer 2

Dlazder Мудрец (12208) 1 месяц назад

Element.style .transformOrigin = "....."

serega dushkaЗнаток (383) 1 месяц назад

коллега, у тебя стандартное решение . А там через внешнюю функцию с хрен пойми каким синтаксисом. Но ты почти угадал :)

Dlazder Мудрец (12208) serega dushka, ну, я откуда знаю что именно тебе надо было. Ты сказал изменить css свойство с помощью js, вот пожалуйста