Анимированные эффекты изображения.

Chistota · Сообщение **Chistota** » 08 ноя 2013, 15:11

Друзья, подскажите. Раньше уже где то встречал, но сейчас уже 2 дня не могу найти.
Нужно чтоб картинка при наведении на неё мыши немного увеличивалась, выделялась, а после убирания мышки приходила опять в первоночальное состояние.
Среди внешних расширений нашел только затемнение либо осветление.
В свойствах самого изображения пытаюсь менять настройки анимации но ничего не выходит.

SuperBatya · Сообщение **SuperBatya** » 08 авг 2014, 11:35

Свойство изображения - События - Добавить... А дальше добавляешь события на мышку: onmouseover - наведение, onmouseout - при убирании мышки... А дальше как фантазия сработает... Я пользуюсь в основном функциями "установить изображение" либо "отображать с эффектом", "скрыть" либо "скрыть с эффектами"

Сообщение **vlad** » 08 авг 2014, 12:53

Поставьте "управляемое изображение".

Gregdays · Сообщение **Gregdays** » 14 окт 2014, 09:33

Подскажите пожалуйста! Все пробую и пробую! Не могу понять почему не получается!
Я взял изображение, и при наведении мне необходимо чтоб оно стало прозрачнее.
А когда убираешь, возвращалось в прежнее состояние.

Что нужно делать чтоб так получилось?)

Благодарю заранее!

Сообщение **vlad** » 14 окт 2014, 11:34

Gregdays писал(а):Подскажите пожалуйста! Все пробую и пробую! Не могу понять почему не получается!
Я взял изображение, и при наведении мне необходимо чтоб оно стало прозрачнее.
А когда убираешь, возвращалось в прежнее состояние.

Что нужно делать чтоб так получилось?)

Благодарю заранее!

Проще всего через "управляемое изображение". Если не хотите так, то через события- на исходное изображение накладываете "более прозрачное", в менеджере объектов делаете его невидимым, затем в свойствах применяете события: onmouseover- показать, onmouseout- скрыть.

SuperBatya · Сообщение **SuperBatya** » 24 дек 2014, 09:28

Я же уже писал: Свойство изображения -> События -> Добавить... Дальше добавляешь события на мышку: onmouseover - наведение, onmouseout - при убирании мышки... А дальше как фантазия сработает... Если тебе нужно прозрачность, добавь два действия: 1-е действие: "Анимировать" с прозрачностью 75% на событие onmouseover и еще 2-е действие: "Анимировать" с прозрачностью 100% на событие onmouseout... И вуаля! И главное не забудь: нужно выбрать из списка "Цель" тот объект, к которому применяешь действие...

Сообщение **nika** » 24 сен 2015, 03:19

Здравствуйте!
Вижу, вы прекрасно разбираетесь в теме.
Можно вас попросить алгоритмизировать "для блондинки"? :-):

Хочу, чтобы объект зуммировался при наведении мыши.
Что делать? Куда нажимать?
1.
2.

Заранее благодарю за помощь!

Сообщение **Gudwinn** » 24 сен 2015, 06:45

Gregdays писал(а):Источник цитаты Что нужно делать чтоб так получилось?)

Вы наверно все прикалываетесь))) Что бы при наведении на изображение оно становилось прозрачнее, нужно в свойствах изображения перейти в CSS анимацию, в нижнем окне при триггере hover выбрать opacity и в поле указать: .5 (точка обязательно перед цифрой стоять должна) это будет наполовину прозрачнее при наведении, 1 - это вообще непрозрачное будет, короче можно наладить на свой вкус прозрачность. А в исходнике элемента - изображения, во вкладке "особый стиль" вбиваем это:
-webkit-transition: all .5s linear;
-o-transition: all .5s linear;
transition: all .5s linear;

Вот и всё)))
Точно по такому же принципу делается и увеличение при наведении и уменьшении при отводи курсора. Только в hover выбираем ширину и высоту(2 строки надо добавить) и их делаем чуток больше.

Зачем чтото вбивать?) В свойствах изображения, выбираем событие onmousemove при наведении и onmouseout при отводе курсора с объекта и выставляем, что нам нужно чтобы происходило при этих действиях, к примеру анимировать и там выставляем прозрачность или увеличение и т.д.

Сообщение **Gudwinn** » 24 сен 2015, 14:48

gladiolus0707 писал(а):Источник цитаты Зачем чтото вбивать?) В свойствах изображения, выбираем событие onmousemove при наведении и onmouseout при отводе курсора с объекта и выставляем, что нам нужно чтобы происходило при этих действиях, к примеру анимировать и там выставляем прозрачность или увеличение и т.д.

Здравствуйте, тут какой в общем прикол, через события не получится прозрачность придать картинке и увеличение-уменьшение, и к тому же если не "вбивать" в особый стиль элемента картинки код который я выше привёл, то обратный эффект прозрачности и уменьшения, будет резким, а с тем кодом будет плавным. Не ну конечно через события можно сделать эффект плавный полного исчезновения, но исходя из просьбы написавшего, я понял что нужно именно частичная прозрачность, частично прозрачным не получится через события сделать. А самый главный прикол который никто из Вас не учёл, это то что через hover в CSS анимации эффекты вообще не тормозят отображение эффектов, а если делать через события, то появится куча скриптов в исходном коде страницы, тормозящих не значительно отображение сайта, но всё же, короче к событиям нужно стараться прибегать в крайних случаях, когда без эффектов именно "событийных" ну никак не обойтись)))

Отправлено спустя 4 минуты 39 секунд:

Gregdays писал(а):Источник цитаты Подскажите пожалуйста! Все пробую и пробую! Не могу понять почему не получается!
Я взял изображение, и при наведении мне необходимо чтоб оно стало прозрачнее.
А когда убираешь, возвращалось в прежнее состояние.

Что нужно делать чтоб так получилось?)

Благодарю заранее!

Вот посмотрите, не поленился сделал Вам пример http://forum.offershop.ru/ , я полагаю это то что надо? Вот исходники http://forum.offershop.ru/forumhelp.zip

Сообщение **nika** » 24 сен 2015, 16:48

Ну, конечно, это как раз то, что надо!!
Прекрасный вы сделали пример.
Сегодня попробую так же :-):

Отправлено спустя 1 час 10 минут 25 секунд:
Отлично!
У мня получилось по вашему алгоритму сделать картинку полупрозрачной при наведении.

1. Зашла в свойствах изображения во вкладку CSS3 анимация
2. Выбрала: Переходы - Добавить
3. В окне Правка перехода выбрала: Триггер- hover, свойство - opacity, значение - .5

Ура! Получилось.
Плавно сделать не удалось, так как я не поняла где "особый стиль" в свойствах изображения :smu:sche_nie:

и куда вбивать вот это все:
-webkit-transition: all .5s linear;
-o-transition: all .5s linear;
transition: all .5s linear; ?

Что касается увеличения при наведении курсора - тоже получилось! Но не совсем то. У меня картинка уходит в ноль :-):

Я делала так:

1. Зашла в свойствах изображения во вкладку CSS3 анимация
2. Выбрала: Переходы - Добавить
3. В окне Правка перехода выбрала: Триггер- hover, свойство - whidth, значение - 2
4. Выбрала: Переходы - Добавить
5. В окне Правка перехода выбрала: Триггер- hover, свойство - height, значение - 2

Прикольно, конечно, получилось, но не совсем то :hi_hi_hi:

Сообщение **Gudwinn** » 24 сен 2015, 17:00

nika писал(а):Источник цитаты 3. В окне Правка перехода выбрала: Триггер- hover, свойство - whidth, значение - 2
4. Выбрала: Переходы - Добавить
5. В окне Правка перехода выбрала: Триггер- hover, свойство - height, значение - 2

Прикольно, конечно, получилось, но не совсем то

В значениях указывайте до какой ширины или высоты вы хотите сделать изменение при наведении, указывайте допустим так (указывайте Ваше значение): 280px

Касательно "особого стиля" клацаете по любому элементу (один раз) нажимаете правую клавишу мыши, выбираете HTML исходник объекта (почти внизу списка), переходите туда (клацаете по этой надписи) и видите вкладку "особый стиль", туда тоже клацаете, и вносите туда этот код для плавности.

Gudwinn писал(а):Здравствуйте, тут какой в общем прикол, через события не получится прозрачность придать картинке и увеличение-уменьшение, и к тому же если не "вбивать" в особый стиль элемента картинки код который я выше привёл, то обратный эффект прозрачности и уменьшения, будет резким, а с тем кодом будет плавным. Не ну конечно через события можно сделать эффект плавный полного исчезновения, но исходя из просьбы написавшего, я понял что нужно именно частичная прозрачность, частично прозрачным не получится через события сделать. А самый главный прикол который никто из Вас не учёл, это то что через hover в CSS анимации эффекты вообще не тормозят отображение эффектов, а если делать через события, то появится куча скриптов в исходном коде страницы, тормозящих не значительно отображение сайта, но всё же, короче к событиям нужно стараться прибегать в крайних случаях, когда без эффектов именно "событийных" ну никак не обойтись)))

Свойства обьекта\события\onmousemove\анимировать\непрозрачность
там же можно задать ширину и высоту при наведении чтобы увеличивать

Сообщение **Gudwinn** » 24 сен 2015, 17:33

gladiolus0707 писал(а):Источник цитаты Свойства обьекта\события\onmousemove\анимировать\непрозрачность
там же можно задать ширину и высоту при наведении чтобы увеличивать

Я пытался сделать прозрачность через анимирование, у меня наглухо исчезало изображение, а onmouseout вообще не работал, курсор показывало, а картинка не появлялась обратно, сами попробуйте, мне кажется Вы теоретизируете. У меня корректно ранее получалось только двигать на определённое расстояние объекты через анимирование, но честно говоря я этими вещами и не озадачивался, так как выше уже писал, что лишний раз код исходный скриптами нагромождать, это не есть гуд, да и более геморно это...

Gudwinn писал(а):Я пытался сделать прозрачность через анимирование, у меня наглухо исчезало изображение, а onmouseout вообще не работал, курсор показывало, а картинка не появлялась обратно, сами попробуйте, мне кажется Вы теоретизируете. У меня корректно ранее получалось только двигать на определённое расстояние объекты через анимирование, но честно говоря я этими вещами и не озадачивался, так как выше уже писал, что лишний раз код исходный скриптами нагромождать, это не есть гуд, да и более геморно это...

Если бы не пробовал не написал. Всё нормально работает. Моё дело написать как инструментами программы это можно осуществить. А использовать коды или встроенные инструменты это уже на вкус и цвет каждому своё... пример

Сообщение **nika** » 24 сен 2015, 18:00

Спасибо, что так быстро реагируете!
Пробую..

Сообщение **Gudwinn** » 24 сен 2015, 18:01

gladiolus0707 писал(а):Источник цитаты это уже на вкус и цвет каждому своё... пример

Не подумайте что я хочу с вами спорить, но какого вида Вы указываете значение прозрачности в анимировании? %, px или какая то комбинация? Кстати приведенный пример не совсем то, о чём речь, надо что бы не прозрачнная картинка, становилась полупрозрачной при наведении, и обратно, с помощью событий. Сможете накидать простейший пример wbs? Может я чё не догоняю?

в примере на картинках сверху стоят формы если вы заметили, и они с 30% прозрачности переходят в 100%. Свойства обьекта\события\onmousemove\анимировать\непрозрачность(именно здесь указываем цифру т.е. если там пишем 100 то непрозрачная, если пишем 0 то абсолютная прозрачность) Не вижу смысла в накидывании примера.

Сообщение **Gudwinn** » 24 сен 2015, 18:15

gladiolus0707 писал(а):Источник цитаты Не вижу смысла в накидывании примера.

Прошу прошения, я короче зафэйлил, я вместо целых цифр (0-100), вводил .1 - 1 Чё то даже в голову не пришло что в проге может быть балаган со значениями...

Сообщение **nika** » 24 сен 2015, 18:32

Супер! У меня все получилось!!
Спасибо!

Алгоритм Гудвина отличный и помог решить задачу. :ki_ss:

А твой, гладиолус 0707, на этот раз не сработал :-(

у меня тоже ничего не получилось..
Уверена, что у тебя самого получается, может ты просто чего-то не договариваешь или что-то упускаешь в объяснении :-):

Отправлено спустя 1 минуту 36 секунд:
О! Я вижу вы тут разобрались! Ну и отлично!
Попробую так в другой раз :bra_vo: