Один из важнейших способов удержания внимания — это динамика. Учёные сделали вывод, что при целенаправленной активизации движений определённых объектов происходит концентрация внимания,  усиление внимания на предмете. Визуализация мышления предполагает активное использование анимаций в представлении информационных объектов. Представляю еще один технологический приём визуализации «Бегущая строка». Бегущей строкой может быть тема занятия. Или какой-то важный термин. Его постоянное движение привлечёт внимание учащихся. Соответственно мы должны настроить скорость прохождения строки. Она должна быть оптимальной, в соответствии с возрастом учащихся.

В программе PowerPoint для его выполнения лучше всего подходи эффект анимации «Выползание«.

Для того, чтобы «зациклить» эффект анимации, в настройках анимаций выбираем режим «До окончания слайда».

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

Как это может выглядеть, продемонстрируем на маленьком фрагменте:

(смотреть в отдельном окне)

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

Подготовка слайда

Для этого примера возьмём информацию про Марс с соответствующей страницы Википедии. Итак, для начала создадим в PowerPoint новую презентацию или добавим слайд к уже существующей. По умолчанию цвет фона — белый, но для слайда на космическую тематику сменим фон на тёмно-серый. Кликните правой кнопкой мыши по слайду и выберите пункт Формат фона.

В открывшемся окне настройки фона выберите Сплошная заливка, затем кликните на значок выбора цвета и на ссылку Другие цвета — зададим собственный цвет «космоса». Далее перейдите во вкладку Спектр и в параметрах Красный, Зеленый, Синий укажите 25. Получится тёмно-серый цвет.

Теперь добавим на слайд изображение планеты. В браузере откройте страницу с изображением Марса, далее кликните правой кнопкой мыши на изображении и выберите пункт Копировать изображение. Оно будет скопировано в буфер обмена.

Снова возвращаемся в PowerPoint и вставляем изображение на слайд. Добавляем заголовок.

Теперь перейдемм к созданию текстового блока с прокруткой. C помощью iSpring добавим его как веб-объект на слайд презентации.

Подготовим HTML-документ для блока с прокруткой

HTML-документ проще всего подготовить в MS Word. Создайте новый документ и вставьте в него текст. На вкладке Дизайн кликните Цвет страницы, выберите Другие цвета и во вкладке Спектр укажите в параметрах Красный, Зеленый, Синий значение 25.

Текст нужно сделать контрастным цветом, например, белым.

Далее сохраните документ в формате Веб-страница с фильтром. Для этого нажмите Файл → Сохранить как, введите название документа и выберите тип файла Веб-страница с фильтром. При сохранении документа обратите внимание, что необходимо настроить кодировку Юникод (UTF-8).

В этом формате MS Word создаст один html-файл, без дополнительных файлов и папок.

Вставка веб-объекта на слайд

Далее снова возвращаемся в PowerPoint. На панели инструментов iSpring кликните Web (данный пример выполнен в программе iSpring Suite, но вы можете создать скроллируемый текстовый блок и с помощью iSpring Pro или iSpring Presenter).

В диалоге вставки веб-объекта вместо Веб-адрес выберите Путь к файлу, затем кликните Обзор и выберите ваш HTML-файл. В блоке Настройки включите Показывать на слайде, для параметра Показать через оставьте значение 0 секунд.

Нажмите ОК, и веб-объект появится на слайде в виде окна с текстом Web Объект (локальный файл). После публикации здесь будет отображаться текст про Марс. Измените его размер и положение так, как вам нужно.

Теперь осталось только опубликовать презентацию.

Публикация презентации

Кликните Публикация на панели инструментов iSpring Suite. В настройках формата публикации выберите Универсальный (Flash+HTML5) — этот вариант позволяет просматривать презентацию на максимально широком диапазоне устройств. Если необходимо, отредактируйте внешний вид плеера, измените цветовую схему, включите или отключите панели. Кликните кнопку Опубликовать и откройте сконвертированную презентацию в браузере.

Всем привет! Сегодня на seo-mayak.com будет не совсем обычный урок. Речь пойдет об анимации.

Нет, в фотошопе мы разбираться на будем, обойдемся старым добрым HTML и научимся делать несколько анимационных фокусов.

Анимация для сайта забавная штука, скажу я Вам, но почему-то редко применяемая, хотя сложного вообще ничего нет.

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

Фотошоп — великая сила, кстати скоро выйдет серия бесплатных видео уроков по анимации картинок, так что подписывайтесь на обновления блога.

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

Как на сайте сделать бегущую строку с помощью HTML

Итак, знакомьтесь! Волшебный тег — . Изначально этот тег был разработан для браузера Internet Explorer, но со временем и другие браузеры стали поддерживать его применение.

Давайте заставим строку двигаться. Для этого в редакторе WordPress, в HTML режиме вставляем следующее:

Бегущая строка

Вуаля

Бегущая строка

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

  Бегущая строка  

Бегущая строка

Применив атрибут direction со значением right мы изменим направление движения бегущей строки и она будет двигаться справа налево:

  Бегущая строка  

Бегущая строка

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

Подставив значение up для атрибута direction мы заставим строчку двигаться снизу вверх:

  Бегущая строка  

Бегущая строка

Значение down укажет строчке двигаться сверху вниз

  Бегущая строка  

Бегущая строка

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

  Бегущая строка  

Бегущая строка

Теперь давайте немного остановимся и разберемся как работает тег .

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

По молчанию стоит значение 6, но если задать значение 1, то расстояние между старым и новым положением строчки будет равняться 1 пикселю, что обеспечит медленный и плавный ход бегущей строки:

  Бегущая строка  

Бегущая строка

Атрибут behavior задает способ прокрутки внутри заданного блока и по умолчанию имеет значение scroll, что заставляет бегущую строчку скрываться из виду и начинать движение сначала.

Но если подставить значение alternate, то строчка не будет скрываться из виду, а дойдя до границ блока начнет движение в обратную сторону:

  Бегущая строка  

Бегущая строка

Значение slide для атрибута behavior дает команду бегущей строчке дойти до границы блока и остановиться:

  Бегущая строка  

Бегущая строка

Атрибут height задает высоту блока. По умолчанию стоит 12 пикселей, но давайте ее изменим и немного добавим к скорости прокрутки бегущей строки:

  Бегущая строка  

Бегущая строка

Атрибут width отвечает за ширину блока. Можно применять атрибуты width и height вместе, чтобы задать желаемые границы блока. Для наглядности добавим рамку в стили и чуть-чуть замедлим скорость прокрутки:

  Бегущая строка  

Бегущая строка

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

  Бегущая строка  

Бегущая строка

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

  Бегущая строкаБегущая строка  

Бегущая строкаБегущая строка

Устанавливаем время задержки анимации с помощью атрибута scrolldelay, подставляя числовые значения. По умолчанию стоит 80 миллисекунд:

  Бегущая строка  

Бегущая строка

Атрибут scrolldelay — это еще один инструмент, с помощью которого мы можем регулировать скорость прокрутки.

Анимация изображений на сайте

Простой пример анимации изображения:

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

Вот еще интересный пример, с помощью тега marquee можно создать простенький слайдер:

Можно каждую картинку в слайдере сделать ссылкой:

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

До встречи!

Статьи по теме:

CSS анимация — свойство animation.

C уважением, Виталий Кириллов

Зачастую многим пользователям приходится иметь дело с видеопрограммами для создания какого-либо материала. Мало кто может сразу разобраться во всех премудростях настроек и вставить бегущую строку. Для этого необходимо выполнить несколько простых шагов.

Вам понадобится

— компьютер;
— выход в интернет.

Инструкция

Запишите HTML код для создания бегущей строки. Примером может служить следующая комбинация:
«бегущая строка». Изучите пример данного кода на сайте prostoflash.ru.

Скачайте программу Ulead VideoStudio для создания необходимой функции. Пройдите в «Панель задач» и кликните по вкладке «Заголовок». Произойдет переход в другое меню, где нужно воспользоваться окном справа. В нем имеется уже несколько интегрированных текстов. Просто перетащите один из них на шкалу времени, представляющую собой дорожку со значением «Т».

Создайте собственный текст. Найдите подсказку в «Дополнительных возможностях». Кликните два раза по окну просмотра для того, чтобы напечатать текст. Установите предварительно цвет, шрифт, его размер и введите то, что вы хотите видеть в бегущей строке. Все происходит так, как и в известном редакторе Word.

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

Переключитесь в режим «Анимация» и поставьте флажок в разделе «Применить анимацию». Вы сразу получите доступ к некоторым эффектам. Выберите категорию «Fly» и выделите самый нижний эффект в правом столбце. Он выделен зеленой рамкой.

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

Как просто