Ищу js раздвижения картинок

S

surfman

Старатель
Регистрация
20 Мар 2007
Сообщения
282
Реакции
13
Добрый день.
Такая задача. Есть 4-5 PNG-картинок(буквы логотипа), которые наложены друг на друга. При наведении мишки они должны плавно разьезжаться от центра в разные стороны, и при убирании курсора также сьезжаться обратно в одну.

Подскажите, где найти такой код js?
 
Правильный подход:
- отрисовать картинки в векторе
- сохранить в SVG
- каждому SVG-элементу дать свой класс
- Написать CSS, повесить на hover translate transform и задать transition

Не совсем разумно в реалиях 2017
- Продолжать использовать PNG для логотипа
- Используя 4-5 слоев абсолютно позиционировать в контейнере логотипа PNG-шки
- Написать CSS, повесить на hover translate transform и задать transition

Совсем неразумно:
- реализовать такую задачу на JS
 
Почему именно JS? Для просмотра ссылки Войди или Зарегистрируйся - конструируйте, довольно простой и понятный инструмент.
 
funnywheel написал(а):
Правильный подход:

Не совсем разумно в реалиях 2017
- Продолжать использовать PNG для логотипа
- Используя 4-5 слоев абсолютно позиционировать в контейнере логотипа PNG-шки
- Написать CSS, повесить на hover translate transform и задать transition
Нажмите для раскрытия...
Наверно это для меня самый понятный подход, если можно обойтись без JS. А чем в 2017-м PNG-шки уже не в тему?
 
Для "мелочей, отвечающих за анимацию" - jquery
Для анимации - tweenmax, timeline + backbone (для сложной анимации).
js - базовые конструкции

В конечном счете, если ты пишешь в js, то получаешь самописный фреймворк )
Фреймворки делают жизнь проще.
Лучше потратить время на их освоение, чем изобретать велосипед
 
так может на jquery есть готовый пример?
Просто я никогда с JS не вникал.
 
Войдите или зарегистрируйтесь для ответа.
Назад
Сверху