Эффект при наведении на картинку.
В этом видеоуроке мы разберем подробно – как сделать hover эффект при наведении на картинку курсора мыши с помощью стандартных мини-приложений программы. Используя всего одно приложение, вы сможете делать всплывающие окна и затемнение на картинке при наведении на нее мыши. Также можно разместить любой символ из любого веб-шрифта, и он тоже будет появляться вместе с затемнением. Смотрите как это сделать. Повторяйте все действия, применяйте творчество. Я уверен у вас получиться сделать свою уникальную анимацию.
Эффект при наведении на картинку. Создание лайтбокса с картинкой.
В этом видео уроке я покажу вам, как сделать вот такой эффект при наведении на картинку курсора мыши, такую вот заглушку, в программе Adobe Muse. Чтобы она открывалась при наведении мыши, а при клике открывалась полноценная большая картинка.
Выглядит всё это вот так в режиме дизайна. Мы создадим сейчас новую страницу и попытаемся всё воссоздать заново. Давайте создадим сразу лайтбокс, точнее я возьму просто пустую композицию и поставлю здесь «лайтбокс». Теперь добавим в наш лайтбокс картинку. «Файл», «поместить», и я выберу картинку, размещу её на странице, перейду в перспективу и поставлю ей размер 640.
Теперь беру эту картинку, нажимаю Ctrl+C, передвину её сюда, выделяю данный блок композиции и нажимаю Ctrl+V, что бы картинка встала внутрь этого блока. Выделяю снова нашу предыдущую картинку, и делаю из неё миниатюру размером 200/200. Выбираю вот здесь привязку и делаю 200. «ОК». И поставлю данную миниатюру в триггер данного лайтбокса. Растяну немного вниз, не очень хорошо видно.
Сделаю триггеры сверху. Два триггера уберу отсюда (Delete), а вот этот триггер, который у нас маленький остался, я сделаю из него блок тоже 200/200. «ОК», получилось, и перетяну эту картинку сюда. Всё. Таким образом мы создали обычный лайтбокс.
При просмотре это у нас будет выглядеть во так – мы наводим сюда курсор мыши, нажимаем и у нас открывается полноценная картинка. Немного я промазал, надо будет подвинуть картинку внутри триггера и убрать так же заливку. «Ок».
Эффект при наведении на картинку. Создание заглушки.
Теперь нам нужно создать заглушку для данной картинки. Для данной миниатюры этого лайтбокса.
Давайте немного уменьшим экран. Растяну по длине наш сайт и создам ещё одну пустую композицию. Перетягиваю его на страницу сайта. Здесь выставляю сразу «разрозненно», «включение пи наведении курсора», и «скрыть целевой объект после перемещения курсора за пределы области». Переход оставляю – «затухание», здесь могу немного уменьшить скорость перехода или оставить такую же, выставляю здесь «триггеры сверху» и «изначально скрыть всё».
Убираю значок «разрешить перелистывание», поскольку он нам не понадобится. Всё остальное оставляю по умолчанию. Нажимаю правой клавишей мыши на данный лайтбокс, «отменить все использованные стили», и «удалить содержимое».
Нажимаю на триггер «отменить все использованные стили», и содержимого в нём нету. Закрою библиотеку, сделаю немного больше экран, целевой объект и триггер данного виджета нужно сделать 200 на 200 пикселей. Я перехожу в настройки перспективы и выставляю здесь 200 на 200. «Ок», такие же как размеры триггера в основном дайтбоксе. Выделяю данный триггер и так же делаю его размеры 200 на 200 пикселей. «ОК».
Эффект при наведении на картинку. Сборка.
Мы получили два равных квадрата. Теперь создам ещё текст, напишу здесь «+», выделю его, зайду в текст, поставлю размер 72, и «по центру», также можно поставить жирность. Выходу из режима редактирования текста, сделаю этот блок немного поменьше, например, вот так, и перетяну его в целевой объект нашего лайфбокса. Размещу его ровно по центру, а сам текст сделаю белым цветом. Выделю сам целевой объект, и сделаю ему заливку чёрным цветом (можете любым другим), с непрозрачностью, например, 70%(71 пускай будет). Далее беру данный триггер и перетягиваю его поверх данного целевого объекта. Таким образом, мы получили такую вот заглушку для картинки. Я закрываю настройки текста. И теперь эту заглушку нам необходимо разместить в триггер нашего лайфбокса. Я сделаю немного меньше масштаб, передвину вверх, беру данную заглушку и перетягиваю в триггер лайфбокса (нам нужно очень точно попасть в триггер, что бы совпало). «ОК». На этом, в принципе всё.
Эффект при наведении на картинку. Просмотр.
Давайте посмотрим, что у нас получилось. Я нажимаю на просмотр, есть такая вот миниатюра при наведении курсора мыши появляется такой плюсик с затенением. Если я нажимаю на этот плюсик, открывается картинка во всю её ширину, в полный размер. Вот такой эффект при наведении на картинку.
Таким вот образом, вы можете делать заглушки для ваших картинок, которые вы вставляете в лайтбокс в программе Adobe Muse.
На этом всё, дорогие друзья, данный урок закончен. Если вам понравился данный урок, ставте лайки, пишите комментарии, подписывайтесь на мой канал, если вы этого ещё не сделали. И смотрите мои предыдущие и следующие видео уроки.
Автор видеоурока
Дмитрий Шаповалов