Сегодня я вам расскажу о замечательном WPF приложении, которое сильно упростит вам создание популярных jQuery-эффектов!
Этот инструмент для дизайнеров и разработчиков называется Glimmer. Он доступен для всех со странички на Codeplex.
Хотите переделать приложение под свои нужды? Нет проблем – на той же страничке можно скачать исходный код Glimmer!
В установке приложения нет ничего необычного. Единственное – для работы приложения требуется .NET 3.5 SP1, который автоматически установится, если у вас его нет.
После запуска приложения, можем сразу начать создавать эффекты для своих сайтов. Тут же видна ссылка на документацию, которую можно почитать перед началом работы.
Для приложения доступно несколько хороших примеров, которые можно скачать и посмотреть в действии. Mix Online Glimmer Lab Page — страница, на которой везде используются скрипты, сгенерированные с помощью Glimmer!
Давайте теперь посмотрим насколько легко создавать красивые эффекты для сайтов с помощью Glimmer!
Для примера я создал сайт в Microsoft Expression Web, использовав один из многих доступных шаблонов. В раздел контента я добавил две простых кнопки, которые сейчас ничего не делают:
Перейдем в Glimmer и через File->Open HTML (или Ctrl+O) откроем наш сайт:
Мы видим экран Preview и две кнопки – “Добавить новое действие” и “Сохранить”.
Добавим эффектов на нашу страницу. При нажатии на кнопку Hide, навигационное меню станет полностью прозрачным. А при нажатии на кнопку Show оно снова станет видимым.
Нажимаем на кнопку “Add New Action” и заполняем поля:
- Action Name – имя действия
Action Type – событие, при котором действие произойдет
Trigger – элемент, который вызывает действие. Можно нажать кнопку Select и выбрать нужный элемент, щелкнув по нему в окне Preview.
Target – элемент, на который мы действуем
Add Effects – выбор нужного эффекта
В моем случае для кнопки Hide настройки выглядят так:
А для кнопки Show так:
Теперь нажимаем на кнопку Save и сохраняем js файл в каталог нашего сайта.
То, что получилось, мы можем просмотреть сразу в окне Preview:
А можем выбрать из списка Preview in Browser браузер, в котором мы хотим просмотреть полученный эффект:
За минимальное количество действий мы создали довольно симпатичный эффект. Но я показал лишь самый простой эффект. В Glimmer можно создавать выпадающие меню, галереи изображений, смешивать различные эффекты и еще многое другое! Пробуйте! :)
