WOW-SLIDER – слайдер для сайта с анимацией в Adobe Muse.
Как создать анимированный слайдер на сайте без особых усилий и затрат времени? Как быстро сделать красивый слайдер для сайта с различной 3D анимацией? Этот урок как раз про использования одной из таких программ – Wow-Slider, позволяющих быстро и без особых знаний в программировании создать потрясающе красивый анимированный слайдер для сайта и затем вставить его в Adobe Muse.
WOW-SLIDER. Об уроке.
В этом видеоуроке речь пойдет про один интересный слайдер, который я недавно нашел в интернете благодаря одному из моих подписчиков.
Мне задали вопрос, как разместить данный слайдер в программе Adobe Muse. Я специально зашел на сайт, где этот слайдер расположен. Это сайт wowslider.com. И вы видите на нем здесь стильные шаблоны, потрясающие эффекты. Вот такие слайдеры мы можем размещать в программе Adobe Muse благодаря данному сервису.
WOW-SLIDER. Как скачать?
Вы можете скачать данный слайдер абсолютно бесплатно, нажимая на кнопку «скачать». WOW-Slider распространяется бесплатно для некоммерческого использования или тестирования. Если вы хотите использовать WOW-Slider на сайте университета, некоммерческом блоге или просто протестировать его, то можно скачать полнофункциональную бесплатную версию. Нажимаете кнопку «Free Download» или кнопку «Скачать бесплатно» ниже и скачиваете данный слайдер себе на компьютер.
WOW-SLIDER. Установка и настройка.
Запускаете его после установки. Он у меня уже установлен. И здесь хотя все на английском языке, хотя, возможно, можно выбрать и русский. Сейчас я изменю язык. Да, можно выбрать русский язык. И далее, в принципе, все очень просто. Чтобы начать перетащите изображение или папки с изображениями сюда или нажмите + «Добавить изображения и видео». Нажимаем плюсик – добавить изображения, и я добавлю несколько изображений сейчас. Например, вот таких. Нажимаю открыть, и эти изображения автоматически добавляются в программу. Мы видим здесь уже, в принципе, возможную анимацию, которая может происходить при смене изображений.
Вот здесь ниже «Эффект перехода» в закладке. Вы можете выбрать любой эффект перехода. И сразу будет видно, как он работает. Давайте я сейчас выберу какой-нибудь эффект перехода, например, «Cube» вот такой. В принципе, дальше вы можете выбрать, как будут выглядеть данные кнопки. Это у нас выбирается вот здесь в верхней панели. Здесь очень много различных вариантов. Я, например, выберу какой-нибудь, скажем, вот такой. И можно выбрать также размер слайдера. Размер я выберу, например, «640х480» – пускай так и стоит. Здесь дальше вы можете выбрать «На всю ширину» или «На весь экран», или «Ограниченный». Я все оставляю сейчас по умолчанию для примера. Вы можете потом поэкспериментировать.
Можете также вот здесь указать заголовок для данного слайдера и нажимайте кнопку «Сохранить HTML». Далее я иду к себе на рабочий стол и сохраняю в папку «WOW Slider». Она у меня сейчас пустая, я нажимаю сохранить. Происходить экспорт, и нас перебрасывает автоматически в браузер, где мы сразу видим, как работает наш слайдер. Вот все наши фотографии. Вот так они будут перемещаются. Здесь у нас есть и наезд такой интересный.
WOW-SLIDER. Размещение кодов на сайте в Adobe Muse.
Ниже инструкция «Что нам нужно сделать для того, чтобы слайдер разместить у себя на сайте».
Нам нужно сделать загрузку всех изображений на свой сервер, на котором мы будем размещать наш сайт, т.е. папки «data1/» и «engine1/» размещаются в папке, куда я экспортировал только что слайдер.
И далее разместить два вот этих кода, которые нам сгенерировал сервис.
Первый код нужно разместить между тегами <head> и </head> в программе. Делается это очень просто. Мы заходим в программу Adobe Muse, вот сюда. Заходим «Страница», далее «Свойства страницы» и переходим в раздел «Метаданные». Здесь в разделе «HTML для <head>» мы должны вставить тот первый код, который предлагается нам в программе. Копирую его и вставляю его вот сюда в раздел «HTML для <head>». Нажимаю «ок».
Второй код нужно разместить между тегами <body>, разместить в том месте, где мы хотим, чтобы наш слайдер появился на странице сайта. Для этого я захожу в «Объект», далее «Вставить HTML». И сюда именно я должен разместить данный код. Я перехожу снова в браузер. Копирую этот код, который нам нужно разместить между тегами <body> и размещаю его в данное окошко в программе Adobe Muse. Вставить. Нажимаю «ок». Происходит некая трансформация сейчас. И не смотрите, что сейчас вот такая непонятная штука появилась. Я делаю ее просто побольше. Или просто захожу в окошко «Перспективы» и устанавливаю здесь «640х480». Enter. И получаем вот такое окошко, которое можем разместить в любое место на своей странице, где мы хотим, чтобы разместился данный слайдер.
WOW-SLIDER. Размещение папок в проекте сайта и просмотр.
Что же нам делать дальше? Поскольку нам нужно, чтобы те две папки «data1» и «engine1» находились у нас вместе с файлами нашего сайта, то при экспорте нажимаем «Файл», далее «Экспортировать как HTML». Я просто выбираю данную паку у себя на компьютере. Перехожу на рабочий стол, выбираю папку «WOW-Slider» и сюда же я буду экспортировать сайт из программы Adobe Muse. Здесь вы пишите название своего сайта – доменное имя. Я напишу для примера 123.ru, это не так сейчас важно. И нажимаю кнопку «ок».
Происходит экспорт нашего файла в HTML и сразу же запускается в браузере сайт, который мы только что экспортировали. И мы видим, что слайдер у нас сразу же работает прямо на сайте. В папке с нашим экспортированным сайтом вы теперь видите все файлы экспортированного сайта и файлы слайдера. Все, как должно быть размещено в данной папке. Те две папки «data1» и «engine1» находятся у нас уже в папке проекта. Именно поэтому наш слайдер сразу работает в браузере при просмотре.
Вот таким вот образом вы сможете разместить WOW-Slider у себя на сайте.
WOW-SLIDER. Ограничения бесплатной версии. Удаление надписи Wow-Slider.
Единственное ограничение, что здесь постоянно этот значок «WOW-Slider» будет на каждой картинке. Возможно, для того, чтобы его не было, вам необходимо будет приобрести полную лицензионную версию данного слайдера. А можно просто снова заменить картинки в папке WOW-Slider – «data1» на свои без этой надписи перед загрузкой на хостинг.
Надеюсь, вам понравился данный урок. Теперь вы с помощью данного сервиса сможете устанавливать красивые анимационные слайдеры у себя на сайте с помощью данной программы «WOW-Slider». На этом я прощаюсь с вами. До следующих видеоуроков. Подписывайтесь на мой канал, ставьте лайки и пишите комментарии внизу.
Смотрите также видеоуроки по стандартным виджетам Adobe Muse:
Виджеты Слайд-шоу для сайтаВиджеты Композиции в Adobe MuseВиджеты Панели Adobe MuseВиджеты Adobe Muse
Автор видеоуроков и курсов Adobe Muse:
Дмитрий Шаповалов
Очень компактный jQuery слайдер изображений с элементами Lightbox. Благодаря своим гибким размерам, очень просто встраивается в любой контейнер, в одиночную запись в виде миниатюр, при наведении курсора мыши или клике на которые, активируется лайтбокс с увеличенной картинкой и элементами управления. Удобно размещать такой слайдер а сайте, для представления продуктов или анонсов новостей. Отличное решение для сайтов с большим объёмом информации.