Как вставить анимацию в wordpress. Как добавить анимированный GIF на WordPress. Когда и почему необходимо использовать CSS анимацию

(англ. Graphics Interchange Format - формат для обмена изображениями) - популярный растровый формат графических изображений, который способен хранить сжатые данные без потери качества в формате не более 256 цветов.

Формат GIF поддерживает анимационные изображения. Они представляют собой последовательность из нескольких статичных кадров, а также информацию о том, сколько времени каждый кадр должен быть показан на экране.

Animated GIF стал очень популярным в интернете последнее время, этот формат позволяет вставлять короткие маленькие видео-фрагменты в зацикленном режиме. Но если вы попытаетесь добавить анимированную GIF картинку на свой сайт WordPress, зачастую она может превратиться в обычное статичное изображение.

В этом уроке мы разберемся, в каких случаях анимированный GIF превращается в обычную картинку, как этого избежать и как правильно вставлять Animated GIF в ваши записи на WordPress.

Почему Animated GIF становится статичной картинкой в WordPress?

В WordPress встроена удобная Библиотека медиа-файлов, через которую можно загружать и добавлять новые картинки на сайт. Когда вы загружаете новую картинку, WordPress автоматически создает несколько копий этой картинки в разных размерах.

WordPress создает 3 копии картинки :

• Thumbnail (Миниатюра изображения)
• Medium (Средний размер)
• Large (Большой размер)

Кроме этого, конечно же, остается и оригинальное изображение в полном размере.

Так вот, загвоздка с GIF анимацией состоит в том, что WordPress при загрузке и создании копий такого файла сохраняет только первый кадр из этой анимации как копию для миниатюры, среднего и большого размера.

И если вы вставите в запись эту GIF-ку в одном из этих размеров, вы получите статичное изображение с первым кадром вместо анимации.

Как правильно добавлять Animated GIF в WordPress

В режиме редактирования записи загрузите свою GIF-ку, нажав на кнопку Добавить медиафайл :

После загрузки файла, выберите его размер из выпадающего меню внизу справа в блоке Настройки отображения файла .

Единственный вариант, с которым будет работать анимация картинки - это Полный размер .

Просто выберите "Полный" и вставьте картинку в свою запись на WordPress.

Полный размер - это исходный оригинальный GIF файл, который не подвергся изменениям со стороны WordPress при создании уменьшенных копий, и, к сожалению, только такой вариант остается рабочим.

Неудобства с Animated GIF в WordPress

Самым главным неудобством в данной ситуации является разрешение (размер в px) оригинального GIF файла.

Если, скажем, ваша GIF-ка по ширине составляет 700 px, а ширина основной колонки записи для вашей темы предусматривает 650 px, то вставленная в запись GIF-ка будет выходить за рамки колонки, и это будет выглядеть очень некрасиво.

В таком случае вам придется отредактировать и уменьшить разрешение GIF файла на компьютере до нужного размера перед загрузкой на WordPress.

Animated GIF картинки, как правило, занимают больше места. Это потому, что они по сути состоят из набора склеенных статичных изображений. Чем больше кадров в анимации, тем больше финальный размер файла.

Поэтому не рекомендуется слишком увлекаться Animated GIF и добавлять много таких файлов на одну страницу. Это попросту увеличит вес такой страницы до неразумных размеров, а также увеличится время на загрузку. Этого никто не любит: ни посетители, ни поисковики, ни вы сами.

Если вы пользуетесь сервисом Giphy для поиска анимированных картинок, попробуйте бесплатный плагин Giphypress . С его помощью вы можете искать любые GIF картинки по базе Giphy и вставлять их на свой сайт WordPress, не покидая админки.

Надеемся, мы помогли вам разобраться, как правильно добавлять Animated GIF в запись на WordPress.

Обновлённая запись — Смотрите здесь!!!

Привет! Сегодня я расскажу о плагине , который может оживить ваш сайт или блог WordPress. Если быть точнее то речь пойдёт о создании анимации. Анимация добавляет к какому-либо элементу вашего сайта определённый эффект. Например можно анимировать изображение, чтобы оно при открытии сайта появлялось из ниоткуда, то есть всплывало. В настройках плагина имеется более 60 различных эффектов, которые вы сможете применить на деле.

Плагин анимация WordPress

Сразу скажу , что плагин имеет простые настройки, то есть вам не понадобится много времени чтобы его настроить и разобраться в нём. Итак, плагин, который превращает статические объекты в динамические, называется — Animate It . Установить данный плагин вы сможете прямо из своей админ-панели wordpress, для этого перейдите по вкладке: Плагины — Добавить новый , введите название плагина в форму поиска, нажмите Enter, установите и активируйте найденный плагин.

Чтобы перейти на страницу настроек плагина, перейдите по вкладке: Настройки — Animate It .

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

— Scroll Offset (in percentage) , здесь можно указать смещение прокрутки в процентах для эффектов, но лучше оставьте как есть, так как по умолчанию указано оптимальное значение.

— Enable on Smartphones , здесь вам нужно указать включать ли эффекты на смартфонах?

— Enable on Tablets , здесь укажите включать ли эффекты на планшетах?

— Custom CSS , оставьте данное поле пустым.

В конце сохраняем настройки.

У вас откроется окно для создания анимации . Разберём данные настройки.

— Animation Style , здесь вам нужно выбрать эффект для анимации. Посмотреть эффект в живую вы сможете прямо в данном окне. Для этого просто выберите один из эффектов и картинку вверху тут же отобразит его.

— Delay (in seconds) , здесь можно указать задержку в секундах перед началом анимации. То есть при открытии страницы эффект отобразится не сразу, а через установленное вами время.

— Duration (in seconds) , здесь можно указать длительность эффекта в секундах.

— Animate Infinitely , здесь если указать да, то анимация будет бесконечной.

— Animate On , здесь нужно выбрать один из вариантов. Click — эффект будет повторятся при нажатии на элемент. Hover — эффект повторится при наведении курсора мыши на элемент. Scroll — эффект при прокручивании.

В конце нажимаем на кнопку — Insert , чтобы добавить на страницу шорткод анимации.

Далее , на странице у вас появится шорткод с макетом по умолчанию, то есть будет отображаться произвольный текст для показа анимации. Данный текст вам нужно просто удалить и вставить свой текст или какой-либо другой элемент. Добавлять в шорткод можно всё что угодно, то есть всё что можно создать с помощью визуального редактора wordpress. Фото, видео, текст, блоки, таблицы, вкладки и т.д.

Всё, при открытии страницы эффект отобразится в указанном вами элементе. На этом у меня всё, если у вас остались вопросы по статье или по плагину, то обязательно напишите мне!

На многих сайтах можно встретить анимированное оформление как отдельных частей элементов, так и целые веб-страницы. Особенно это пользуется популярностью в одностраничных сайтах, где чаще всего предлагают купить какой-нибудь товар. А красивая анимация, приятный дизайн помогает привлечь внимание пользователей. Сегодня рассмотрим один интересный плагин, который позволяет очень легко добавить анимацию CSS в статьи, на страницы WordPress.

Вы сможете анимировать практически все — от целых блоков до обычного текста. У плагина Animate It! имеется огромный выбор различных эффектов анимации. В статье « » я давал ссылку на библиотеку стилей анимации в качестве демонстрации. Так вот, этот плагин включает в себя все эти шикарные эффекты и не требует возни с исходным кодом.

Некоторые особенности плагина Animate It!

• Возможность выбора применять анимацию: по клику, по наведению
• Больше 50 эффектов анимации
• Добавлять анимацию в посты, страницы
• Есть возможность добавлять анимацию в виджеты, предварительно анимации с примером.
• Прочее.

Настройка плагина Animate It!

После установки и активации плагина у вас в настройках появится новая вкладка «Animate It! ». В ней содержится пару параметров о вкл/выкл анимации на смартфонах, таблетках. Главные настройки и управление находятся в визуальном редакторе.

При клике на эту кнопку откроется модальное окно, где можно выбрать стиль анимации и обозначить дополнительные параметры.

Давно и уже успели укорениться среди разработчиков.
Итак. С помощью плагинов, которые представлены в этой подборке, вы сможете создать современный сайт с отличной динамикой. Я думаю, каждый человек, который интересуется разработкой сайтов, видел эти плагины в действии. При прокрутке страницы, блоки, различные элементы или текст плавно появляются , выезжают, крутятся и пр. Как показывает практика, клиентам очень нравятся такие фентифлюшки.
Внедрить эффекты при скроллинге в страницу не так сложно, как может показаться на первый взгляд. Все что нужно - это качественный плагин и прямые руки. Конечно, начинающий верстальщик может испытывать трудности, но стоит немного посидеть, разобраться в принципах работы и задача покажется очень простой.
Несмотря на то, что анимация на сайте многим по душе, не стоит переусердствовать, иначе у вас получится перегруженная, визуально плохо воспринимаемая страница, в которой все внимание будет приковано ко всем этим «свистелкам», а не к информации, которую требуется донести до посетителя. К тому же, чем больше подключено скриптов, тем медленнее работает страница. В старых браузерах все это дело может вовсе не работать. Подключайте эффекты с умом. Зачастую, простого плавного, ненавязчивого появления блоков хватает. Такой эффект придает странице плавности и динамики, делает сайт живым. На своей практике мне пришлось много повидать сайтов с эффектами без чувства меры. От такого просто тошнит - единственное чувство, которое возникает. Но, наверное, разработчики надеялись на «Вау эффект». Итак. Используйте все с умом и в меру!
Все плагины абсолютно бесплатны , но я бы рекомендовал ознакомиться с лицензий, так как в некоторых случаях для использования в коммерческих целях нужно выполнить ряд условий.

WOW.js

Неплохой плагин для реализации анимации элементов при скроллинге . Он имеет очень много анимированных вариантов появления блоков и довольно легко настраивается.

ScrollMagic

Еще один популярный плагин, с помощью которого можно реализовать сложную анимацию, которая будет срабатывать при прокрутке ролика мышки . В данном случае, плагин позволяет делать действительно сложные , эффекты движения, смены фона на страница и вообще деформации фигур. ScrollMagic часто используют на промо-сайтах, где требуется много анимировать.

Scrollme

Простой и легкий плагин с помощью которого можно реализовать эффектную анимацию при прокрутке . Вы можете масштабировать, вращать, двигать, уменьшать или увеличивать прозрачность любого элемента.

Superscrollorama

Superscrollorama - мощный, но тяжелый плагин для создания анимации при прокрутке . В его арсенале имеется множество различных настроек для анимации текста, отдельных DIV элементов, включая эффекты.
Более детальную информацию можно найти в документации к данному jQuery плагину.

onScreen

Отличный плагин, который мы часто используем в своих проектах. От позволяет легко и быстро сделать различные эффекты появления элементов при прокрутке страницы . Плагин легкий и не грузит страницу.

OnePage

jQuery плагин OnePage позволяет разбить страницу на отдельные экраны с высотой 100% и анимировать переход по ним. Требуется лишь легкий толчок, чтобы начался скроллинг к следующему экрану. Такой же эффект использовался на промо-сайте 5s.
Имеются проблемы с , как и практически во всех подобных плагинах. Если текст не помещается по высоте, то он просто обрезается и полоса прокрутки не появляется.

FSVS

Очень похожий по функционалу плагин на предыдущий. Позволяет сделать скользящую прокрутку по экранам с помощью css3. Имеет аналогичную проблему при просмотре на телефонах. Переход по экранам в виде отдельных слайдов возможен как с помощью ролика мышки, так и посредством клика на точечную боковую навигацию.

jInvertScroll

jInvertScroll позволяет создавать классный горизонтальный parallax скролиинг . В то время, когда Вы крутите ролик мышки вниз, все элементы на странице движутся горизонтально, к тому же с разной скоростью, что создает parallax эффект.

Waypoints

Waypoints - это jQuery плагин, который позволяет показывать любой элемент при нахождении посетителя в заданной точке страницы. Например, когда посетитель дочитывает статью на сайте и приближается к концу текста, сбоку страницы всплывает информационное окно с предложением почитать следующую статью или похожую статью.

Scrollocue

Оригинальный плагин для специфических задач. Позволяет передвигаться по странице выделяя блоки простым кликом правой клавишей мыши по странице. С каждым новым кликом выделяется элемент ниже, тем самым страница немного прокручивается. Также поддерживается скроллинг стрелками на клавиатуре.

Scrolling Progress Bar

Интересное решение, с помощью которого можно показать прогресс прочтения информации на странице. Также есть возможность разбить текст на разделы и все это будет визуально выводиться в любом удобном для вас месте на странице.

multiScroll.js

multiScroll.js - это jQuery плагин, похож на два предыдущих плагина скользких экранов , но имеет одно значительное отличие. Если в предыдущих случаях просто перелистывался экран, то этот больше похож на современный слайдер изображений . Экран разделяется на две равных части и левая перелистывается вверх, а правая вниз. Таким образом контент практически разрывается.
Данный плагин можно использовать, например, для создания портфолио фотографа или дизайнера . Думаю, посетители оценят ваш сайт.

browserSwipe.js

Очередной полноэкранный скроллинг-плагин , с помощью которого создается эффектный переход по экранам. Среди доступных эффектов - скользящий переход, переход с вращением всего экрана, масштабируемый и горизонтальный скроллинг по экранам. Можно совмещать все эффекты на одной странице.

jQuery.panelSnap

Полноэкранный скользящий скроллинг-плагин . Плагин ничем особо не отличающийся, на первый взгляд, от предыдущих, но в нем реализована внутренняя область с прокруткой. Если мы докручиваем до конца внутреннего контента, то автоматически происходит переход на следующий экран. Теоретически - это решение проблемы для адаптивных сайтов . Если внутреннее окошко сделать в полный размер, на маленьких экранах контент, который не поместился по высоте, не будет теряться.