|
![]() |
Amazing Sliderсоздание HTML5 слайдеров |
|
Онлайн: РИСОВАЛКИ | ИГРЫ | РЕЛАКС программы |
О программеAmazing Slider – программа с оконным интерфейсом, в которой можно создавать разнообразные слайдшоу из изображений и видео, встраиваемые в красивые слайдеры (листалки) и публикуемые в сети интернет. Пользователь имеет богатый выбор шаблонов слайдера, переходов между слайдами и стилизации выбранного шаблона под свой дизайнерский вкус. ![]() Создание проекта состоит из пяти шагов, которые четко соответствуют своим кнопкам на главном меню программы: 1. Слайды![]() На этом шаге пользователь добавляет в проект изображения и видеоролики, которые по его замыслу станут слайдами в его интернет-презентации. Картинки добавляются с диска. Видео добавляются с диска или с видеохостингов Youtube, Vimeo по ссылке. Выделенный слайд можно отредактировать: добавить его заголовок и описание, которые во многих шаблонах будут динамически выезжать при наступлении очереди этого слайда. Здесь же можно добавить гиперссылку для перехода куда-то с этого слайда. Здесь же можно настроить индивидуальное время показа слайда, отличное от общих настроек... Интересная опция для гиперссылки - её можно открыть в так называемом Lightbox - это модальное окно с затенением вокруг него в пределах текущей страницы. Размер Lightbox регулируем. В Lightbox открываются только статические изображения. В верхней области окна есть поля для задания размера окна слайдера, именно слайдера, а не отдельного слайда. 2. Темы![]() Самая интересная настройка, особенно, для новичков. Здесь пользователь выбирает шаблон для своего слайдера. Шаблонов много, а настроек у каждого шаблона еще больше. Здесь мне запомнился шаблон MediaGallery - он позволяет создавать галереи (альбомы). В двух других конструкторах HTML5-слайдеров, представленных в нашей подборке (см. список в конце статьи), именно галереи нет. В окне тем шаблон не только выбирается, но и редактируется при желании. Погуляйте по закладкам Эффекты, Навигация, Элементы управления... Разбегутся глаза. На закладке CSS можно написать свои стили, если знаете синтаксис CSS и классы элементов слайдера. Так, например, можно изменить цвет фона страницы слайдера на темно-серый: body {background-color:#333;} 3. Переходы![]() Здесь настраиваются анимационные переходы между слайдами. Во-первых, можно выбрать сам тип перехода, во-вторых, открыть настройки это типа и их отъюстировать. Если вы поставите галочки напротив нескольких типов перехода, то все они будут применяться во время работы слайдера по случайному выбору. Ограничение: не CSS переходы применимы только к статическим картинкам, 3d переходы нельзя увидеть в окне просмотра программы, а можно только в браузере после публикации. Видео, кстати, тоже, в самой программе не проигрывается. 4. Настройки![]() Здесь много настроек, касающихся поведения слайдера. Я, например, сразу снимаю галочку "Автозапуск слайдшоу" (чтобы слайды не переключались сами по таймингу), потому что, как правило, пользователь должен картинку/видео рассмотреть и руководить переходом к следующему слайду сам. И ставлю галочку "Автозапуск видео", чтобы после переключения слайда видеоролик запускался уже без дополнительной кнопки. С этим окном у меня небольшой баг - по высоте окно не помещается в мой экран и кнопка OK внизу не видна. Тогда я после изменений каких-то настроек это окно открываю на весть экран (средней кнопочкой вверху справа) и кнопка OK появляется. 5. Публикация![]() В этом окне выбирается путь для экспорта HTML5 файлов. И здесь тоже можно задать цвет фона страницы, который замещает цвет фона, добавленный в окне "Темы" на закладке CSS. Также можно ваш проект можно конвертировать в плагин к одной из самых популярных CMS: WordPress, Joomla или Drupal. Скачать📥 Скачать портабельную версию Amazing Slider для всех версий Windows.
📥 Скачать версию Amazing Slider для Mac (dmg-файл).
📕 Почитать справки и приемчики по работе с программой, на английском.
📺 Посмотреть видео по работе в Amazing Slider для новичков (под скрипучую музыку без слов, даже английских).
Ещё обзоры для вебмастеров, расширяющие их технологический кругозор: • Памятка начинающему вебмастеру • Blumentals WeBuilder – удобнейший редактор кода с предпросмотром • Camtasia Studio – видеоредактор с экспортом в интерактивный HTML5 проигрыватель • GDevelop – игровой движок c редактором в вебе, на мобильных и ПК платформах • Google Web Designer – конструктор HTML5 баннеров и приложений • Flip PDF – конвертор PDF документов в HTML5 приложение • Hi Slider – программа для создания продвинутых jQuery слайдеров • Hippani Animator – удобная анимационная студия с экспортом в HTML, video, анимированный gif • Lunacy – для макетирования интернет-страниц • Moodle – практика администратора СДО • MediaWiki – как использовать для ведения и хранения документации • MediaWiki – как скачивать Wiki-страницы в PDF • MediaWiki – как подсвечивать синтаксис программного кода • Nicepage – конструктор сайтов и тем для CMS • Pinegrow – стильный визуальны конструктор сайтов • PowerPoint в HTML5 – обзор софта конвертации • RocketCake – лаконичный визуальный конструктор сайтов • Saola Animate – программа для быстрого и удобного создания анимации в HTML5 • Scratch – визуальный язык программирования и редактор кода • Sozi – программа для создания стильных HTML5 презентаций с перелетами между слайдами • SVG – как сделать анимацию линии (имитацию рисования) • Tilda – самый удобный онлайновый конструктор сайтов, плюсы и минусы • TimelineJS – библиотека для хронологических лент • TurboSite – лаконичный конструктор многостраничных сайтов • TurboWarp – продвинутый форк Scratch для создания HTML5 игр и приложений • WOW Slider – программа для создания красивых HTML5 слайдеров • WYSIWYG Web Builder – мощный визуальный конструктор сайтов • Yonote – веб-сервис для организации базы знаний • HTTP – коротко о протоколе • OpenAPI – спецификация, визуализация, инструментарий • Визуально-блочные среды программирования и моделирования – обзор • Инструменты для создания прототипов интернет-страниц: Axure и ProtoShare • Что нужно знать об электронных платежах вебмастеру интернет-магазина • Как создать интерактивный кроссворд на сайте? • Как работать с Flash в современное время • Спецсимволы HTML – коды около 2000 дизайнерских иконок |
Новости
|
|
![]() |
![]() |
|