Передача значения между JS-функциями и CSS-свойствами
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',
Как это сделать ?
gsap.time() // GSAP -- это библиотека, все связано с анимацией.
.set('.img', {
...
transformOrigin: '50% 50% '+(500*koef)+'px',
...
})
.set - это что такое? У кого вызываем set?
Вам нужно через JS прописать CSS-правило?
я на разных сайтах спрашивал. Даже на StackOver , там много умных, но похоже ты самый толковый вопрос задал. Я думал не пугать народ, обрезал эту библиотечную функцию.
Сам не знаю, что за точка вначале. Думал вообще, что это класс :)
GSAP -- стандартная библиотека, здоровая , лезть туда не надо .
Но ты прав, она добавляет ступень , и надо эту учитывать.
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
Прямо хочется эту функцию себе забрать
мне нужно :
было ----- transformOrigin: '50% 50% 500px',
стало ----- transformOrigin: '50% 50% 1000px',
раз плюнуть , правда :)
Андрей, где кнопка "Решение " ?
Element.style .transformOrigin = "....."
коллега, у тебя стандартное решение . А там через внешнюю функцию с хрен пойми каким синтаксисом. Но ты почти угадал :)