Мы принимаем к оплате:

«Подарочный сертификат» от нашего Учебного Центра – это лучший подарок для тех, кто Вам дорог! Оплате обучение и подарите Вашим родным и близким обучение по любому из курсов!!!

«Сертификат на повторное обучение» дает возможность повторно пройти обучение в нашем Учебном Центре со скидкой 1000 рублей!

А также:


Как добавить анимацию html


Простой способ добавить CSS анимацию на сайт

Здравствуйте, друзья и коллеги по разработке!

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

Навигация по статье:

Для сайтов, работающих на WordPress, для создания таких эффектов есть специальный плагин. Он довольно прост в установке и настройке. Он называется Animate it.

Официальная страница плагина: Animate it

Этот плагин основан на библиотеке animate.css и содержит в себе множество различных эффектов появления, которые периодически обновляются и пополняются.

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

  1. 1.Устанавливается плагин как обычно. Копируем его название, переходим в раздел «Плагины» => «Добавит новый».
  2. 2.Вставляем название в окно поиска, а далее нажимаем на кнопку «Установить» и «Активировать»
  3. 3.После установки, когда вы перейдете к редактированию страницы или записи, у вас на вкладке визуально, на панели инструментов появится кока «Animate it».
  4. 4.Теперь, для того, что бы добавить какую-то анимацию для определенного фрагмента текста или элемента на странице вам достаточно его выделить, а затем нажать на кнопку «Animate it».
  5. 5.На вкладке «Entry» вы выбираете эффект появления. Здесь в раскрывающемся списке перечислено огромное количество эффектов анимации, которые разделены на группы. Для того, что бы просмотреть, как будет выглядеть тот или иной эффект, вы выбираете его здесь и нажимаете на красную кнопку «Animate it». На предспросмотре сверху вы можете видеть, как это будет у вас выглядеть.
  6. 6.Далее, после того как вы определились с эффектом появления, вы можете задать некоторые параметры для этой анимации.
    • Delay (in seconds) — здесь задаётся задержка анимации в секундах
    • Duration (in seconds) — можно задать время самой анимации и таким образом сделать её более плавной или резкой
    • Timing – здесь вы можете выбирать различные параметры, связанные с расчетом времени. Однако разница между ними особо не заметна
  7. 7.Помимо эффекта появления вы можете так же задать эффект исчезновения элемента. Для этого нам необходимо перейти на вкладку «Exit».
  8. 8.Здесь вы аналогично в поле «Animation» выбираете тип анимации и затем можете задать для нее задержку и время самой анимации.
  9. 9.На вкладке «Option» вы можете задать дополнительные параметры для анимации.

    «Animation repeat» — здесь вы можете выбрать количество повторов для определенной анимации. Она может у вас повторяться один раз, дважды, три раза, бесконечно, или же вы можете задать какое-то свое значение.

    «Keep Element Final State» — сохранять конечное состояние элемента. Я обычно оставляю здесь по умолчанию.

    «Custom CSS Class» — в этом поле вы можете добавить для элемента свой css-класс и использовать его для задания определенных стилей или для написания скриптов.

    «Animation on» — здесь можно выбрать тип CSS-анимации (при загрузке страницы, при клике на элемент, при наведении на элемент и при прокрутке). В случае с прокруткой вы можете добавлять дополнительный параметр, в котором вы можете в процентах задать, какая часть страницы должна прокрутиться, что бы ваш элемент начал появляться.

    В процессе задания различных параметров вы можете нажимать на кнопку «Animate it» для того, что бы на предпросмотре увидеть, как это отразится на вашем элементе.

  10. 10.После того, как вы задали все необходимые параметры, нажимаем на кнопку «Insert».

В результате выделенный фрагмент текста или элемент оборачивается в шорткод.

Добавление CSS-анимации для изображений

Для изображений задавать анимацию нужно немного другим способом, так как выделение и использование кнопку «Animate it» не срабатывает.

На странице данного плагина есть такой раздел, который называется «Class generator». Переходим по ссылке Class generator.

Здесь мы точно так же можем выбрать эффект, который нас интересует. При нажатии на кнопку «Animate it» вверху на предпросмотре можно увидеть, как это будет выглядеть.

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

После задания параметров анимации нажимаем на зеленую кнопку «Generate».

В результате генерируется список CSS-классов, который нам нужно скопировать.

Далее для добавления CSS-классов для изображения нужно:

  1. 1.В административной части сайта, кликнуть на изображение, а затем кликнуть на карандаш с подписью изменить.
  2. 2.В разделе «Дополнительные настройки» задаём определенный css-класс для изображения.
  3. 3.После чего нажмем на кнопку «Обновить».

Добавление СSS-анимации для конструктора страниц

Аналогичным образом, если вы используете для построения структуры страницы какие-либо плагины, на подобии Page Builder, Visual Composer либо их аналогов, вы можете так же задавать эффекты анимации для отдельных блоков.

Для этого мы используем страницу «Class generator». Выбираем здесь понравившийся нам эффект, задаем для него все необходимые параметры, и нажимаем на кнопку «Generate».

После чего копируем сгенерированные CSS-классы и переходим к редактированию структуры страницы.

В случае с Page Builder вам нужно будет нажать на кнопку «Редактировать» для конкретного виджета и в разделе атрибуты, в поле «Widget Class» вставить сгенерированные классы и то же самое нужно будет проделать для всех остальных виджетов.

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

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

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

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

Видеоинструкция

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

Надеюсь, что данная статья будет для вас полезной! Буду рада видеть комментарии под статьей! Подписывайтесь на мою рассылку и делитесь статьей в социальных сетях!

Успехов вам и вашим проектам!

До скорых встреч!

С уважением Юлия Гусарь

impuls-web.ru

Как легко добавить CSS анимацию в WordPress

Видели ли вы на многих популярных сайтах красивую CSS анимацию? Такие анимационные эффекты как скольжение контента, всплывающие и растворяющиеся элементы и т.п. В этой статье мы расскажем, как без написания кода добавить CSS анимацию в WordPress:

Когда и почему необходимо использовать CSS анимацию?

Анимация для сайта привлекает внимание пользователей к различным частям страницы. Вы можете использовать ее для товаров или выделить кнопку призыва к действию.

На многих сайтах CSS анимация «оживает» при прокрутке странички, что делает представление контента более интересным, ярким, цепляющим и прогрессивным.

CSS анимация намного легче видео и флэш-элементов; она очень быстро загружается и поддерживается большинством современных браузеров.

Вы можете вручную вставить анимацию в тему WordPress. Тем не менее, большинство новичков не хотят тратить время на изучение CSS. Рассмотрим, как можно легко добавить CSS анимацию на свой WordPress сайт.

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

Мы будем использовать специальный плагин. Он позволяет создать CSS анимацию для сайта HTML через визуальный редактор.

Установите и активируйте плагин Animate it!. Вам не надо ничего настраивать, в нем все выставлено как надо.

После этого создайте новую запись, и вы увидите в панели визуального редактора новую кнопку с надписью «Animate it!»:

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

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

Плагин предлагает три варианта: при клике мыши, наведении курсора мыши или прокрутке страницы:

Когда все это сделаете, нажмите на кнопку «Animate it», чтобы осуществить предварительный просмотр анимации.

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

Вам нужно удалить содержимое внутри шорткода, и заменить его собственным текстом, изображениями или чем-то другим, что вы хотите анимировать:

После этого нажмите на «Сохранить» или «Опубликовать», а затем кликните по кнопке «Просмотреть». Вы увидите свой красиво анимированный контент.

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

Перевод статьи “How to Easily Add CSS Animations in WordPress” был подготовлен дружной командой проекта Сайтостроение от А до Я.

www.internet-technologies.ru

Как добавить CSS-анимацию на сайт - WPNICE - ваш сайт о WordPress

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

Когда и зачем использовать CSS-анимацию?

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

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

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

Давайте посмотрим, как можно легко добавить CSS-анимацию с помощью плагина CSS Animate! Данный плагин позволяет создавать CSS-анимацию, используя стандартный WYSIWYG-редактор.

Плагин Animate it!

Устанавливаем плагин Animate it! Он работает сразу после установки, и его не нужно настраивать дополнительно. Просто создайте новый пост или откройте уже готовый, и вы заметите новую кнопку ‘Animate it!’в вашем визуальном редакторе WordPress.

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

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

Как только все настроено так, как вам нравится, вы можете смело жать на «Animate it», чтоб посмотреть привью анимации.

Потом жмем на кнопку «Insert», чтоб добавить анимацию на страницу или запись WordPress. Вы заметите, что в редакторе записи плагин добавляет шорткод с демо контентом внутри.

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

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

Используя специальный Class Generator вы можете создать анимацию, скопировать код и вставить его потом например, в виджет, в специальном поле.

Страница плагина

Читайте по теме: Easy Textillate — анимация для блога

wpnice.ru

Как легко добавить CSS анимацию в вордпрессе

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

Когда и почему необходимо использовать CSS анимацию?

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

На многих сайтах CSS анимация «оживает» при прокрутке странички, что делает представление контента более интересным, ярким, цепляющим и прогрессивным.

Существенное преимущество CSS анимации в том, что она намного легче видео и флэш-элементов; она быстро загружается и поддерживается большинством современных браузеров. Вы можете вручную вставить CSS анимацию в тему WordPress или в таблицу стилей child theme. Однако большинство новичков не хотят возиться и что-то менять в файлах темы, тратить время на изучение CSS, предпочитая более простой и быстрый метод – использовать специальный плагин. В принципе, верно. Зачем изобретать велосипед и усложнять себе жизнь?

В этой статье я расскажу, как просто добавить CSS анимацию на WordPress, используя специальный плагин.

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

С помощью данного плагина можно создать CSS анимацию через редактор WYSIWYG. Прежде всего, скачайте и активируйте плагин Animate it! Вам не надо делать какие-либо манипуляции с настройками, в нем выставлено все как надо.

Возможно вас заинтересует статья — как сделать css табы-вкладки

После этого просто создайте новую запись, и вы заметите в панели визуального редактора новый значок – кнопку «Animate it!».

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

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

Когда вы все это сделаете, нажмите на кнопку «Animate it», чтобы просмотреть, как это все будет выглядеть.

Затем щелкните по кнопке вставить, чтобы добавить анимацию в запись или на страницу WordPress.

Вы заметите, что плагин добавит шорткод с «рыбным» текстом в визуальный редактор.

Удалите «рыбу» с шорткода и замените ее своим текстом, изображениями или чем-то другим, что вы хотите анимировать.

После этого нажмите на «Сохранить» или «Опубликовать», а затем щелкните по кнопке «Просмотреть». Вы увидите свой контент с элементами анимации.

Надеюсь, эта статья была вам полезна, и теперь вы знаете, как просто добавить CSS анимацию на WordPress. Возможно, вам также будет интересна статья — Как сделать всплывающую CSS подсказку при наведении.

Если вам понравилась статья, не забывайте ее лайкать. Подписывайтесь на меня. Находите меня в YouTube, ВКонтакте, Твиттере.

smarticle.ru


Смотрите также



Компьютерные курсы по направлениям:

Для начинающих


A

Компьютер для начинающих: Word, Excel, Access и другие программы!

Графические пакеты


B

Популярные пакеты Adobe Photoshop, CorelDraw, ArchiCAD, AutoCAD и другие!

WEB + анимация


C

Курсы по созданию сайтов, WEB-дизайну и крутой анимации в Adobe Flash!

Бухгалтерия + делопроизводство

Сетевые технологии


E

Курсы сборки ПК, системных администраторов и защиты информации!