Оживляем портфолио в Behance при помощи анимаций!
Behance — это онлайн-платформа, где представители творческих профессий презентуют свои кейсы!
Исторически Behance был известен среди графических дизайнеров, иллюстраторов, веб-дизайнеров и арт-директоров, но также возможно найти на нём немного анимационного дизайна, фотографии и рекламы.
Задача кейса — показать не только финальный результат, но и весь процесс, который за ним стоит. На Behance я очень ценю историю создания проекта с подробностями задачи, проведённой аналитической работой, материалами и, конечно, результатом.
Большинство пользователей могли столкнуться с проблемой оптимизации встраивания gif и видео в проект на Behance. Для того чтобы публиковать гифки/видео без потери визуала, а ролики воспроизводились автоматически и постоянно, необходимо прибегать к таким вариантам загрузки контента как видео с Adobe Cloud, Embed-видео с YouTube/Vimeo/Vkontakte и gif-анимацией и другое.
Максимальная ширина видео, загружаемого непосредственно на Behance, составляет 1280 пикселей. Я рекомендую встраивать видео с помощью YouTube или Vimeo, чтобы разместить ролик без полей.
Загрузка видео через сервис Vimeo
Vimeo – это бесплатный видеохостинг, на котором можно так же выкладывать видео (до 500кб в неделю бесплатно, с платным аккаунтом до 20гб), смотреть, комментировать, лайкать и делиться ими со своими друзьями. К сожалению пока нет русскоязычной версии, но отсутствует реклама
- Зарегистрируйтесь и загрузите видео на Vimeo;
Стоит помнить, что используя различные хостинги по типу YouTube/Vimeo мы также будем иметь дело с проигрывателем и логотипами этих сервисов. Если с YouTube выхода пока нет, то платный аккаунт Vimeo предоставляет возможность убрать плеер.
- Нажмите кнопку "Share";
Многие на данном этапе испытывают сложности. Данное действие совершается именно на публичной, доступной для других пользователей станице, а не в настройках проекта.
- Далее разворачиваем вкладку "Show options" и активируем "Autoplay this video" и "Loop this video";
- В пункте "Embed" скопируйте код;
Важно копировать код после установки всех необходимых вам параметров видеоролика, в противном случае многие команды будут отсутствовать.
- Вставьте скопированный код в окно для встроенного кода в режиме создания проекта на Behance;
А вот на данном моменте начинается самое интересное! Браузер Chrome, самый популярный браузер на 2021 год, после одного из своих обновлений, отключил возможность авто воспроизведение мультимедиа файлов если в них присутствует звук. Это решение было принято, скорее всего, для того чтобы обезопасить пользователей от нежелательных звуковых происшествий.
Если в вашем файле нет звуковой дорожки, то Chrome всё равно не воспроизведёт ролик. Виной тому наличие в проигрывателе настройки громкости звука. Если она не отключена, то Сhrome не позволит выполнить autoplay.
Дабы обойти это нюанс, добавляем команду "muted=1" что добавляет в проигрыватель бесшумный режим. Прерывание при параллельном проигрывании нескольких видео в одном окне браузера можно обойти с помощью "autopause=0".
Для того чтобы все заработало необходимо вставить эти параметры правильно и в нужное место. Для этого обратим внимание на структуру кода. В начале идет ссылка по которой можно перейти к просмотру видео, а в конце этой ссылки знак "?". После которого уже на другой строке подряд идут все остальные параметры настраиваемые еще на Vimeo. После названия каждого параметра есть знак «=», а так же установленное значение. Например "1", это означает активировать параметр, а "0" означает обратно. И все эти параметры отделены друг от друга амперсандами "&".
Исходя из этого наш код для будет выглядеть так:
Так же можно заменить размеры видео в скопированном коде. Для этого измените значения параметров "width" и "height" в пикселах.
- Сохраните изменения и обновите страницу;
Готово!
Пожалуйста не забывайте подписываться, ставить лайки, и делиться с другими, это очень мотивирует и вдохновляет меня, а так же если есть вопросы, пишите комментарии под статьей, с удовольствием отвечу!
#ux #uxui #behance #it-технологии #технологии #дизайн
#графический дизайн #animation #анимация #статья дзен