пишу уверенно "простой", потому что если все это удалить , все зашевелится , с коэффициентом 1. А хочется с коэффициент 2.
// тень в наличии снизу
<div id="shadow" class="shadow"></div>
я придумал , с помощью
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),
duration: 2, // Длительность анимации в секундах
ease: "power1.out" // Функция easeing анимации , см. оригинал
} } )
} };
смысл простой: наводим мышь coef = 2, убираем coef =1. Все
(так в оригинале -- transformOrigin: ... px ; -- смещение переспективы
z: - ... без рх ---- радиус, смещение картинок от центра) .
Видите, я там ввел может избыточные var value = 1; но не могу понять :
ВОСПРОС:
почему при загрузке страницы эта сoef= 0 ?.
Я не вижу другой причины , почему все картинки собраны в кучу при первой загрузке.
ВОСПРОС 2 : Кончено , хочется сделать движение плавным с каким-нибудь timing-function: ease; но видно ,что делается не стандартным CSS , а через библиотеку GSAP . У нее непонятные функции, что за что отвечает, не ясно. Надо разбираться. Вряд ли кто-то из местных ее знает.
Смотреть в оригинале
Ring-Gallery, там полный код.
Должны картинки выставляться по кольцу радиусом 500 ... 1000px, и еще крутиться. Это уже работает .
Связанный вопрос: чисто для картинки
Галерея через сборку строки JS не позиционируется? . его нет смысла изучать , этому скрипту противопоказаны строки-сборки из HTML .
Изначально хотель свободное число картинок N и градусы : 360/N. Xnj-nj сразу не въехал, так и оставил. Там сложно уйти от 10 картинок/36 градусов . Если нет, значит и не надо.
