Mail.ruПочтаМой МирОдноклассникиВКонтактеИгрыЗнакомстваНовостиКалендарьОблакоЗаметкиВсе проекты

Нулевой радиус, GSAP: плавная анимация.

serega dushka Знаток (382), на голосовании 21 час назад
я взял готовый код и решил сделать изменяемый радиус кольца картинок
На этом все застряло.
Мне самому dполне достаточно DevTools, вот код который изменил .
 // Enlarge gallery 
var сoef = 1;
var value = 1;
function enlarge(value) { coef = value; }
function enlargeFunc(coef) {
return function() {
enlarge(coef);
gsap.timeline().set('.img', {
transformOrigin: '50% 50% '+(500 * coef)+'px',
z: -(500 * coef),
transition: {
duration: 2, // Длительность анимации в секундах
ease: 'cubic-bezier(0.2, 1, 0.4, 1.5)' // "power1.out" 'cubic-bezier(.2, 1, .4, 1.5)' // Функция облегчения для анимации
} } )
} };
document.getElementById('shadow').addEventListener('mouseenter', enlargeFunc(2) );
document.getElementById('shadow').addEventListener('mouseleave', enlargeFunc(1) );
Это копия из оригинального кода, снизу эта часть отключена, здесь измененная часть

Идея проста: Призагрузке радиус 500рх, при мышке на тени -- 1000рх, плавно. Это все.

Ring-Gallery
-- результат.

Вопрос: почему в при загрузке страницы очевидно, что переменная coef = 0 , хотя я ей принудительно , где надо и где не надо , вручаю 1.

Вопрос 2 : кто знаком с этой библиотекой GSAP ? Как сделать изменение радиуса плавным ?
И картинку для крастоты.
Голосование за лучший ответ
Андрей Панарин Искусственный Интеллект (232780) 1 месяц назад
По первому вопросу - предлагаю вам вставить полный текст вашего скрипта ring-gallery.js на мою страничку, которая подсвечивает русские и английские буквы. Так вы увидите, где вместо английских букв по ошибке вписаны русские:
https://ortega-lab.ru/help/char-highlight.php


Согласитесь, соеф и коеф - разные вещи.

Полагаю, дело в том, что русская "С" предательски размещена на одной клавише с английской "це". По этой причине их легко перепутать, набрав букву в неверной раскладке. Я и сам так путался.
serega dushkaЗнаток (382) 1 месяц назад
Андрей, это сразу 5 баллов !
serega dushkaЗнаток (382) 1 месяц назад
Я сохранил Вашу страничку, конечно, вещь незаменимая.
Предложение: русский выделить красным, если рядом без пробелов стоит анлийский.

А по этой галерее -- русский вытравил , но не помогает . Странно, правда ? Простейший вопрос, почему конкретная переменная 0, что ее сбрасывает ?
Андрей Панарин Искусственный Интеллект (232780) Раньше coef был не задан (из-за русской буквы). Сейчас coef = 1:Полагаю, фокус в том, что его еще нужно применить. После объявления enlargeFunc помогает вот такой вызов:
 enlargeFunc(1)(); 
Вызов enlargeFunc(1) возвращает функцию, которая меняет стиль странички. А еще одна пара скобок вызывает возвращенную функцию.
serega dushkaЗнаток (382) 1 месяц назад
Андрей, все верно, спасибо ! Непонятно, зачем объявлять функцию , если меня интересует только 1 строка :)
Похожие вопросы